2 Options to Show All JavaScript on Page

Sam Deering
Tweet

Here are 2 options to quickly view all the JavaScript used on a web page. Could come in handy when trying to find event handlers or specific code without searching through individual files.

  1. Option 1: Bookmarklet – A bookmarklet (drag it to your bookmarks) by Ichiro Hiroshi to see all JavaScript’s used on the web page includes script links only and inline code.
  2. Option 2: Web Developer Toolbar – A Firefox add-in that allows you to view all JavaScript loaded on page, it includes all content of include scripts and inline code.

The Bookmarklet

Just drag this button into your bookmarks then run on any page to see scripts.

The Code

javascript: (function () {
    s = document.getElementsByTagName('SCRIPT');
    tx = '';
    sr = [];
    for (i = 0; i < s.length; i) {
        with(s.item(i)) {
            t = text;
            if (t) {
                tx = t;
            } else {
                sr.push(src)
            };
        }
    };
    with(window.open()) {
        document.write('<textarea id="t">' (sr.join("n"))"nn-----nn"
        tx '<script src="http://jsbeautifier.org/beautify.js"></script><script>with(document.getElementById("t")){value=js_beautify(value);with(style){width="99%";height="99%";borderStyle="none";}};</script>');
        document.close();
    }
})();

Firefox Developer Toolbar

Install the Firefox Add-on.

webdeveloper-toolbar

Visit any web page, select from the toolbar > Information > View JavaScript.

firefox-show-javascript

It shows you all JavaScript used on the page including the content within the included .js files too.

firefox-show-javascript2

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Morrison

    THIS for (i = 0; i < s.length; i) IS SUPPOSED TO BE THIS for (i = 0; i < s.length; i++)
    THIS document.write('’ (sr.join(“n”))”nn—–nn” tx’ SHOULD BE document.write(”+sr.join(“n”)+’nn—–nn’+tx+’