Login | Register
My pages Projects Community openCollabNet


Debugging JavaScript:

Notes and Tips


Saturday, January 14, 2006

Christopher M. Balz



  1. First, be prepared to check non-JavaScript areas that could be affecting your JavaScript:

    1. Ensure you are running from a ‘http://’-type url.

    2. Ensure you are running the latest copy of your web page and all related files.

      1. Hold down the shift key while clicking the ‘refresh’ button on the web browser.

        1. <Shift>-<Cntrl>-R is the keybinding for this.

        2. This bypasses any caching mechanism that may not be working properly.

      2. If you still suspect a caching problem on Internet Explorer (and it is a very rare but known issue on Internet Explorer 6):

        1. Tools -> Internet Options -> Delete Files -> “Yes” to delete all offline content.

        2. Tools -> Internet Options -> Delete Cookies

        3. Tools -> Internet Options -> Clear History

        4. Tools -> Internet Options -> Settings -> “Check for new versions of stored pages” -> “Every time”.

        5. Click the “OK” option to exit the Internet Options dialog.

    3. If you suspect the root of the problem is with the html as it is originally downloaded by the web browser, use the view source option.

      1. Firefox: View -> Page Source

      2. Internet Explorer: View -> Source

    4. If you suspect the root of the problem is with the html as it is currently resting on the page, use the “View Rendered Source” tool (Firefox tool; Internet Explorer tool).

    5. If you suspect a problem with the css files used, take the urls used in the ‘link’ tags in the html source (“view source”, above) and paste them into the web address bar of your web browser.

      1. Examine the file for any evident problems.

    6. If you need to examine the http header request, use the free LiveHTTPHeaders tool with Firefox.

      1. It is also possible to purchase a useful tool such as HttpWatch for Internet Explorer.

  2. If you suspect a problem with the JavaScript:

    1. If you are using Firefox or Mozilla, ensure that you have the JavaScript Console open.

      1. Tools -> JavaScript Console

    2. If you are using Internet Explorer, ensure that you have the JavaScript debugging option turned on.

      1. To ensure that this setting is turned on, go to:

        1. Tools -> Internet Options -> Advanced

        2. Ensure that ‘Disable Script Debugging’ option or options are not checked.

        3. Ensure that ‘Display a notification about every script error” is checked.

      2. Sometimes, Internet Explorer loses this setting on its own, and must be reset.

    3. At first, it is usually easier to use a quick ‘alert’ statement rather than opening up a debugging session.

    4. If a debugging session is needed, choose one of the two available debuggers, Visual Studio (the free Web Developer edition is recommended) or Venkman.

    5. Visual Studio:

      1. It must be installed on your system.

      2. It only works with Internet Explorer.

      3. To open it up, either:

        1. Reload the page, if it shows a JavaScript error on it and you want to break into the debugging session at that error.

        2. Insert a breakpoint in the JavaScript code by typing in the statement “debugger;” where you want the breakpoint.

          1. Reload the page.

        3. (Used less often): Type ‘javascript: debugger;’ in the web address bar.

      4. Follow the defaults in the dialogs that appear.

      5. Make sure you can see all the running documents:

        1. Debug -> Windows -> Running Documents.

        2. View them by clicking on their name in the Running Documents pane.

      6. Make sure that you can see the ‘Watch’ and ‘Call Stack’ window panes.

        1. Select them from Debug -> Windows

      7. Make use of:

        1. Debug -> Step Into

        2. Debug -> Step Over

        3. Debug -> Step Out.

      8. To continue running the currently loaded web page with the debugger session still running:

        1. Debug -> Continue

      9. To close the debugger without closing the web browser window that is associated with the debugging session:

        1. Debug -> Detach All

        2. File -> Exit

        3. “No” on save changes

    6. Venkman

      1. It must be installed into your version of Firefox or Mozilla.

        1. Firefox is recommended over Mozilla.

          1. Both are from the same organization.

          2. Mozilla is currently deprecated for all but corporate installations where a complete, integrated browser/e-mail/etc. solution is required.

        2. On Firefox, go to Tools -> JavaScript Debugger.

        3. Click on the “Open Windows” tab near the upper left section of the window.

        4. Select the browser window that holds you’re the page that you would like to debug.

        5. Right-click and select “Set as Evaluation Object”.

        6. To get the debugger to enter your code:

          1. Reload the page, if it shows a JavaScript error on it and you want to break into the debugging session at that error.

          2. Insert a breakpoint in the JavaScript code by typing in the statement clicking in the left margin of the file as displayed in the Venkman debugger. Click where you want the breakpoint.

            1. Reload the page.

        7. The major controls and window panes are much easier to find than on Visual Studio, so there is no need to enumerate them here.


Good luck with your debugging! May it be short. ;)