14

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.

Improve this question
1
  • 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.
    – Bob
    Commented Aug 1, 2012 at 13:05

6 Answers 6

Reset to default
10

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:

alt text

After:

alt text

Improve this answer
1
  • Firefox addon is not available as of 2023 and the author's homepage leads to some scammy site. This may have been a very useful answer but as of now it's not and may even be slightly dangerous.
    – Greg Dubicki
    Commented Dec 11, 2023 at 12:24
4

From here

View Source Chart Graphically displays source structure.

alt text

JSView 2.0.5 Displays information on page external files.

alt text

HighlightAll Highlights identical elements in the code.

alt text

Html Validator Validates HTML of the current page.

alt text

View Formatted Source Shows source structure.

alt text

SourceEditor Allows to edit code and view the results.

alt text

Improve this answer
0
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.

Improve this answer
0
3

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/

Improve this answer
1

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

Improve this answer
-1

Web developer plugin:

The Web Developer extension adds various web developer tools to a browser. The extension is available for Chrome and Firefox, and will run on any platform that these browsers support including Windows, OS X and Linux

enter image description here

Improve this answer
3
  • 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
    – Willbill
    Commented Sep 23, 2009 at 13:52
  • 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.
    – random ♦
    Commented Sep 23, 2009 at 13:53
  • 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.
    – Angelo
    Commented Sep 23, 2009 at 14:24

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .