Hacker News Reader

Comment by whalesalad | Hacker News Reader

Instead of a border I tend to have a debug helper that adds a 1px outline of cyan or pink. To get the “bones” of a component or page.

Good advice. Definitely sounds like captain obvious but it’s also something I think needs to be said.

View on HN

And for anyone who isn't familiar with (what I would consider) the most important difference in this use-case: borders affect the positioning of other elements, whereas outlines do not. You don't want to be using a temporary border, since it can significantly affect the layout of your site when you remove it.

* { box-sizing: border-box; }

I have never wanted anything other than this behaviour, so I pretty much always include it when starting on a fresh project.

Borders still affect the positioning of things even with box-sizing set to border-box. For example, here "Block 1" is still two pixels taller than "Block 2":

<div style="padding: 8px; border: 1px solid black"> Block 1 </div>

<div style="padding: 8px;"> Block 2 </div>

https://jsfiddle.net/t4rkvfzx/

Does that really matter though? A difference of 2px for something temporary doesn't seem like much concern. While I understand the implication is that these can accumulate and cause larger layout issues, the purpose of this practice is to highlight those areas to remove that accumulation anyway

The bigger issue is that you don't know if a UI inconsistency is a bug or a side-effect.

For this case of debugging, though, borders might actually be preferable because outlines would overlap, potentially obscuring the DOM depth

When I'm coding DIV layouts by hand, I temporarily assign each DIV with a random background-color. Once I have the layout and responsiveness required, I strip the background-color setting on each DIV as I fill them up with content. Works for me.

Yep, that is exactly why I do this! Great explanation.

Addy Osmani has a "one-line debugger" that gives each element on the page a random colored outline.

    [].forEach.call(document.querySelectorAll("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})

https://gist.github.com/addyosmani/fd3999ea7fce242756b1

Handy bookmarklet

  javascript:(function(){Array.from(document.body.getElementsByTagName('*'), e => e.style.outline = '2px dotted orangered');})();

Why not inject css instead? That would be more effective

how do you mean?

Like this: https://stackoverflow.com/questions/15505225/inject-css-styl...

  var node = document.createElement('style');
  node.innerHTML = '* { outline: 2px dotted orangered; };
  document.body.appendChild(node);

This should suffice, no need to make a variable, this can all be done at once:

   document.head.appendChild(document.createElement('style')).textContent = '* { outline: 2px dotted orangered'

That and I tend to have a debug class handy to drop in to highlight a specific elements... where it is... where the hell did it go!?!!?

I also make the body background pink and the outline a different color.

Reply on news.ycombinator.com