View DOM Source Bookmarklet

There aren’t many things I don’t like about Firefox, but there is one that constantly drives me nuts: that the View Source command actually goes back to the server to get the source of the page you’re currently viewing. Why doesn’t it just display the source from cache?

I’m sure they figure it’s the same thing, but sometimes it’s not. Take the Google X debacle. I had it still up on my screen but was unable to see the source code for the page. So I quickly wrote a little bookmarklet that would do the deed for me.

You can bookmark it directly here: View DOM Source. Remember, this only works in Firefox (or other Mozilla-based browsers).

Essentially, this bookmarklet uses the XMLSerializer object to serialize the page’s DOM representation. If the page uses little or no JavaScript, this will be essentially equal to the source. If the page’s code is modified by JavaScript, it will display the code with the modifications. Hope you all find this as helpful as I have!

Comments

  1. Nicholas C. Zakas

    Comments are now fixed!

  2. Nicholas C. Zakas

    Seriously, folks, the comments are fixed.

  3. José Jeria

    Finally! :-)

  4. Jeremy Fujimoto-Johnson

    If you select some or all of what&#039s displayed in a web page (with firefox) there is an additional entry in the right click menu (View Selection Source) which does basically the same thing as the bookmarklet (without a bookmarklet).

Understanding JavaScript Promises E-book Cover

Demystify JavaScript promises with the e-book that explains not just concepts, but also real-world uses of promises.

Download the Free E-book!

The community edition of Understanding JavaScript Promises is a free download that arrives in minutes.