Introduction to Javascript Debugging on various web browsers

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