Tips and Tricks for using web debuggers, and the best extensions to them. Focus on debugging JavaScript frameworks

1. Debugging with Firebug and Web Inspector Beyond the Basics By Steven Roussey

2. Agenda About Me Past, Present, Future Design Patterns Debugging Patterns Debugging Performance Exploring Further Q & A

3. About Me Name: Steven Roussey Firebug Working Group W3C Invited Expert Illuminations Sites: Network54 AppCenter Studybeat and others… twitter.com/sroussey www.sroussey.com

4. Past, Present, Future alert()

5. Past, Present, Future alert() console.log()

6. Past, Present, Future alert() console.log() JavaScript Debuggers MS Script Debugger for IE4 Venkman Firebug! Web Inspector MS IE Developer Tools Opera Dragonfly MS Visual Studio Mozilla Dev Tools

7. Past, Present, Future alert() console.log() JavaScript Debuggers MS Script Debugger for IE4 Venkman Firebug! Web Inspector MS IE Developer Tools Opera Dragonfly MS Visual Studio Mozilla Dev Tools Tools for Design Patterns Illuminations for Developers

8. Past, Present, Future HTML vs. HTML5

9. Past, Present, Future An end to progressive enhancement Moving business logic to the client Mobile is accelerating the trend

10. Past, Present, Future An end to progressive enhancement Abstractions over DOM-ness Top-Down over Bottom-Up Moving business logic to the client Mobile is accelerating the trend

11. Past, Present, Future An end to progressive enhancement Abstractions over DOM-ness Top-Down over Bottom-Up Moving business logic to the client localStorage needs processing, templating, syncing with server / cloud Mobile is accelerating the trend

12. Past, Present, Future An end to progressive enhancement Abstractions over DOM-ness Top-Down over Bottom-Up Moving business logic to the client localStorage needs processing, templating, syncing with server / cloud Mobile is accelerating the trend Offline Latency kills

13. Past, Present, Future Toolkits jQuery MooTools ExtCore Frameworks ExtJS Desktop / Sencha Touch Dojo Toolkit SproutCore qooXdoo / Unity

14. Tooling for Design Patterns Tools like Firebug show what they know: DOM JavaScript Objects, etc. CSS Script Files

15. Tooling for Design Patterns Tools like Firebug show what they know: DOM JavaScript Objects, etc. CSS Script Files But now there is a disconnect

16. Tooling for Design Patterns Example: Inspecting Events Firebug extension: Eventbug

17. Tooling for Design Patterns Eventbug with plain JS Eventbug with a toolkit

18. Tooling for Design Patterns Example: Inspecting Events Firebug extension: Eventbug Fails to give useful information, everything links to the same toolkit bind handler

19. Tooling for Design Patterns Design Patterns Singletons, Sets, Composites, etc. Model – View – Controller Model Associations – HasMany / BelongsTo

20. Debugging Patterns Inspecting Log Streaming Divide & Conquer / Binary Search Test and Assertion Driven

21. Inspecting

22. Inspecting

23. Inspecting with FireQuery

24. Inspecting with Illuminations

25. Log Streaming Watch what is happening flow by Great for training your intuition Great for spotting odd behavior Great for spotting errors that otherwise get caught and hidden from the user

26. Log Streaming console.log/info/warn/error/exception/assert Use the different levels and filter in the console console.group/groupCollapsed/groupEnd Bundle many together console.dir/dirxml/table Formatted data to the console console.count() and “Log calls to …” Following the flow console.profile/profileEnd & time/timeEnd http://getfirebug.com/wiki/index.php/Console_API

27. Divide & Conquer Tracking the bugger down Break half way though and check Interate But first…

28. Basics Review Don’t try and use minified version of JS libs. Use “debug” versions. (YUI/ExtJS4) Try {} catch(e){} pros and cons JSLint/ IDE checking Trailing comma in IE return{ some: “thing” } Yes, speling and caSe matter

29. JavaScript Comparisons No block level scope Function scopes and hoisting Careful with with{} Closures

