Web Developer Tools in Modern Browsers

C4ce16f549c450f4759eb37f5d5d1a63?s=47 othree
January 12, 2013
Programming
12
6.7k

Web Developer Tools in Modern Browsers

C4ce16f549c450f4759eb37f5d5d1a63?s=128

othree

January 12, 2013
Tweet

More Decks by othree

See All by othree
C4ce16f549c450f4759eb37f5d5d1a63?s=48 othree
3
1.4k
C4ce16f549c450f4759eb37f5d5d1a63?s=48 othree
3
2.2k
C4ce16f549c450f4759eb37f5d5d1a63?s=48 othree
1
1.3k
C4ce16f549c450f4759eb37f5d5d1a63?s=48 othree
1
1.8k
C4ce16f549c450f4759eb37f5d5d1a63?s=48 othree
4
220
C4ce16f549c450f4759eb37f5d5d1a63?s=48 othree
9
2.3k
C4ce16f549c450f4759eb37f5d5d1a63?s=48 othree
4
280
C4ce16f549c450f4759eb37f5d5d1a63?s=48 othree
6
3.3k
C4ce16f549c450f4759eb37f5d5d1a63?s=48 othree
2
1.9k

Other Decks in Programming

See All in Programming
8ec2b967e38f000eb63ae345cd7c58e6?s=48 minodriven
38
5.3k
A6ba8150ec3d9e5f2c675ef8bd652ff5?s=48 vailkako
0
180
66988ef2ff1307f07c7c8d829a6dc4fa?s=48 rosariopfernandes
2
130
Ffc500baeba9a1024e2c8273203c9f90?s=48 raulh82vlc
3
1.5k
86ee5be9683418fbfb216692fc3f27c5?s=48 macochin
0
170
70adfe7679427fa498899769e632b672?s=48 itok
1
300
59820ab78fcd471047491c8265a01daf?s=48 whs
0
160
D8a3623b157508fecdae1f8e756f362f?s=48 cmota
1
130
Bf5ee9059859ed5d855b5ff4680e63e2?s=48 track3jyo
4
770
5bd19ec9172dcb6dd3cb8033d88b262e?s=48 rom1000
1
190
1e90d209fa2f67b4f2bfd8106b93dbc6?s=48 tmizuma
12
4.1k
3931098ae486b6df619050c63e24f6cc?s=48 osyo
1
280

Featured

See All Featured
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
69
1.3k
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
15
530
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
1
360
C157b16234f1e75e8eac3698c1d4414a?s=48 ddemaree
273
31k
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
325
15k
78b475797a14c84799063c7cd073962f?s=48 holman
287
130k
7559f6cff1f5efc2d210965febd4d71c?s=48 bermonpainter
339
26k
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
219
110k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
90
13k
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
197
9.5k
A16eb159db895e3b01d3dc95767ad595?s=48 jonyablonski
6
750
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
682
180k

Transcript

  1. Web Developer Tools in Modern Browsers othree @ WebConf

  2. Past

  3. None
  4. None

  5. How Developers Debugging

  6. None
  7. None

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

    useful

  9. The Most Powerful Debugging Function

  10. alert

  11. Present

  12. Text

  13. None
  14. None
  15. None
  16. None
  17. None

  18. Rich Internet Applications

  19. None

  20. 2004

  21. None

  22. Take Back the Web

  23. 2007

  24. None

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

    Hewitt
  26. None
  27. None

  28. Modern Dev Tool Functions • Inspect DOM Tree • Style

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

  29. Modern Dev Tools • Firebug for Firefox • Developer Tool

    for Chrome/Safari • Dragonfly for Opera
  30. None
  31. None
  32. None

  33. Demo Time

  34. One More Thing

  35. Firebug Lite

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

    including IE

  37. Take a Look

  38. Further Reading

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

  40. Wait, DevTools could do THAT?

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

    Profiles

  42. Using the Heap Profiler in Chrome Dev Tools

  43. Secrets of the Chrome Developer Tools

  44. My Workflow: Never having to leave DevTools

  45. Documents • Console API • Command Line API • Chrome

    Developer Tools • Opera Dragonfly Documentation

  46. Questions?

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

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

  48. Thanks