The document discusses various tools for debugging Javascript, including browser-specific tools like the Developer Tools in Chrome and Firebug for Firefox, as well as general tools like alerts and console.log(). It also covers common pitfalls when debugging like suppressed errors and trailing commas in IE, and how to use a debugger to set breakpoints, step through code, and inspect variables.

1. Javascript Debugging

2. Agenda
• Browser-Specific Tools
o IE 6/7: MS Script Debugger, MS Script Editor, MS Visual Studio (also IE Dev Toolbar)
o IE 8: Developer Tools
o Safari: Web Inspector
o Chrome: Dev Tools (JS Console, DOM Inspector)
o FireFox: Firebug
• General Tools
o YUI Logger
o Alerts, prompts, and console.log()
o JSLint
• Common Pitfalls
o Suppressed errors
o Trailing commas in IE
o Conflicting XHR requests
• Using a Debugger
o Step In/Over/Out
o Breakpoints (also Conditional Breakpoints and Console)
o Watch expressions
o NET panel for XHR requests
o Call stack

3. Browser-specific Tools
From "worst" to "best" (IMHO)....
• IE6/7: MS Script Debugger/MS Script Editor/MS Visual
Studio (also IE Dev Toolbar)
• IE8: Developer Tools (can run in IE7 mode)
• Safari: Web Inspector
• Chrome: Developer Tools + JS Console
• Firefox: Firebug

4. Internet Explorer 6 & 7
• Need to enable JS errors in browser settings ("Display a
notification for every script error")
• MS Script Debugger/MS Script Editor/MS Visual Studio
o Separate downloads
o Separate app, runs alongside the browser
o Complicated to set-up
o Clunky & difficult to use
• IE Dev Toolbar (But no JS debugger!)
• No easy way to disable JS on the fly

5. Internet Explorer 6 & 7

6. Internet Explorer 6 & 7

7. IE8: Developer Tools
• Built into browser
• Enable via Tools » Developer Tools
• DOM inspector & JS debugger/profiler
• IE7 mode
• Can disable JS on the fly

8. IE8: Developer Tools

9. Safari: Web Inspector
• Built into browser
• Enable via Preferences » Advanced » Show Develop Menu
• DOM Inspector + JS Debugger + Network + Console
• Can disable JS under Develop menu

10. Safari: Web Inspector

11. Chrome: Developer Tools
• Built into browser
• Enable via View » Developer » Developer Tools
• DOM Inspector + Network + JS Debugger + Console
• Latest versions can pretty-print code
• Can't disable JS on the fly

12. Chrome: Developer Tools

13. Firefox: Firebug
• Add-on browser extension (http://getfirebug.com)
• Enable via Tools » Firebug » Open Firebug
• Console + Profiler + Debugger + Network
• Can disable JS on the fly
• Currently the "best" option (Chrome Dev Tools are a close
second)

14. Firefox: Firebug

15. Firefox: Firebug

16. General Tools
• alert("something"); creates a popup dialog in most
browsers
• console.log("something"); writes to browser's JS
console if available
• JSLint (http://www.jslint.com/)
• YUI Logger (http://developer.yahoo.com/yui/logger/)
• Firebug Lite (http://getfirebug.com/firebuglite)

17. Common Gotchas
• Suppressed errors
window.onerror = function() {};
eval(/* some code here */);
• Compressed/Minified code
function a(){var d,b=1,c=2;d=b+c;}
• Trailing commas in IE
var config = {
foo: "a thing",
bar: "another thing",
baz: "yet another thing",
}
• Conflicting AJAX requests -- use Network panel to inspect

18. Using a Debugger
– Where is the broken code? (Browser errors or console)
– Set breakpoint(s)
– Re-run script (reload or click)
– Step through code (in/over/out) & inspect variables
– Test using console
– Fix code & repeat

19. Firefox: Firebug

20. Now You Try It!
1. Add Firebug to Firefox
– Browse to http://scream-
ld.linkedin.biz/~jgourgou/jsdebug/excercises/
– Find the bugs in the examples!

21. Further Reading
• http://www.alistapart.com/articles/advanced-debugging-with-jav
/
• http://blogs.msdn.com/b/ie/archive/2004/10/26/247912.aspx
• http://www.jonathanboutelle.com/how-to-debug-javascript-in-in
explorer
• https://developer.mozilla.org/en/Debugging_JavaScript
• http://www.webmonkey.com/2010/02/javascript_debugging_for