$30 off During Our Annual Pro Sale. View Details »

Web Developer Tools in Modern Browsers

othree
January 12, 2013

Web Developer Tools in Modern Browsers

othree

January 12, 2013
Tweet

More Decks by othree

Other Decks in Programming

Transcript

  1. Web Developer Tools
    in Modern Browsers
    othree @ WebConf

    View Slide

  2. Past

    View Slide

  3. View Slide

  4. View Slide

  5. How Developers
    Debugging

    View Slide

  6. View Slide

  7. View Slide

  8. Problems
    • Only script debugging
    • Error messages are not useful

    View Slide

  9. The Most Powerful
    Debugging Function

    View Slide

  10. alert

    View Slide

  11. Present

    View Slide

  12. Text

    View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. Rich Internet
    Applications

    View Slide

  19. View Slide

  20. 2004

    View Slide

  21. View Slide

  22. Take Back the Web

    View Slide

  23. 2007

    View Slide

  24. View Slide

  25. Firebug
    • First modern browser developer tool
    • by Joe Hewitt

    View Slide

  26. View Slide

  27. View Slide

  28. Modern Dev Tool
    Functions
    • Inspect DOM Tree
    • Style Lookup
    • Useful Debug Message
    • Monitor Network
    • Performance Tuning
    • ...

    View Slide

  29. Modern Dev Tools
    • Firebug for Firefox
    • Developer Tool for Chrome/Safari
    • Dragonfly for Opera

    View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. Demo Time

    View Slide

  34. One More Thing

    View Slide

  35. Firebug Lite

    View Slide

  36. Firebug Lite
    • Browser independent
    • Supports all major browser including IE

    View Slide

  37. Take a Look

    View Slide

  38. Further Reading

    View Slide

  39. Things I didn’t know about the WebKit inspector

    View Slide

  40. Wait, DevTools could do THAT?

    View Slide

  41. Improving Web App Performance With the Chrome
    DevTools Timeline and Profiles

    View Slide

  42. Using the Heap Profiler in Chrome Dev Tools

    View Slide

  43. Secrets of the Chrome Developer Tools

    View Slide

  44. My Workflow: Never having to leave DevTools

    View Slide

  45. Documents
    • Console API
    • Command Line API
    • Chrome Developer Tools
    • Opera Dragonfly Documentation

    View Slide

  46. Questions?

    View Slide

  47. me
    • othree
    • Twitter, Plurk, flickr, Github, PTT
    • Blog: https://blog.othree.net
    • F2E at HTC

    View Slide

  48. Thanks

    View Slide