Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.4k
C4ce16f549c450f4759eb37f5d5d1a63?s=48 othree
1
1.9k
C4ce16f549c450f4759eb37f5d5d1a63?s=48 othree
4
230
C4ce16f549c450f4759eb37f5d5d1a63?s=48 othree
9
2.4k
C4ce16f549c450f4759eb37f5d5d1a63?s=48 othree
4
310
C4ce16f549c450f4759eb37f5d5d1a63?s=48 othree
6
3.3k
C4ce16f549c450f4759eb37f5d5d1a63?s=48 othree
2
2k

Other Decks in Programming

See All in Programming
6bf08ada80199f23061a6c22f03f0ed2?s=48 masahiro_nishimi
0
470
7437b838338581b08ca72340b05475b9?s=48 abt
1
260
E0e036f89c14b3e59640318eedf9670b?s=48 bkuhlmann
3
410
Af64bc38c0ffcfcabdf430759ee491ce?s=48 lovee
3
180
F5781435bf6dbab3cbbe791111383cf1?s=48 yannickbaron
0
100
Bd7bd8f154dbbbdc40af37d59baec53b?s=48 marushosummers
0
750
9516a84fcc28d6456d4fc87a5c8b130f?s=48 kidel
0
1.2k
655e620122d83015d6363506970a71d5?s=48 haruu_iq
0
470
D840733454bebebb5d6f0a2d95754897?s=48 aokabic
1
150
Dd5ce24e9cc88d7a491aec105e558d7e?s=48 bateleurx
10
7.9k
Ed1c6624f2db8712b418d5449f8e55bd?s=48 acquiajp1
0
150
7252086bae9203045dd7f5664fd96a07?s=48 manuelmeyer
0
120

Featured

See All Featured
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
196
17k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
195
9k
D8fc2580cfaca035f666d9e4ee79a7f7?s=48 mongodb
24
4k
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
207
38k
79acae287842acf29084005533a7fb3b?s=48 hursman
111
9.4k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
324
54k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
372
43k
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
56
9.5k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
29
1.5k
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
96
3.2k
282d599b414022eba5096510f675b6e2?s=48 chrislema
174
14k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
194
8.8k

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