Web Developer Tools for ICOS 2013

現代網⾴頁開發⼯工具

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

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/