Categories: Developer Tools

DevTools now display white space text nodes in the DOM inspector

Web developers don’t write all their code in just one line of text. They use white space between their HTML elements because it makes markup more readable: spaces, returns, tabs.

In most instances, this white space seems to have no effect and no visual output, but the truth is that when a browser parses HTML it will automatically generate anonymous text nodes for elements not contained in a node. This includes white space (which is, after all a type of text).

If these auto generated text nodes are inline level, browsers will give them a non-zero width and height, and you will find strange gaps between the elements in the context, even if you haven’t set any margin or padding on nearby elements.

This behaviour can be hard to debug, but Firefox DevTools are now able to display these whitespace nodes, so you can quickly spot where do the gaps come from in your markup, and fix the issues.

Demo

Whitespace debugging in DevTools in action

The demo shows two examples with slightly different markup to highlight the differences both in browser rendering and what DevTools are showing.

The first example has one img per line, so the markup is readable, but the browser renders gaps between the images:

<img src="..." />
<img src="..." />

The second example has all the img tags in one line, which makes the markup unreadable, but it also doesn’t have gaps in the output:

<img src="..." /><img src="..." />

If you inspect the nodes in the first example, you’ll find a new whitespace indicator that denotes the text nodes created for the browser for the whitespace in the code. No more guessing! You can even delete the node from the inspector, and see if that removes mysterious gaps you might have in your website.

2 comments on “DevTools now display white space text nodes in the DOM inspector”

Post a comment

  1. jieorlin wrote on

    Please implement the text-space-collapse https://bugzilla.mozilla.org/show_bug.cgi?id=654994

    Reply

  2. Glenn wrote on

    This is a great idea, but I can’t find (1) a setting to turn it on (2) a way for inspector to select the gap (3) any white space symbols in the current DevEd inspector display (4) a way to search for white space symbols to find them. But I know I have a white space, because when I set body { font-size: 0; } it goes away.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *