Starter kit

List of things you should take into the wild:

  • latest Google Chrome stable
  • latest Google Chrome Canary release
  • chrome://flags (chrome://about)
    • experimental devtools
    • smooth scroll
    • password generation
    • stacked tabs
  • devtools settings
  • keyboard shortcuts

Settings

  • dock to right (where did it go?)
  • color format
  • paint rectangles (explained)
  • disabled cache
  • XHR logging
  • FPS meter (for bigger JS apps)

DevTools

Inspect element

  • clicking, double clicking, drag & drop, right clicking
  • always available console
  • $0 for active element
  • break on node removal - 
//set the on element change listener and try to remove the element
document.getElementById('deleteme'); elem.parentNode.removeChild(elem);

Styles and Metrics

  • color picker
  • SHIFT+{arrow}, ALT+{arrow}, SHIFT+{pgup/pgdn},
  • metrics board
  • event listeners

Resources / Scripts

  • resources mostly for cookies (not editable, use extension)
  • pretty print
  • IDE-like shortcuts (CTRL+O, CTRL+SHIFT+O)
  • CTRL+SHIFT+F for searching in all resources
  • manual breakpoints, event breakpoints, debugger, watches

Place your onClick event breakpoint and press .

document.getElementById('preview-debug').onclick = previewDebug;

function previewDebug() {
  var i=0;
  i++;
  i+=5;
  console.log(--i);
}

Network timeline

.. or to know how to read it properly

HAR reader
  • stats and filters
  • initiator, data transfered vs. content size
  • graph ordering
  • HAR exports

Chrome extensions

Audits

Performance audit
  • caching
  • stylesheet placement
  • unused CSS rules

Pagespeed

  • service provided by Google
  • caching
  • stylesheet placement
  • unused CSS rules
  • not just advising

Rails panel

  • request params
  • view render time
  • DB access time
PHP Console

PHP console

  • displaying notices, errors, exceptions and JS errors directly in Chrome
  • simple configuration
  • Wordpress and Yii extensions
PHP Console

Autosave extensions

  • Tincr
    • easy to install and use
    • not for advanced use
    • support for generic web server, Rails projects...
    • custom routing via configuration file (see docs)
  • Chrome devtools autosave (client, server)
    • needs server installed
    • advanced configuration
    • once configured, pleasure to use

Custom color scheme

color your devtools the way you like

Google for Custom.css files for DevTools and place them here:

  • Mac OSX: ~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css
  • Windows: ~/AppData/Local/Google/Chrome/User Data/Default/User StyleSheets/Custom.css
  • Ubuntu: ~/.config/chromium/Default/User StyleSheets/Custom.css

Remember: DevTools is "just" the webapp

Timeline and Profiles - maybe another time...

Remote debugging

Setting up debugger

Debugee instance

  • install android SDK tools
  • turn on USB debugging / remote debugging
  • turn on chrome with remote debugging on
  • open localhost:9222
# turn on adb port forwarding from android device
$> adb forward tcp:9222 localabstract:chrome_devtools_remote

# turn on chrome with remote debugger available
$> chrome.exe --remote-debugging-port=9222

#DEMO

<BEER TIME!>


slides available @ devtools.rootpd.com
note: try to press "p" for external links at each slide