An animated journey

Created by Umar Hansa / @umaar

About me

And some stuff I've done


Dev Tips

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

Why subscribe?

  • It's free
  • You can normally grasp enough through the gif alone
  • Keep up to date with DevTools
  • Occasional screencast videos

What's in this talk?

  • An introductory look at a few Chrome DevTools panels
  • Brand new features
  • Recap

Elements Panel

DOM Tree

Inspect Element

Edit the DOM

  • Content
  • HTML Tags
  • Attributes
  • Attribute values

Styles Pane

View and edit CSS

DOM Breakpoints

Debugging from the outside in

View element event listeners

DevTools now supports jQuery natively

In Canary

Network Panel

Record + Details View

Searching + Filtering

Sources Panel


Source Editing + Local modifications


This stuff is not perfect.


Live Edit JS

Live Edit

  • Raw text changes are injected back into V8
  • Comparisons are made between new.js and old.js
  • V8 compiles the changed JS and patches old.js with the changes

Timeline Panel

Timeline recording + paint profiler

Paint rectangles

Audits Panel

Try PageSpeed Insights and WebPageTest for now

What's new in Chrome DevTools

And just some lesser known features

- Warning -

Some features are experimental

Experimental features can change, vanish, or break

Timeline Panel

Costly Functions

Security Panel

Audits Panel

Thanks to Accessibility Developer Tools

Accessibility Audit


Promise Inspector

Network Panel


Custom Throttling Profiles

Block requests - Posted recently
Also, drag and drop panels

Elements Panel

DOM Toolbar + Layout Editor

Colour picker + Colour palettes

Easing previews

Cubic bezier editor

Animation Inspector


Get to know your browser developer tools

Invest the time + effort to become familiar with the IDE-style features

E.g. Workspaces

You'll mess up a few times before it starts working

Using a compiler for your CSS?

A transpiler for your JS?

Try Source Maps

Finishing Up

Encourage your team to adopt DevTools workflows

Product Manager

Network Filmstrip: Compare your site against competitors


DevTools can generate CSS selectors for your automated browser tests


Network recording to check page weight + large asset resources

Check caching on resource response headers


Layout Editor

Experiment with generated colour palettes to find what else works

DevTools Deep Dream

Can I help?

  • Workshops
  • Training
  • Dev Tips issue tracker

@umaar on twitter or search for "umar dev tips"