Debug your CSS in Vue

If you'd like to visualize how your HTML elements are laid out, add the following created() code block to your Vue app's instance.

created() {
    document.addEventListener("keyup", e => {
    if (e.key == "d") {
        [].forEach.call(document.querySelectorAll("*"), function(a) {
        a.style.outline =
            "1px solid #" + (~~(Math.random() * (1 << 24))).toString(16);
        });
    }
    });
}

You should see your website's HTML elements' borders light up with color, allowing you to identify common layout and sizing issues.