Web Developer Tools in Modern Browsers

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. View Slide

21. View Slide

22. Take Back the Web
    

    View Slide

23. 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