Web Developer Tools for ICOS 2013
2 likes1,670 views
This document discusses the history and modern capabilities of web development tools. It describes how early debugging was limited to script debugging with unclear errors. It then explains how tools like Firebug revolutionized development by allowing inspection of DOM trees, stylesheets, network requests, and performance profiling. Modern tools like the Developer Tools in Chrome and Safari as well as Dragonfly in Opera provide similar powerful debugging functions without browser limitations.
Web Developer Tools for ICOS 2013
- 1. 現代網⾴頁開發⼯工具 othree @ ICOS 2013
- 2. me • othree • Twitter, Plurk, flickr, Github • Blog: https://blog.othree.net • F2E at HTC
- 3. 過去
- 9. Problems • 只有 script 除錯功能 • 錯誤訊息難以辨識
- 10. The Most Powerful Debugging Function
- 11. alert
- 13. 現在
- 14. Text
- 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