Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
現代網⾴頁開發⼯工具othree @ ICOS 2013
me• othree• Twitter, Plurk, flickr, Github• Blog: https://blog.othree.net• F2E at HTC
過去
How DevelopersDebugging
Problems• 只有 script 除錯功能• 錯誤訊息難以辨識
The Most PowerfulDebugging Function
alert
現在
Text
Rich InternetApplications
HTML5/Web APIsWebSockets,Web Storage,IndexedDB, Server-Sent Event...
How?
2004
Take Back the Web
2007
Firebug• 第⼀一個現代的網⾴頁開發⼯工具• by Joe Hewitt
Modern Dev ToolFunctions• 查看 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
Firebug Lite• Bookmarklet• 不限定瀏覽器• DOM 檢視器• console
Further Reading
Improving Web App Performance With the ChromeDevTools 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/
Web Developer Tools for ICOS 2013
Web Developer Tools for ICOS 2013
Web Developer Tools for ICOS 2013
Web Developer Tools for ICOS 2013
Web Developer Tools for ICOS 2013
Web Developer Tools for ICOS 2013
Web Developer Tools for ICOS 2013
Web Developer Tools for ICOS 2013
Web Developer Tools for ICOS 2013
Web Developer Tools for ICOS 2013
Web Developer Tools for ICOS 2013
Web Developer Tools for ICOS 2013
Web Developer Tools for ICOS 2013
Web Developer Tools for ICOS 2013
Web Developer Tools for ICOS 2013
Web Developer Tools for ICOS 2013
Web Developer Tools for ICOS 2013
Upcoming SlideShare
Loading in …5
×

Web Developer Tools for ICOS 2013

1,470 views

Published on

Published in: Technology
  • Be the first to comment

Web Developer Tools for ICOS 2013

  1. 1. 現代網⾴頁開發⼯工具othree @ ICOS 2013
  2. 2. me• othree• Twitter, Plurk, flickr, Github• Blog: https://blog.othree.net• F2E at HTC
  3. 3. 過去
  4. 4. How DevelopersDebugging
  5. 5. Problems• 只有 script 除錯功能• 錯誤訊息難以辨識
  6. 6. The Most PowerfulDebugging Function
  7. 7. alert
  8. 8. 現在
  9. 9. Text
  10. 10. Rich InternetApplications
  11. 11. HTML5/Web APIsWebSockets,Web Storage,IndexedDB, Server-Sent Event...
  12. 12. How?
  13. 13. 2004
  14. 14. Take Back the Web
  15. 15. 2007
  16. 16. Firebug• 第⼀一個現代的網⾴頁開發⼯工具• by Joe Hewitt
  17. 17. Modern Dev ToolFunctions• 查看 DOM Tree / 樣式• 有意義的錯誤訊息• 監看網路連線• 效能調校• Browser Object Model 存取
  18. 18. Modern Dev Tools• Firebug for Firefox• Developer Tool for Chrome/Safari• Dragonfly for Opera
  19. 19. Demo Time
  20. 20. One More Thing
  21. 21. Firebug Lite
  22. 22. Firebug Lite• Bookmarklet• 不限定瀏覽器• DOM 檢視器• console
  23. 23. Further Reading
  24. 24. Improving Web App Performance With the ChromeDevTools Timeline and Profiles
  25. 25. Using the Heap Profiler in Chrome Dev Tools
  26. 26. My Workflow: Never having to leave DevTools
  27. 27. Documents• Console API• Command Line API• Chrome Developer Tools• Opera Dragonfly Documentation
  28. 28. Questions?http://www.flickr.com/photos/roman/5610736/

×