Here are 2 quick tips for Firefox and Google Chrome users that let you view the processed source code generated by a javascript snippet. Neither tip requires any plugins.

Situation

You need to insert a link to a video, form, etc into your site using embed code provided by another website and the embed code is only javascript.

Problem

While many sites and online services are getting better at providing standards-compliant code to paste into your site, sometimes you have to make adjustments to their code so that your pages validate.

This is easy to fix if it’s plain, viewable source code. However, if the code is just javascript that writes the (X)HTML code to the page when run (or the javascript is encrypting the code), you can’t see what to fix.

If you add the javascript code to your page, open the page in your browser and View Source, you still only see the javascript as it appears before it’s processed. That doesn’t help at all.

Firefox Solution

The fastest way to view the code created by the javascript is to use Firefox’s View Selection Source instead:

Paste the provided javascript into an XHTML page

Open the page in Firefox

Select the portion of the webpage in the general area that contains the javascript with your mouse

Right-click and choose View Selection Source

You should now see the source code that the javascript code rendered.

Then, you can copy and paste the actual code from View Selection Source and make your changes.

Google Chrome Solution

I haven’t forgotten about Google Chrome Users. The above solution doesn’t work for Chrome because it doesn’t have a View Selection Source option. We have to go about it another way.

Depending on what the javascript is designed to do and how it goes about that, you may be able to simply save the page as a file on your drive and open it in your editor.

In my test, the original javascript appeared, but below it was the code the javascript generated. You’ll probably have to do more digging around in your code, but if you copied your javascript into an otherwise blank webpage, it won’t a big deal.

No Plugins Required

The beauty of the above tips is that you don’t have to have any plugins or extensions installed in your browser to make them work.

Other Browsers

Safari and Internet Explorer don’t seem to be able to view processed javascript code without the use of plugins. At least not that I know about.

Handy hint but would not work in my Ubuntu running Chrome as the js was in an ‘onclick’. Saving the page wrote out original not rendered code…

The Web Developer toolbar on Firefox has a view rendered source option but to date I have not found the same on the Chrome Web Developer toolbar. Annoying!

nickMarch 21st, 2011

@Eoin – For Chrome, I think you should be able to get the currently generated html from within the developer tools. Using the elements tab from the Developer Tools, right click on the top html node and “Copy as HTML”. Paste the text into your favorite editor and you should see the generated html.

Bob BrownDecember 13th, 2011

Is there a way that we can get the rendered view source programatically? For example, run a perl script that grabs the rendered view source from a page so I can parse the rendered view?