30. JavaScript Comparisons Rarely a need for explicit true (!!) === does not perform type conversion null/undefined are different

31. JavaScript No block level scope Function scopes and hoisting Careful with with(){}

32. JavaScript Closures Variable binding Variable shadowing Closure scopes

33. JavaScript var links = document.getElementByTagName(‘a’), len = links.length; for (var i = 0; i < len; i++) { links[i].onclick= function() { alert(i+1); }; }

34. JavaScript var links = document.getElementsByTagName('a'), len = links.length; for (var i = 0; i < len; i++) { links[i].onclick = (function(i) { return function() { alert(i); return false; }; })(i); }

35. JavaScript varLIB = { helper:function(){console.log("helped");} }; function test() { with (LIB){ var helper = 5; console.log(helper); } } test(); // 5 console.log(LIB.helper); // also 5, not a function

36. JavaScript varLIB = { helper:function(){console.log("helped");} }; function test() { with (LIB){ function helper(){console.log("good");}; // ... helper(); } } test(); // helped LIB.helper(); // helped, not good…

37. Breakpoints debugger; // unique comment to search for After an error, from the console With conditions Disabled breakpoints Break-On-Next (BON) Error XHR Cookie DOM Mutation

38. OK, I’m Broken, Now What? Watches Scope and closure chains are viewable Call Stacks Function chains are viewable Command line in the current scope

39. Illuminations I'm really excited to see tools which try to help the developer piece together a coherent story about the state of their web apps, instead of just burying them in a pile of data. I think the natural next step is to follow this evolution from straight data to... interpreted data, data that anticipates the questions web developers are trying to answer. I think Illuminations really nails that when it comes to web toolkit users. —Johnathan Nightingale, Director of Firefox Development, Mozilla

40. Illuminations Object NamingIt presents the framework objects in a smarter way. It recognizes what they are and shows the whole name, like "Ext.DataView" instead of "Object" in the console and the other Firebug panels. And instead of random properties being appended, it looks for a ID-ish and a Value-ish property to show. This gives you an idea what you are looking at when you are debugging. See the example without and with Illumination:

41. Illuminations Element HighlightingNow, when you hover the mouse over a Widget like Ext.DataView, it will highlight the component on the page. In the case where the coder didn't give a descriptive itemId or name, hovering over it does the trick -- it shows you exactly what that object is all about. This Components and Elements, and it even works for Ext Composites -- it highlights all of its nodes on the page!

42. Illuminations Contextual MenuWhen you right click on an element in Firefox, Firebug adds an "Inspect Element" menu item to open Firebug and bring you to that element in the HTML panel. Illumination does the same sort of thing, but tries to find the best match: ideally some sort of UI widget, otherwise an Ext Element.

43. Illuminations Illumination PanelThere is a new panel added to Firebug called Illuminations, and when you use the contextual menu above, this is where it brings you. The Illumination panel is the place to inspect ExtJS objects: Widgets (or Views), Data (stores, records, fields), and Elements (Ext.Element and its brethren). These views show the hierarchical structure of your code:

44. Illuminations

45. Debugging Performance Inside your code console.time() console.profile() Web Inspector Audits Tools for Production YSlow (Firefox / Firebug) PageSpeed (Firefox / Firebug) SpeedTracer (Chrome) DynaTrace (IE)

46. You Are the Best Debugger Stop, and read the code Maybe even read the manual Walk away (or sleep on it) Get a second pair of eyes Some of the simplest things can be spotted by someone that has not been staring at for the last eight hours. Create a test case of a problem and explanation – many times this process is enough

47. Exploring Further http://getfirebug.com/ http://code.google.com/chrome/devtools/ http://getfirebug.com/downloads#extensions http://code.google.com/webtoolkit/speedtracer/ http://www.illuminations-for-developers.com/

48. Question & Answer http://www.sroussey.com/ http://www.twitter.com/sroussey http://www.illuminations-for-developers.com/