Your SlideShare is downloading. ×
0
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Beyond the Basics, Debugging with Firebug and Web Inspector
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Beyond the Basics, Debugging with Firebug and Web Inspector

3,609

Published on

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

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

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,609
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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/

×