Chrome DevTools

Created by Dzmitry Varabei

Google Chrome Canary

DevTools internal design

  1. git clone https://chromium.googlesource.com/chromium/blink.git
  2. Set up a local web server that would serve files from WebKit/Source/WebCore/inspector on some port (8090)
  3. --remote-debugging-port=9222 --user-data-dir=blink/chromeServerProfile --remote-debugging-frontend="http://localhost:8090/front_end/inspector.html"
  4. --user-data-dir=/work/chromeClientProfile

Dock to right

Useful keyboard shortcuts

  • Inspect element / CTRL + SHIFT + C
  • Open console / CTRL + SHIFT + J
  • Go to file / CTRL + O
  • Go to method / CTRL + SHIFT + O
  • Search across all files / CTRL + SHIFT + F
  • Settings / F1
  • Console / ESC

The Sources Panel

  • Pretty print
  • Pause on exception
  • Clear all breakpoints
  • Source Maps

Console commands

  • Clear console / CTRL + L
  • $0
  • copy($0.innerHTML)
  • console.assert

Rendering profiling

  • Show paint rectangles
  • Show composited layer borders
  • Show FPS meter

demo page #1

demo page #2

Rendering profiling

  • Continuous page repainting

http://trentwalton.com/examples/CSS3_Speed_Test/css3.html

Rendering profiling

  • Timeline - Frames

Demo

Memory profiling

Demo #1

Demo #2

Overrides

http://en.wikipedia.org/wiki/Google_Chrome

Workspaces

Demo

Remote Debugging

http://crbug.com

Resources

Questions?