Cannot Add Extra Spaces ' ' In Chrome Developer Tools While Editing

I was trying to add extra spaces ( ) inside a div tag in Elements section in chrome developer tools.

hello  world

The above rende

Solution 1:

For anyone who stumbles upon this question and is actually looking for a way to add non-breaking space characters ( ) into the Developer Tools Elements panel you can do so by right-clicking the element that contains the value you want to add your characters to (or any of its parent elements) and selecting "Edit as HTML".

While double-clicking the value and adding   will show   as text in the browser, editing as HTML will correctly show the non-breaking space character as expected.

Solution 2:

When you are using Chrome's Developer Tools, you don't need to worry about HTML entities.

Simply writing the code as you would in an IDE works as expected -- entering <div>hello world</div> results in a <div> being created with the contents hello world.

Using multiple spaces will also work in this manner: <div>hello world</div> results in a <div> being created with the contents hello world.

Here is this very answer manipulated in this way: