Chrome DevTools

Optimise your Web Development Workflow

Originally given at ffconf 2016, watch the talk here

Umar Hansa / @umaar

You might also like these slides on browser automation in JavaScript

About Me


Springer Nature (Company)
A few things I like...

DevTools Tips

A developer tip, in the form of a gif, in your inbox each week.

123 tips posted so far! 🎊

Subscribe here:

Or search for 'chrome dev tips'

What we will briefly look at:

  1. CSS
  2. Animation
  3. Accessibility
  4. Performance
  5. Development Workflows
  6. Customising DevTools
  7. Extra
About this talk
  • Lots of media 📺
  • Slides will eventually be online 🕸
  • Canary / some features are subject to change ❗
  • >170 slides (more than the conference talk!)

What is DevTools?

DevTools is a web app containing a set of functionality to aid with the debugging of webpages

Why DevTools?

  • An efficient development process E.g. live edit
  • Strong render performance tooling E.g. JavaScript execution during scrolling
  • A JavaScript playground environment

Panel Overview

9 slides of screenshots, skim through


Viewing and editing styles

Autocomplete for properties, and property values

Trigger Pseudo states

a:hover {
	color: blue;

Element Class Toolbar

  • Discover available CSS classes
  • Add new CSS classes
  • Toggle classes on/off

Colour picker

🔲 Shadow Editors

Style Rule Toolbar

Quick access to common CSS properties


3 Parts to this

  • Recording an animation
  • Playing an animation
  • Modifying an animation

Record an animation

Playing an animation

Modifying an animation

Modify animations by changing their timing, delay, duration, or keyframe offsets

Cubic Bezier Editor

Easings for days
  • ease-in-out
  • In Out · Sine
  • In Out · Quadratic
  • In Out · Cubic
  • Fast Out, Slow In
  • In Out · Back
  • Fast Out, Linear In
  • ease-in
  • In · Sine
  • In · Quadratic
  • In · Cubic
  • In · Back
  • ease-out
  • Out · Sine
  • Out · Quadratic
  • Out · Cubic
  • Linear Out, Slow In
  • Out · Bac

Reasonable contrast ratio
Emoji thinking


Back to Accessibility Inspection in general

Without an extension...

Say hi to the

Accessibility Inspector


Traditionally, performance was all in the network

But there's more to it

DevTools can help with this. It has these frontend perf tools:

  • FPS Meter
  • Paint Profiler
  • Paint Flashing
  • Timeline Recorder
  • JavaScript Source Code Profiling
  • Network Timing Breakdown
  • Console Timing
  • Filmstrip recording
  • perf/audits
  • Scroll Bottlenecks
  • JavaScript Heap Snapshots
  • CPU Profiler
  • Performance Audits
  • Layers Panel
  • Layer Border Outlines

DevTools and Frontend Performance

Tools for analysing your site as it runs

FPS Meter

Need a slow page to demo this

  • Longest Wikipedia page (list of planets)
  • Box shadow on each list element
  • View it on a retina display
  • Zoom out of the page

Paint Profiler

How exactly does a browser draw your page?

Draw calls - What functions are being called by the browser

To enable:

  1. Check the 'Paint' checkbox in the Timeline panel
  2. Record!
  3. Click a paint event

Timeline Viewer

Paint Flashing

Quickly identify undesired browser paints

Line Level Profiling

DevTools supports both CPU and Network throttling

Console Timing

Timeline Marking

Network Timing Breakdown


There's more

  • Scroll Bottlenecks
  • JavaScript Heap Snapshots
  • CPU Profiler
  • Performance Audits
  • Paint Flashing
  • Layers Panel
  • Network Timing Breakdown
  • Filmstrip recording
  • Layer Border Outlines

Development Workflow


Hello online viewer This was a live demo, this page explains the feature:


Live Sass

Go to member

  • Goto Line in file
  • Goto Anything
  • Go to the start or end of a line
  • Go to start or end of a file
  • Go one word left or right
  • Go up or down a line
  • Using Carets / Multiple Cursors
  • Jump to matching brackets
  • Indentation
  • Quickly comment your code
  • Toggle Autocompletion
  • Cut/Copy/Paste/Undo/Redo
  • Increment and Decrement values
  • Cycle through editing locations
  • Source Setting

Live Edit with JavaScript

A DevTools slide referencing another DevTools slide wat



Advanced Network Filters

  • Domain
  • HasResponseHeader
  • Is
  • LargerThan
  • Method
  • MimeType
  • MixedContent
  • Scheme
  • SetCookieDomain
  • SetCookieName
  • SetCookieValue
  • StatusCode

Smart Console

Proactive JavaScript Compilation

Console API


This works with stepping in and out of code

Request Blocking

Inspecting Function Scope

const variable1 = 1;
const variable2 = 2;

// Logging an object, containing a function
// But what variables does myFunction have access to?

    myFunction() {


Device Screenshots

CSS Coverage

Hello online viewer This was a live demo, this page explains the feature:

Node.js debugging

Hello online viewer This was a live demo where I showed Node.js debugging. See:

  • CSS coverage
  • Node debugging with live edit
  • node.js function source

Thank you

Twitter: @umaar for feedback or ideas

You might also like these slides on browser automation in JavaScript