The document presents an in-depth exploration of debugging tools and design patterns, focusing on Firebug and Web Inspector, along with the evolution of JavaScript debugging practices. It covers various techniques for effective debugging, performance monitoring, and the importance of design patterns in web development. Additionally, it highlights new tools like Illuminations that enhance the debugging process by providing better context and information visualization.

1. Debugging with Firebug and Web InspectorBeyond the BasicsBy Steven Roussey

2. AgendaAbout MePast, Present, FutureDesign PatternsDebugging PatternsDebugging PerformanceExploring FurtherQ & A

3. About MeName: Steven RousseyFirebug Working GroupW3C Invited ExpertIlluminationsSites:Network54AppCenterStudybeatand others…twitter.com/srousseywww.sroussey.com

4. Past, Present, Futurealert()

5. Past, Present, Futurealert()console.log()

6. Past, Present, Futurealert()console.log()JavaScript DebuggersMS Script Debugger for IE4VenkmanFirebug!Web InspectorMS IE Developer ToolsOpera DragonflyMS Visual StudioMozilla Dev Tools

7. Past, Present, Futurealert()console.log()JavaScript DebuggersMS Script Debugger for IE4VenkmanFirebug!Web InspectorMS IE Developer ToolsOpera DragonflyMS Visual StudioMozilla Dev ToolsTools for Design PatternsIlluminations for Developers

8. Past, Present, FutureHTML vs. HTML5

9. Past, Present, FutureAn end to progressive enhancementMoving business logic to the clientMobile is accelerating the trend

10. Past, Present, FutureAn end to progressive enhancementAbstractions over DOM-nessTop-Down over Bottom-UpMoving business logic to the clientMobile is accelerating the trend

11. Past, Present, FutureAn end to progressive enhancementAbstractions over DOM-nessTop-Down over Bottom-UpMoving business logic to the clientlocalStorage needs processing, templating, syncing with server / cloudMobile is accelerating the trend

12. Past, Present, FutureAn end to progressive enhancementAbstractions over DOM-nessTop-Down over Bottom-UpMoving business logic to the clientlocalStorage needs processing, templating, syncing with server / cloudMobile is accelerating the trendOfflineLatency kills

13. Past, Present, FutureToolkitsjQueryMooToolsExtCoreFrameworksExtJS Desktop / Sencha TouchDojo ToolkitSproutCoreqooXdoo / Unity

14. Tooling for Design PatternsTools like Firebug show what they know:DOMJavaScript Objects, etc.CSSScript Files

15. Tooling for Design PatternsTools like Firebug show what they know:DOMJavaScript Objects, etc.CSSScript FilesBut now there is a disconnect

16. Tooling for Design PatternsExample: Inspecting EventsFirebug extension: Eventbug

17. Tooling for Design PatternsEventbug with plain JSEventbug with a toolkit

18. Tooling for Design PatternsExample: Inspecting EventsFirebug extension: EventbugFails to give useful information, everything links to the same toolkit bind handler

19. Tooling for Design PatternsDesign PatternsSingletons, Sets, Composites, etc.Model – View – ControllerModel Associations – HasMany / BelongsTo

20. Debugging PatternsInspectingLog StreamingDivide & Conquer / Binary SearchTest and Assertion Driven

21. Inspecting

22. Inspecting

23. Inspecting with FireQuery

24. Inspecting with Illuminations

25. Log StreamingWatch what is happening flow byGreat for training your intuitionGreat for spotting odd behaviorGreat for spotting errors that otherwise get caught and hidden from the user

26. Log Streamingconsole.log/info/warn/error/exception/assertUse the different levels and filter in the consoleconsole.group/groupCollapsed/groupEndBundle many togetherconsole.dir/dirxml/tableFormatted data to the consoleconsole.count() and “Log calls to …”Following the flowconsole.profile/profileEnd & time/timeEndhttp://getfirebug.com/wiki/index.php/Console_API

27. Divide & ConquerTracking the bugger downBreak half way though and checkInterateBut first…

28. Basics ReviewDon’t try and use minified version of JS libs. Use “debug” versions. (YUI/ExtJS4)Try {} catch(e){} pros and consJSLint/ IDE checkingTrailing comma in IEreturn{ some: “thing” }Yes, speling and caSe matter

29. JavaScriptComparisonsNo block level scopeFunction scopes and hoistingCareful with with{}Closures

30. JavaScriptComparisonsRarely a need for explicit true (!!)=== does not perform type conversionnull/undefined are different

31. JavaScriptNo block level scopeFunction scopes and hoistingCareful with with(){}

32. JavaScriptClosuresVariable bindingVariable shadowingClosure scopes

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

34. JavaScriptvar 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. JavaScriptvarLIB = {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. JavaScriptvarLIB = {helper:function(){console.log("helped");}};function test() { with (LIB){ function helper(){console.log("good");}; // ... helper(); }}test(); // helped LIB.helper(); // helped, not good…

37. Breakpointsdebugger;// unique comment to search forAfter an error, from the consoleWith conditionsDisabled breakpointsBreak-On-Next (BON)ErrorXHRCookieDOM Mutation

38. OK, I’m Broken, Now What?WatchesScope and closure chains are viewableCall StacksFunction chains are viewableCommand line in the current scope

39. IlluminationsI'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. IlluminationsObject 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. IlluminationsElement 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. IlluminationsContextual 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. IlluminationsIllumination 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 PerformanceInside your codeconsole.time()console.profile()Web Inspector AuditsTools for ProductionYSlow (Firefox / Firebug)PageSpeed (Firefox / Firebug)SpeedTracer (Chrome)DynaTrace (IE)

46. You Are the Best DebuggerStop, and read the codeMaybe even read the manualWalk away (or sleep on it)Get a second pair of eyesSome 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 Furtherhttp://getfirebug.com/http://code.google.com/chrome/devtools/http://getfirebug.com/downloads#extensionshttp://code.google.com/webtoolkit/speedtracer/http://www.illuminations-for-developers.com/

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