6

More often than not when using things like CMS'es and static site generators, HTML output looks like rubbish (wrong indendation being the most annoying flaw).

Is there any solution for having rendered output in Chrome's "View Source" tidied / prettified?

In my case I'm using a static site generator. Everything looks perfect in the editor but code gets screwed when previewing in the browser.

(I know I can probably add a build task (e.g. Grunt) to handle HTML-prettifying. But in many cases, such as when using live-reload tools (I'm using Mixture.io) where you actually preview an internal version of the site, that's not an optimal solution.)

Henrik
  • 585
  • 1
  • 5
  • 15

2 Answers2

8

I recommend Quick Source Viewer.
It can show you the source of the current page formatted and colour coded.

It's pretty powerful, showing all 'sources' of the page, be it css, js or html. Even things like inline css/js can be viewed individually (with injected code highlighted). And the best part is it prettifies all of them, even the css (which chrome's dev tools still refuses to do).

Hashbrown
  • 2,782
  • 4
  • 32
  • 47
  • 2
    Thanks! That's a great recommendation, I'll be using it. If only it was integrated within DevTools to prevent having it in a separate window and manually refreshing upon changes … :) – Henrik Nov 15 '13 at 09:33
  • Still works in 2017 :) – Dimitry K Jul 26 '17 at 16:56
  • I haven't had to use it in a while, devtools have come a long way, css pretty-prints now, but I'm glad it still works, it's really powerful – Hashbrown Jul 27 '17 at 01:26
  • Chrome doesn't allow the extension to operate on a tab whose address starts with `view-source:` (ie. a tab created after the user selects *View Page Source*). – chb Jan 20 '18 at 17:44
  • This is not quite the same thing as "View Source". This shows a live version of the document, the same as what you see in the dev tools Elements tab. "View Source" shows the original HTML downloaded, without any manipulations from Javascript. – Danny Dulai Jan 20 '23 at 16:03
0

I usually just Ctrl+Shift+I for Inspect. The Elements tab has all the html, with clor coding and hide-unhide for sections.

jon
  • 1
  • 4
    That is an highly unreliable way to inspect source code. an inline script can run and then remove its own ` – vsync Sep 27 '20 at 20:03
  • 4
    This shows you the DOM not HTML source. – Alireza Dec 16 '20 at 01:44