Take the 2-minute tour ×
Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

Does anyone know of an existing extension to format the html code after you 'View Source"? I only ask because it would make it so much easier to read. Basically just removing extra whitespace, format all elements, that sort of thing. Doesn't seem like it'd be that hard.

share|improve this question

migrated from webapps.stackexchange.com Jul 26 '11 at 13:30

This question came from our site for power users of web applications.

    
I don't know what you mean by “format”. What exactly do you want? What’s lacking with the results of Ctrl+U? –  Synetech Aug 30 '12 at 17:01
    
@Synetech - What I mean is if I hit <code>Ctrl+U</code>, I want to have some ability to format the HTML (tabs or spaces) and not have it be in whichever format provided by the server. I'm looking for a functionality similar to Chrome Dev tools inspector, but with the source all expanded, and after DOM load, before any javascript calls. –  Stevus Sep 19 '12 at 16:32
    
You could simply use Ctrl+U; Ctrl+A; Ctrl+C, then switch to a text-editor like Notepad, then Ctrl+V and make any changes you wish (if you use a more advanced text editor, you can do more advanced formatting and stuff like with RegEx search-and-replace). –  Synetech Sep 19 '12 at 16:46
    

3 Answers 3

Google Chrome already has this functionality under Developer Tools

You can access it under Menu->Tools->Developer Tools or just press CTRL+SHIFT+I

A nicely formatted source is under the first menu item Elements

share|improve this answer
3  
Well the source in dev tools is all compacted. Anyway to expand all elements? Otherwise it's kind of useless for what I'm looking for. –  Stevus Jul 25 '11 at 22:39
10  
Agreed. Dev Tools is not the same as source at all, especially since it is a live version which includes any changes to the DOM via JavaScript et al. so you don’t necessarily see the actual source file. –  Synetech Aug 30 '12 at 17:00
    
I definitely agree with the comment above. The markup shown in the developer tools could be TOTALLY different to the original page source depending on how the page is put together. Sorry, I think this answer needs a downvote as it's misleading... –  CJ01 Jun 4 '13 at 16:30

There is an extension called "Quick source viewer", which does some basic formatting by default. Code is indented nicely and colorized.
Also, (I think) it actually shows the HTML code of the currently loaded page (unlike Chrome's "View Page Source", which sometimes reloads it, showing code that doesn't match the page in the browser).

share|improve this answer

The best I've been able to find is "Neo Vision" for Chrome.

https://github.com/desandro/neo-vision

It has good syntax highlighting but some missing features like: line numbers and the ability to beautify minified code.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.