They include references to Firefox extensions (plug-ins) that you will need or want, as well as tips for configuring Firefox, how to actually invoke the debugging procedures, and a few shortcuts to keep in mind. A number of landmines are also pointed out along the way. (Please avoid stepping on those, because it gets messy.)
Minimally Required Firefox Extensions:
- Does your installation of Firefox have a DOM Inspector option on the Tools menu? If not, reinstall Firefox with the Developer Tools option turned on (Custom | Developer Tools).
- Install the Web Developer Extension (http://chrispederick.com/work/webdeveloper/), if you have not already done so.
Optional Firefox Extensions:
- Install View Source Chart (http://jennifermadden.com/scripts/ViewRenderedSource.html)
- Install the Load Time Analyzer (by Google).
- If you are running on Windows, you might want to install IE Tab (http://ietab.mozdev.org/).
- 200+ other developer extensions are listed at https://addons.mozilla.org/search.php?cat=4.
- Make sure the page cache is disabled (Tools | Web Developer | Disable | Disable Cache)
- Numerous settings are available under Tools | Web Developer | Options | Options (not to be confused with Tools | Options).
- Sidebar | Open the DOM Inspector in the sidebar — If you do not have dual monitors, then you might prefer this.
- Note: View Source | “View Source in a tab instead of a window” does not seem to work.
- Be sure to close and reopen Firefox immediately after changing any options to make sure they stick.
Debugging HTML, CSS:
- Use Display Element Information to inspect the properties of the page (Tools | Web Developer | Use Information | Display Element Information, or Ctrl+Shift+F)
- To use the View Source Chart extension, right click on a web page and select “View Source Chart” from the context menu. (To view a frameset document, select “View Source Chart” from the View menu.)
- View the page source (right-click | This Frame | View Frame Source) and verify that the JS is actually in the page.
- To view errors via Venkman (as opposed to using the Console), set Debug | Error Trigger | Trace Errors on and set Debug | Throw Trigger | Trace Exceptions on.
- The Firefox DOM inspector (Ctrl+Shift+I) is difficult to navigate, especially with frames. The search function expects you to know the exact name of the attribute. (You cannot search for any element with any attribute that has a value of, say, “picklist”. You have to know that you are looking for an attribute called “name” as in ).
- Do not close Venkman, just minimize it. There’s a Firefox bug that prevents you from re-opening Venkman once it’s closed. If you close it accidentally, you’ll have to close all of the other Firefox windows (console, browser, script views) and then manually kill the firefox.exe daemon (via the task manager).
- The Local Variables inspector in Venkman is hard to navigate with so much of the internals showing. (The signal-to-noise ratio is upwards of 10:1.) So, in Venkman, it’s often easier to proactively set a watch (/watch-expr someExpression).
- Watch expressions are only (re)evaluated when execution stops, when the /eval command is used, and when the /watch-expr command is used.
- ESC = gives focus to the input box located below the Interactive Session.
- F12 = Step over
- F11 = Step into
- Sometimes, the page names in a dynamic web application are all HTTP parameters. In that case, every source code tab in Venkman will be labeled as just “App.” This means, you’ll have to read the code to figure out which page you are actually on (e.g. the outer frame vs. the actual page code of interest). Also, if you sit for a while and then refresh the source code, it might change to the code for the login page (because the session timed out), yet the old page will still be displayed in the browser. This can be very confusing.