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
    
    
One issue with formatting source code for viewing: If the HTML is malformed, then automatic formatting would just choke. Yes, we live in 2015 and most HTML is generated by scripts and CMS systems, but as a developer I have often come across badly formatted HTML, CSS and related code that cannot be easily auto-formated without manually debugging. –  JakeGould Mar 2 at 3:12

4 Answers 4

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
11  
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

A plugin is unnecessary because Google Chrome provides this feature by default, though it is somewhat not obvious.

This feature is documented by Google here if you'd like to investigate further.

All you need to do is to click the "{}" icon on the bottom toolbar. This works for minified JavaScript as well as CSS.

enter image description here

It's the small button in the center of the image at the bottom on the far right..

share|improve this answer
    
Unfortunately, this doesn't work for HTML. –  colan Apr 14 at 19:49

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
    
It also appears to not support HTML files. –  Xiong Chiamiov Mar 25 at 21:58

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.