Web Developer Tools in Modern Browsers

Transcript

1. Web Developer Tools in Modern Browsers othree @ WebConf
2. Past
5. How Developers Debugging
8. Problems • Only script debugging • Error messages are not useful
9. The Most Powerful Debugging Function
10. alert
11. Present
12. Text
18. Rich Internet Applications
22. Take Back the Web
25. Firebug • First modern browser developer tool • by Joe Hewitt
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
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