Upload
-
View
1.181
Download
3
Embed Size (px)
DESCRIPTION
Citation preview
現代網⾴頁開發⼯工具
othree @ ICOS 2013
me
• othree
• Twitter, Plurk, flickr, Github
• Blog: https://blog.othree.net
• F2E at HTC
過去
How Developers Debugging
Problems
• 只有 script 除錯功能
• 錯誤訊息難以辨識
The Most Powerful Debugging Function
alert
現在
Text
Rich Internet Applications
HTML5/Web APIsWebSockets, Web Storage,
IndexedDB, Server-Sent Event...
How?
2004
Take Back the Web
2007
Firebug
• 第⼀一個現代的網⾴頁開發⼯工具• by Joe Hewitt
Modern Dev Tool Functions
• 查看 DOM Tree / 樣式
• 有意義的錯誤訊息• 監看網路連線• 效能調校• Browser Object Model 存取
Modern Dev Tools
• Firebug for Firefox
• Developer Tool for Chrome/Safari
• Dragonfly for Opera
Demo Time
One More Thing
Firebug Lite
• Bookmarklet
• 不限定瀏覽器• DOM 檢視器
• console
Further Reading
Improving Web App Performance With the Chrome DevTools Timeline and Profiles
Using the Heap Profiler in Chrome Dev Tools
My Workflow: Never having to leave DevTools
Documents
• Console API
• Command Line API
• Chrome Developer Tools
• Opera Dragonfly Documentation
Questions?
http://www.flickr.com/photos/roman/5610736/