Javascript Debugging

1,158
-1

Published on

Introduction to Javascript Debugging on various web browsers

Published in: Technology, Design

Javascript Debugging

  1. 1. Javascript Debugging
  2. 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. 3. Browser-specific ToolsFrom "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. 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. 5. Internet Explorer 6 & 7
  6. 6. Internet Explorer 6 & 7
  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. 8. IE8: Developer Tools
  9. 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. 10. Safari: Web Inspector
  11. 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• Cant disable JS on the fly
  12. 12. Chrome: Developer Tools
  13. 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. 14. Firefox: Firebug
  15. 15. Firefox: Firebug
  16. 16. General Tools• alert("something"); creates a popup dialog in most browsers• console.log("something"); writes to browsers JS console if available• JSLint (http://www.jslint.com/)• YUI Logger (http://developer.yahoo.com/yui/logger/)• Firebug Lite (http://getfirebug.com/firebuglite)
  17. 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. 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. 19. Firefox: Firebug
  20. 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. 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

×