HTML Character Codes Bug

1,148 views

Skip to first unread message

aaronls...@gmail.com

unread,

Jan 31, 2013, 4:22:47 PM1/31/13

to google-chrome-...@googlegroups.com

It appears that some HTML Character Codes are not being displayed as they are in the page source. For example, if I create a test.html in notepad with ' in it, and then view this in chrome and open the Elements Panel, it just shows a ' instead of ' in the source. If I right click the page and view source, it shows the source correctly.

This problem makes it difficult to debug encoding issues on pages. Additionally, the problem prevents you from entering an html character code through the elements panel. If I edit the text of an element and put ' in it, it encodes the & and ; such that it displays ' in the browser. The Elements panel shows ' but in reality it has changed this to &apos; as evidence by the page displaying ' instead of '

This is the behavior you would expect from a WYSWYG editor, where characters you type get converted automatically to character codes. However, this is NOT a WYSWYG editor, the elements panel is source code, and it essentially becomes impossible to enter character codes into it.

Alexander Pavlov

unread,

Feb 1, 2013, 4:14:19 AM2/1/13

to aaronls...@gmail.com, Google Chrome Developer Tools

Hello Aaron,

Thanks for sharing your concern. First off, I'd like to point out that the Elements panel is NOT source code. Source code for your HTML is found in the Sources panel. Elements panel displays the DOM tree of your page (incuding iframe contents if they are contained within - these are naturally not found in the master page HTML). DOM tree is dynamic and can be changed in various ways from JavaScript (in fact, you can construct most or ALL of your <body> contents from JavaScript, which is what, for example, GMail does), so if your pages are dynamic (or contain frames), the HTML source and the DOM tree will never coincide. In fact, the HTML-like DOM representation has been chosen for the users to better understand what's going on (you can select your <html> element and type console.log([$0]) in your console. This will display an array containing the <html> DOM element in an entirely different way.)

Indeed, ' will get converted into the ' character in the DOM tree. The reason is that the HTML parser automatically converts all entities (', & and others) into the corresponding characters when building the DOM, so the resulting DOM does not contain the information found only in the source code (your HTML or string literals in your JavaScript, like element.innerHTML = "'DOM & HTML'";), so this conversion is one-way.

That said, you can insert HTML entities while editing the DOM tree in the Elements panel. You just need to right-click the desired element and select "Edit as HTML" from the context menu. Then you will be able to type in

'DOM & HTML'

and see

'DOM & HTML'

in your page and the DOM tree.

--
You received this message because you are subscribed to the Google Groups "Google Chrome Developer Tools" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-develo...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.