Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Javascript Debugging


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 (• 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 (• YUI Logger (• Firebug Lite (
  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-– Find the bugs in the examples!
  21. 21. Further Reading• /•• explorer••