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.3k
C4ce16f549c450f4759eb37f5d5d1a63?s=48 othree
1
1.3k
C4ce16f549c450f4759eb37f5d5d1a63?s=48 othree
1
1.8k
C4ce16f549c450f4759eb37f5d5d1a63?s=48 othree
4
230
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
1623dd1adf096ba35ba33727d933e14c?s=48 nbkouhou
9
4.5k
1787c980f779b663dcd86ffcdc120044?s=48 yshrsmz
1
450
15bd11f2c2c5e3dd854153d03a102b0d?s=48 standfm
0
210
E473e5af1263c050599921981db46068?s=48 akatsukinewgrad
0
130
7eca3e06edc3c69004aaf57de51900c2?s=48 ajstarks
2
550
1623dd1adf096ba35ba33727d933e14c?s=48 nbkouhou
1
1k
405fe9ab689473f267e2cfbd95f78c75?s=48 kyonmm
2
2.1k
B793da271a45d149b52f507bca9f137c?s=48 77web
0
210
A7a5efde86e0137d32a93d8609b7a022?s=48 yumcyawiz
4
600
3742ae4f74e584aed4f41c405232c3bb?s=48 yaamaa
0
400
08e4449e96aefe61269704f8ba28bc2e?s=48 atskimura
0
290
027cabf82b6860498e5107f500bed48f?s=48 nanimonodemonai
2
1.4k

Featured

See All Featured
56c4053438af8e8b90d6f53cbb7573be?s=48 jakevdp
774
200k
Aebc2d07a50011e2a30d38435fde564a?s=48 jrom
114
7.1k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
71
3.6k
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
7
520
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
204
35k
282d599b414022eba5096510f675b6e2?s=48 chrislema
231
16k
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
13
4.2k
C7393b7ba7ec9c8890dd77d209fbb3c9?s=48 maltzj
500
36k
D67fff74178013024d833b3eec6cf27f?s=48 lynnandtonic
270
16k
D8fc2580cfaca035f666d9e4ee79a7f7?s=48 mongodb
23
3.8k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
241
21k
Ecdea9b9714877b86cee08458f085481?s=48 trallard
13
640

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