cannot add extra spaces ' ' in chrome developer tools while editing

Question

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

<div>hello&nbsp;&nbsp;world</div>

The above renders as literal.

Expected:

hello  world

Actual:

hello  world

Answer 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.