Web Developer Tools in Modern Browsers

Transcript

1. 1.

   Web Developer Tools in Modern Browsers othree @ WebConf

2. 2.

   Past

3. 3.

   None
4. 4.

   None
5. 5.

   How Developers Debugging

6. 6.

   None
7. 7.

   None
8. 8.

   Problems • Only script debugging • Error messages are not

   useful
9. 9.

   The Most Powerful Debugging Function

10. 10.

    alert

11. 11.

    Present

12. 12.

    Text

13. 13.

    None
14. 14.

    None
15. 15.

    None
16. 16.

    None
17. 17.

    None
18. 18.

    Rich Internet Applications

19. 19.

    None
20. 20.

    2004

21. 21.

    None
22. 22.

    Take Back the Web

23. 23.

    2007

24. 24.

    None
25. 25.

    Firebug • First modern browser developer tool • by Joe

    Hewitt
26. 26.

    None
27. 27.

    None
28. 28.

    Modern Dev Tool Functions • Inspect DOM Tree • Style

    Lookup • Useful Debug Message • Monitor Network • Performance Tuning • ...
29. 29.

    Modern Dev Tools • Firebug for Firefox • Developer Tool

    for Chrome/Safari • Dragonfly for Opera
30. 30.

    None
31. 31.

    None
32. 32.

    None
33. 33.

    Demo Time

34. 34.

    One More Thing

35. 35.

    Firebug Lite

36. 36.

    Firebug Lite • Browser independent • Supports all major browser

    including IE
37. 37.

    Take a Look

38. 38.

    Further Reading

39. 39.

    Things I didn’t know about the WebKit inspector

40. 40.

    Wait, DevTools could do THAT?

41. 41.

    Improving Web App Performance With the Chrome DevTools Timeline and

    Profiles
42. 42.

    Using the Heap Profiler in Chrome Dev Tools

43. 43.

    Secrets of the Chrome Developer Tools

44. 44.

    My Workflow: Never having to leave DevTools

45. 45.

    Documents • Console API • Command Line API • Chrome

    Developer Tools • Opera Dragonfly Documentation
46. 46.

    Questions?

47. 47.

    me • othree • Twitter, Plurk, flickr, Github, PTT •

    Blog: https://blog.othree.net • F2E at HTC
48. 48.

    Thanks