Web Developer Tools for ICOS 2013

1,192 views
1,109 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,192
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
21
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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/

×