How to View the Generated HTML Output from JavaScript Web Widgets

One of the best things to come from social networking and the so called Web 2.0 is the Web widget. Web widgets allow users to easily drop JavaScript code into their own website and instantly add content and features. Most Web widgets contain CSS ids and classes that allow the webmaster to alter the look-and-feel of the widget. However, most Web widget documentation is lacking or missing, and Web browsers won’t display the HTML output in the page source. Fortunately, there’s an easy way to view the HTML code created by these widgets.

Using Firefox and the Web Developer Add-on, you can view the outputted HTML generated from the JavaScript by clicking on View Source and then View Generated Source on the Web Developer toolbar.

When you click on that option, a new window will appear with the generated HTML source code. Find the code that the JavaScript generated and then make changes to your stylesheet accordingly.