Is it possible to view HTML source auto-formatted in Firefox

Question

I am writing a Web site in PHP, and the HTML it renders is not well formatted and hard to read in Firefox (most of it is on a single line).

I don't want to mess up my PHP code by adding loads of white space formatting stuff, so I was wondering if there is an option or perhaps an add-on to Firefox that will give me the ability to view the source indented according to the HTML's structure.

Solution 1

View Source Chart 2.7

[UPDATE]: original link was broken, here is the website: http://viewsourcechart.com/

Right click -> View source chart

This is what I get for the Google home page HTML source:

Before:

After:

Solution 2

From here

View Source Chart Graphically displays source structure.

JSView 2.0.5 Displays information on page external files.

HighlightAll Highlights identical elements in the code.

Html Validator Validates HTML of the current page.

View Formatted Source Shows source structure.

SourceEditor Allows to edit code and view the results.

Solution 3

I normally use Firebug for debugging html output.

This allows me to se the html as it's rendered by the browser, together with the well-formatted source in Firebug. I can also inspect elements in the displayed html and see where they come from in the originating html source.

Solution 4

No addon is needed, just use FF's "inspect element", you have everything to read the source code.

Solution 5

If anyone is looking for the same functionality in 2019, there is Fire Source Viewer [1] for Firefox Quantum which displays the beautified HTML DOM after javascripts manipulates it, which is even better than having only the html source delivered by the webserver.

[1] https://addons.mozilla.org/en-US/firefox/addon/fire-source-viewer/

View more solutions

Comments

[tvdo]

Note that recent versions of Firefox (I think it was since 4, confirmed for 10+) come with the ability to do syntax highlighting and word wrapping under the View menu of the source window. Just right click => View Page Source to open this window.

[Aditya Hajare]

I have this installed but its dosent do what I need I think i have not been clean enough about what i mean by "formatted" I will edit the question now

[Christoph Rüegg]

At least give a brief description as to the salient feature of the plugin that relates to the question. Otherwise, it's just a flippant answer.

[Angelo]

The web developer plugin is a very popular plugin that, among other things, allows one to view source for any page. The source view has some highlighting, so is "formatted"-- although now I see that the OP wants something more specific for the formatting.