5 common web development problems

and how to solve them with Chrome Developer Tools .

Konrad Dzwinel
Jan 10, 2013

What's DevTools?

• based on the WebKit Web Inspector
• it's a web-app
• integrated, not an add-on
• getting quite popular (dailyJS survey 2012)
  

Working with styles

• opening, positioning, inspecting, moving around the DOM, searching, undoing
• "Styles" pane
  • tabbing & auto-completion
  • modifying the value with arrows
  • add new style
  • color switch & color picker
  • toggling element state
• "Computed Styles" pane
• "Metrics" pane
• revision history, saving to disk

Command Line API

• $0

• dir()

• inspect()

• $

• Firebug Command Line API
• Firebug Console API

The Breaking Point

• DOM Breakpoints *
• Pretty printing
• XHR Breakpoints *
• List of Event Listeners
• Event Listener Breakpoints *
• Break point actions

Override

• user agent / metrics *
• geolocation *
• CSS media
• device orientation *
• touch events *

Remote debugging

• adb forward tcp:9222 localabstract:chrome_devtools_remote

• chrome.exe --remote-debugging-port=9222

• WebKit Remote Debugging Protocol
• PonyDebugger, Node Inspector
• inspecting iPhone from Chrome ? Safari's Web inspector does use the WebKit remote debugging protocol. However, Safari does not use TCP/HTTP as a transport layer, thus making it incompatible with Chrome.

Debugging Performance

• jank *
• DOM leaks *
• heap profiling *

Speeding things up

• "Audits" tab
• PageSpeed
• Network tab HAR export *

But, I don't like (or miss) the feature X !

• web app
• Skin your DevTools
• extendable with Chrome Extensions API
• easily modifiable
  

Resources

• http://paulirish.com/2011/a-re-introduction-to-the-chrome-developer-tools/
• http://www.igvita.com/slides/2012/devtools-tips-and-tricks/
• http://vimeo.com/53073654
• http://www.randomthink.net/blog/2012/11/breakpoint-actions-in-javascript/
• http://vimeo.com/53073654
• http://www.youtube.com/watch?feature=player_embedded&v=nOEw9iiopwI
• https://developers.google.com/chrome/mobile/docs/debugging
• http://smus.com/extending-chrome-developer-tools/