1. 現代網⾴頁開發⼯工具
othree @ ICOS 2013

2. me
• othree
• Twitter, Plurk, flickr, Github
• Blog: https://blog.othree.net
• F2E at HTC

3. 過去

6. How Developers
Debugging

9. Problems
• 只有 script 除錯功能
• 錯誤訊息難以辨識

10. The Most Powerful
Debugging Function

11. alert

13. 現在

14. Text

20. Rich Internet
Applications

21. HTML5/Web APIs
WebSockets,Web Storage,
IndexedDB, Server-Sent Event...

22. How?

23. 2004

25. Take Back the Web

26. 2007

28. Firebug
• 第⼀一個現代的網⾴頁開發⼯工具
• by Joe Hewitt

31. Modern Dev Tool
Functions
• 查看 DOM Tree / 樣式
• 有意義的錯誤訊息
• 監看網路連線
• 效能調校
• Browser Object Model 存取

32. Modern Dev Tools
• Firebug for Firefox
• Developer Tool for Chrome/Safari
• Dragonfly for Opera

36. Demo Time

37. One More Thing

38. Firebug Lite

39. Firebug Lite
• Bookmarklet
• 不限定瀏覽器
• DOM 檢視器
• console

40. Further Reading

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

42. Using the Heap Profiler in Chrome Dev Tools

43. My Workflow: Never having to leave DevTools

44. Documents
• Console API
• Command Line API
• Chrome Developer Tools
• Opera Dragonfly Documentation

45. Questions?
http://www.flickr.com/photos/roman/5610736/