O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Beyond the Basics, Debugging with Firebug and Web Inspector

4.193 visualizações

Publicada em

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

  • Seja o primeiro a comentar

Beyond the Basics, Debugging with Firebug and Web Inspector

  1. 1. Debugging with Firebug and Web Inspector<br />Beyond the Basics<br />By Steven Roussey<br />
  2. 2. Agenda<br />About Me<br />Past, Present, Future<br />Design Patterns<br />Debugging Patterns<br />Debugging Performance<br />Exploring Further<br />Q & A<br />
  3. 3. About Me<br />Name: Steven Roussey<br />Firebug Working Group<br />W3C Invited Expert<br />Illuminations<br />Sites:<br />Network54<br />AppCenter<br />Studybeat<br />and others…<br />twitter.com/sroussey<br />www.sroussey.com<br />
  4. 4. Past, Present, Future<br />alert()<br />
  5. 5. Past, Present, Future<br />alert()<br />console.log()<br />
  6. 6. Past, Present, Future<br />alert()<br />console.log()<br />JavaScript Debuggers<br />MS Script Debugger for IE4<br />Venkman<br />Firebug!<br />Web Inspector<br />MS IE Developer Tools<br />Opera Dragonfly<br />MS Visual Studio<br />Mozilla Dev Tools<br />
  7. 7. Past, Present, Future<br />alert()<br />console.log()<br />JavaScript Debuggers<br />MS Script Debugger for IE4<br />Venkman<br />Firebug!<br />Web Inspector<br />MS IE Developer Tools<br />Opera Dragonfly<br />MS Visual Studio<br />Mozilla Dev Tools<br />Tools for Design Patterns<br />Illuminations for Developers<br />
  8. 8. Past, Present, Future<br />HTML vs. HTML5<br />
  9. 9. Past, Present, Future<br />An end to progressive enhancement<br />Moving business logic to the client<br />Mobile is accelerating the trend<br />
  10. 10. Past, Present, Future<br />An end to progressive enhancement<br />Abstractions over DOM-ness<br />Top-Down over Bottom-Up<br />Moving business logic to the client<br />Mobile is accelerating the trend<br />
  11. 11. Past, Present, Future<br />An end to progressive enhancement<br />Abstractions over DOM-ness<br />Top-Down over Bottom-Up<br />Moving business logic to the client<br />localStorage needs processing, templating, syncing with server / cloud<br />Mobile is accelerating the trend<br />
  12. 12. Past, Present, Future<br />An end to progressive enhancement<br />Abstractions over DOM-ness<br />Top-Down over Bottom-Up<br />Moving business logic to the client<br />localStorage needs processing, templating, syncing with server / cloud<br />Mobile is accelerating the trend<br />Offline<br />Latency kills<br />
  13. 13. Past, Present, Future<br />Toolkits<br />jQuery<br />MooTools<br />ExtCore<br />Frameworks<br />ExtJS Desktop / Sencha Touch<br />Dojo Toolkit<br />SproutCore<br />qooXdoo / Unity<br />
  14. 14. Tooling for Design Patterns<br />Tools like Firebug show what they know:<br />DOM<br />JavaScript Objects, etc.<br />CSS<br />Script Files<br />
  15. 15. Tooling for Design Patterns<br />Tools like Firebug show what they know:<br />DOM<br />JavaScript Objects, etc.<br />CSS<br />Script Files<br />But now there is a disconnect<br />
  16. 16. Tooling for Design Patterns<br />Example: Inspecting Events<br />Firebug extension: Eventbug<br />
  17. 17. Tooling for Design Patterns<br />Eventbug with plain JS<br />Eventbug with a toolkit<br />
  18. 18. Tooling for Design Patterns<br />Example: Inspecting Events<br />Firebug extension: Eventbug<br />Fails to give useful information, everything links to the same toolkit bind handler<br />
  19. 19. Tooling for Design Patterns<br />Design Patterns<br />Singletons, Sets, Composites, etc.<br />Model – View – Controller<br />Model Associations – HasMany / BelongsTo<br />
  20. 20. Debugging Patterns<br />Inspecting<br />Log Streaming<br />Divide & Conquer / Binary Search<br />Test and Assertion Driven<br />
  21. 21. Inspecting<br />
  22. 22. Inspecting<br />
  23. 23. Inspecting with FireQuery<br />
  24. 24. Inspecting with Illuminations<br />
  25. 25. Log Streaming<br />Watch what is happening flow by<br />Great for training your intuition<br />Great for spotting odd behavior<br />Great for spotting errors that otherwise get caught and hidden from the user<br />
  26. 26. Log Streaming<br />console.log/info/warn/error/exception/assert<br />Use the different levels and filter in the console<br />console.group/groupCollapsed/groupEnd<br />Bundle many together<br />console.dir/dirxml/table<br />Formatted data to the console<br />console.count() and “Log calls to …”<br />Following the flow<br />console.profile/profileEnd & time/timeEnd<br />http://getfirebug.com/wiki/index.php/Console_API<br />
  27. 27. Divide & Conquer<br />Tracking the bugger down<br />Break half way though and check<br />Interate<br />But first…<br />
  28. 28. Basics Review<br />Don’t try and use minified version of JS libs. Use “debug” versions. (YUI/ExtJS4)<br />Try {} catch(e){} pros and cons<br />JSLint/ IDE checking<br />Trailing comma in IE<br />return{ some: “thing” }<br />Yes, speling and caSe matter<br />
  29. 29. JavaScript<br />Comparisons<br />No block level scope<br />Function scopes and hoisting<br />Careful with with{}<br />Closures<br />
  30. 30. JavaScript<br />Comparisons<br />Rarely a need for explicit true (!!)<br />=== does not perform type conversion<br />null/undefined are different<br />
  31. 31. JavaScript<br />No block level scope<br />Function scopes and hoisting<br />Careful with with(){}<br />
  32. 32. JavaScript<br />Closures<br />Variable binding<br />Variable shadowing<br />Closure scopes<br />
  33. 33. JavaScript<br />var links = document.getElementByTagName(‘a’),<br />len = links.length;<br />for (var i = 0; i < len; i++) {<br /> links[i].onclick= function() {<br /> alert(i+1);<br /> };<br />}<br />
  34. 34. JavaScript<br />var links = document.getElementsByTagName('a'),<br />len = links.length;<br />for (var i = 0; i < len; i++) {<br /> links[i].onclick = (function(i) {<br />return function() {<br /> alert(i);<br /> return false;<br /> };<br /> })(i);<br />}<br />
  35. 35. JavaScript<br />varLIB = {<br />helper:function(){console.log("helped");}<br />};<br />function test() {<br /> with (LIB){<br />var helper = 5;<br /> console.log(helper); <br /> }<br />}<br />test(); // 5 <br />console.log(LIB.helper); // also 5, not a function<br />
  36. 36. JavaScript<br />varLIB = {<br />helper:function(){console.log("helped");}<br />};<br />function test() {<br /> with (LIB){<br /> function helper(){console.log("good");};<br /> // ...<br /> helper(); <br /> }<br />}<br />test(); // helped <br />LIB.helper(); // helped, not good…<br />
  37. 37. Breakpoints<br />debugger;<br />// unique comment to search for<br />After an error, from the console<br />With conditions<br />Disabled breakpoints<br />Break-On-Next (BON)<br />Error<br />XHR<br />Cookie<br />DOM Mutation<br />
  38. 38. OK, I’m Broken, Now What?<br />Watches<br />Scope and closure chains are viewable<br />Call Stacks<br />Function chains are viewable<br />Command line in the current scope<br />
  39. 39. Illuminations<br />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.<br />—Johnathan Nightingale, Director of Firefox Development, Mozilla<br />
  40. 40. Illuminations<br />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:<br />
  41. 41. Illuminations<br />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!<br />
  42. 42. Illuminations<br />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.<br />
  43. 43. Illuminations<br />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:<br />
  44. 44. Illuminations<br />
  45. 45. Debugging Performance<br />Inside your code<br />console.time()<br />console.profile()<br />Web Inspector Audits<br />Tools for Production<br />YSlow (Firefox / Firebug)<br />PageSpeed (Firefox / Firebug)<br />SpeedTracer (Chrome)<br />DynaTrace (IE)<br />
  46. 46. You Are the Best Debugger<br />Stop, and read the code<br />Maybe even read the manual<br />Walk away (or sleep on it)<br />Get a second pair of eyes<br />Some of the simplest things can be spotted by someone that has not been staring at for the last eight hours.<br />Create a test case of a problem and explanation – many times this process is enough<br />
  47. 47. Exploring Further<br />http://getfirebug.com/<br />http://code.google.com/chrome/devtools/<br />http://getfirebug.com/downloads#extensions<br />http://code.google.com/webtoolkit/speedtracer/<br />http://www.illuminations-for-developers.com/<br />
  48. 48. Question & Answer<br />http://www.sroussey.com/<br />http://www.twitter.com/sroussey<br />http://www.illuminations-for-developers.com/<br />

×