Web Developer Toolsin Modern Browsersothree @ WebConf
View Slide
Past
How DevelopersDebugging
Problems• Only script debugging• Error messages are not useful
The Most PowerfulDebugging Function
alert
Present
Text
Rich InternetApplications
2004
Take Back the Web
2007
Firebug• First modern browser developer tool• by Joe Hewitt
Modern Dev ToolFunctions• Inspect DOM Tree• Style Lookup• Useful Debug Message• Monitor Network• Performance Tuning• ...
Modern Dev Tools• Firebug for Firefox• Developer Tool for Chrome/Safari• Dragonfly for Opera
Demo Time
One More Thing
Firebug Lite
Firebug Lite• Browser independent• Supports all major browser including IE
Take a Look
Further Reading
Things I didn’t know about the WebKit inspector
Wait, DevTools could do THAT?
Improving Web App Performance With the ChromeDevTools Timeline and Profiles
Using the Heap Profiler in Chrome Dev Tools
Secrets of the Chrome Developer Tools
My Workflow: Never having to leave DevTools
Documents• Console API• Command Line API• Chrome Developer Tools• Opera Dragonfly Documentation
Questions?
me• othree• Twitter, Plurk, flickr, Github, PTT• Blog: https://blog.othree.net• F2E at HTC
Thanks