DevTools

1,057 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
1,057
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Follow me on twitter.
  • DevTools

    1. 1. The Future of Web App Development Tools Ross Boucher Co-Founder, 280 North
    2. 3. Developer Tools
    3. 4. Four Categories <ul><ul><li>Debugging </li></ul></ul><ul><ul><li>Performance Tuning </li></ul></ul><ul><ul><li>Automated Testing </li></ul></ul><ul><ul><li>Development </li></ul></ul>
    4. 5. 1. Debugging
    5. 6. alert()
    6. 7. 1998: Netscape JavaScript Debugger
    7. 8. 2000: Microsoft Script Debugger
    8. 9. 2001: Mozilla Venkman
    9. 10. alert()
    10. 11. <ul><li>I suspect that most JavaScript developers out there are a lot like me... We want to be able to pause our scripts, look at the call stack, and step through them one line at a time, but it's easier to just use &quot; alert debugging &quot; than to fire up a big clunky debugger. </li></ul>- Joe Hewitt, 2006
    11. 12. 2006: Firebug
    12. 13. Firebug Features <ul><ul><li>JavaScript Debugger </li></ul></ul><ul><ul><li>JavaScript Profiler </li></ul></ul><ul><ul><li>Network Monitor </li></ul></ul><ul><ul><li>DOM Inspector </li></ul></ul><ul><ul><li>Logging System </li></ul></ul><ul><ul><li>Integrated right on the page </li></ul></ul>
    13. 14. 2008: WebKit Inspector
    14. 15. 2008: Opera Dragonfly
    15. 16. 2009: IE 8 Developer Tools
    16. 17. Common Functionality <ul><ul><li>JavaScript Debugger </li></ul></ul><ul><ul><li>DOM Inspector </li></ul></ul><ul><ul><li>Logging System </li></ul></ul><ul><ul><li>Network Monitor </li></ul></ul>
    17. 18. Common API
    18. 20. What do we need now?
    19. 21. Common API
    20. 23. Scriptability
    21. 25. 2. Per formance Tuning
    22. 26. JavaScript Profiling
    23. 28. function.displayName
    24. 31. Top Down vs. Bottom Up
    25. 32. aFunction F1 F2 F0 1 9 1 8 78 7 1 1
    26. 33. aFunction F1 F2 F0 1 9 1 8 78 7 1 1
    27. 34. 1 78 8 88 1 78 1 8 8 F1 F2 F0 aFunction aFunction
    28. 35. 1 78 8 88 1 78 1 8 8 F1 aFunction
    29. 36. Instrumented vs. Statistical
    30. 37. Memory Analysis
    31. 38. Understand Overall Memory Usage
    32. 39. Find Leaks
    33. 40. Visualize Garbage Collection Information
    34. 42. Browser Metrics
    35. 43. How much time is the browser spending...
    36. 44. Painting Parsing JavaScript Executing Code Downloading Files Processing Events in Worker Threads Accessing Databases Re-flowing Applying Styles Parsing HTML Parsing CSS
    37. 45. 3. Automated Testing
    38. 46. JsTestDriver
    39. 48. Test Swarm
    40. 51. AJAX Scope From Microsoft Research
    41. 52. Distributed Profiling and Debugging
    42. 53. http://www-users.itlabs.umn.edu/classes/Fall-2008/csci8101/AjaxScope.pdf Copyright Emre Kiciman & Benjamin Livshits
    43. 54. 4. Development
    44. 55. Network Monitoring
    45. 56. HTTP Client
    46. 57. Charles Proxy
    47. 58. Code Analysis
    48. 59. JSure, JavaScript Lint, JSLint
    49. 60. Objective-J Runtime Type Checking
    50. 61. Web Based IDEs
    51. 64. Wrap Up
    52. 66. Thanks. @boucher • ross@280north.com

    ×