Advertisement
Advertisement

More Related Content

Advertisement
Advertisement

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