8

When I 'view source' using different browsers my web pages seems to always have lots of whitespace and are badly formatted. I am developing a Java web application using JSPs.

How can I ensure that when I 'view source' I see nicely formatted HTML?

Edit:

When I say formatted I mean typically:

I get this kind of thing:

<div>




                     <p>some text</p>
     </div>

when I want:

<div>
      <p>some text</p>
</div>

In my JSPs (which use includes) everything is formatted nicely.

Dan MacBean
  • 1,915
  • 3
  • 15
  • 21
  • Your web app must generate nicely formatted HTML. – Riz Oct 15 '11 at 14:19
  • 3
    People are doing everything possible to minify and remove whitespaces from their HTML in order to increase performance of their site and you are trying to do exactly the contrary. May I ask why? – Darin Dimitrov Oct 15 '11 at 14:20
  • 1
    This is for during development only. When I 'view source' I want to see 'human friendly' formatting, so I can read it and spot any potential issues quicker. – Dan MacBean Oct 15 '11 at 14:28
  • 4
    @DanMacBean, that's what FireBug and Chrome developer tools are intended for => browsing the DOM in a human readable manner. – Darin Dimitrov Oct 15 '11 at 14:29
  • +1 While using tools to view nicely formatted html, I don't see anything wrong with the generating well formatted code. I think it is a nice idea actually and believe the few whitespaces it will add will affect the performance much. – Miserable Variable Oct 15 '11 at 14:37
  • possible duplicate of [Feed rendered jsp pages through htmltidy](http://stackoverflow.com/questions/2186650/feed-rendered-jsp-pages-through-htmltidy/2187343#2187343) – BalusC Oct 15 '11 at 16:08

4 Answers4

3

Quick source viewer - Chrome Web Store

mehmetseckin
  • 3,061
  • 1
  • 31
  • 43
Sykox
  • 31
  • 1
  • I use this extension, and it works well enough when working in Next.js when I need to have the server-side HTML generated by Next.js formatted when viewing the source in the browser. It does need a control exposing in the extension settings to control tab size though. I prefer 2 but it defaults to 4. – Darren Evans Mar 15 '23 at 14:32
3

View Source is only going to show whatever the page gives it in browsers that I know of, so if the HTML isn't formatted nicely, you won't see it formatted nicely.

Your best bet would be to use the developer tools in whatever browser you are in. The HTML is normally structed nicely in there when viewing the HTML. In Chrome or Internet Explorer, F12 should open the developer tools and I think F12 opens Firebug in Firefox if you have it installed.

Note: The source/HTML elements typically viewed by developer tools isn't exactly what the page spits out. They often show dynamic elements that were added through script and/or plugins.

Doozer Blake
  • 7,677
  • 2
  • 29
  • 40
1

Altering generated html in a Java webapp is best done by a Servlet Filter. You can roll your own using whatever prettifying software you have to hand, or install one created by someone else, such as the JTidyFilter.

An advantage of this approach is that you can use the filter during development and remove it for production.

Don Roby
  • 40,677
  • 6
  • 91
  • 113
0

I know Chrome's developer tool have a "pretty print" feature for formatting javascript. I don't know about HTML, but you could look. I'm on a mobile device, so I can't.

Mohamad
  • 34,731
  • 32
  • 140
  • 219