I am trying to debug a problem, and I am using the View Page Source in Chrome.
A large portion of javascript and html is presented scrabled i.e. in a format with no identation and like:
gt&blabla&gtetc
Is there a tool/way to always get a good format of the generated source?

I am trying to debug a problem, and I am using the View Page Source in Chrome.
A large portion of javascript and html is presented scrabled i.e. in a format with no identation and like:
gt&blabla&gtetc
Is there a tool/way to always get a good format of the generated source?

• javascript
• html
• debugging
• browser

• superuser./questions/315260/… – HttpNinja Commented Aug 5, 2013 at 16:55
• opera dragonfly formats the code well and is a nice debugger for javascript – bansi Commented Aug 5, 2013 at 16:55
• Maybe you want the DOM view instead. See developers.google./chrome-developer-tools/docs/elements. – Felix Kling Commented Aug 5, 2013 at 16:55
• 1 use this site to beautify your code ctrlq/beautifier – Vinod Louis Commented Aug 5, 2013 at 16:56

3 Answers 3

Open the developer tools: Ctrl+Shift+I or simply F12

You can see a nicely formatted and indented tree view of the source code under the Elements tab.

If you hit F12 it will pull up the developer tools which gives you real good access to the source and scripts.

You can install chrome extension Quick source viewer

• Once installed, click on the Extension icon (top right of chrome which looks like puzzle), and pin the Quick source viewer you just installed
  • This would make the icon appear on the top right
• Now, open any page you want to view the source of and click on the Quick source viewer icon
• You will see the page source opened that shows all the details in a better way

Note: If the icon doesn't work, restart chrome after installation