Whats new in

Chrome DevTools?
FITC Web Unleashed 2015

September 2015, Toronto.

@addyosmani
+AddyOsmani

The

90s

Browser developer tools were a

mix of bookmarklets, debuggers,
extensions & duct-tape.

2015?

Were building increasingly ambitious

web-apps with a focus on mobile,
performance and better UX.

DevTools UX

First, we realised the Console panel is

used pretty frequently. So, its now the
2nd tab, right after Elements.

Next, we wanted to give you the flexibility

to rearrange tabs (using drag-and-drop)
to suit your workflow. Now supported!

Earlier this year, we enabled syntax

highlighting in Console too. ES2015
code looks so much better there now.

Weve continued to evolve Device Mode

for mobile webapp testing. More on our
improvements here a little later.

Performance

ACCIDENTAL
SLOWNESS.

WAITING FOR THIS PAGE TO FINISH LOADING.

ANY DAY NOW.

We need a better way to frame the

performance conversation.
Something that quantifies each stage
of the user experience.

RAIL

RAIL
Response
< 100ms

RAIL
Animation
< 16.67ms

RAIL
Idle
< 50ms

RAIL
Load
< 1000ms

Lets first look at new ways to help

with Load profiling in the Network
panel.

NETWORK

Network: Filmstrip

Visualise the progression

of content being loaded

Good for optimising first

meaningful paint & priority
content being loaded

Network: Throttling

Simulate slow network

connections your users are
likely to experience on mobile.

Before you marry a person

you should first make them
use a computer with slow
Internet to see who they
really are.

Network: Custom network throttling

Settings > Throttling

Add your own custom profiles for
simulating slow connections

Network: Block requests

Unsure if requests from a URL

or domain are slowing you
down? You can block them.

Case Study: imore.com

3G: First meaningful paint

occurs ~ 9s in

3G: Web fonts start getting

applied ~ 22s in

There are a ton of Web fonts

in this page. All needed?
* used the WhatFont extension to inspect

~340 network requests.

Majority = 3rd party widgets & ads.

Whats the performance

impact of these on the page?

Whats the performance

impact of these on the page?

3G: First meaningful paint

now ~ 5.6s in
* this was a quick test and may not be indicative of the
real possible gains. Theyre likely nuanced :)

TIMELINE

Timeline: long frame times

Long frame times indicate the

presence of jank in your page.
Watch out for the red triangles.

Timeline: Filmstrip

Screenshots for visualising

content being rendered are
also now available.

Timeline: Aggregated Details

Focus on costly features by

domain, sub-domain or URL.

Super useful for attributing

slow-down to third party
scripts & embeds

Case Study: HackerNews app

* https://github.com/udacity/news-aggregator

Record a new Timeline profile

and scroll through the app.

Were seeing lots of redtriangle indications of jank as

we scroll. Hmm.

On scroll, new stories are

loaded in and a colorisation
effect is applied depending on
load state

Heres a piece of work blowing our

frame budget.
We can attribute part of it to this
colorizeAndScaleStories() function.

Digging into the source, were

querying the DOM and making style
changes to *all* our story tiles
every time we scroll. Oops.

Is this really necessary? Wouldnt a

jank-free scrolling experience be
better? Lets comment it out.

A little more work to do, but the

overall experience is way smoother
than it was before.

In the real-world, if you really

wanted to keep the effect schedule
this work more appropriately.

Timeline: Paint Profiler

Check 'Paint' for detailed paint

records. Selecting a paint record
gets you access to the Paint
Profiler for that frame.

Rotate, zoom or drag layers to

explore their content. Hovering over
a layer reveals the current position
on the page. Right-click to jump to
the node in 'Elements'.

Click the 'paint profiler' link to see

what got painted, how long it took
and see the individual paint calls.

Animation

Animation Inspection

* Note this feature is behind an experiment atm.

Enable DevTools experiments in about:flags, relaunch & then turn this on via Settings > Experiments.

Toggle animation controls from

Elements > Styles

Visualise animations by DOM node

Control playback speed

Modify the duration of individual

animations

Play back the modified animation.

Awesome for testing tweaks before
updating your source.

Cubic Bezier Editor

DOM Animation Changes

DOM & Styles

ELEMENTS

Elements: Colors & Palettes

Eye Dropper tool

Color palettes for the page, Material

Design palette & custom palette
support.

CSS
IS
AWESOME
FINDING CSS SELECTORS IN THE DOM TREE CAN BE TRICKY.

Elements: Search selectors

Elements: Event Listeners

Elements > Event Listeners allows

you to browse events registered on
any DOM node

Elements: Framework Event Listeners

View event listeners registered on

DOM nodes even if theyre using a
JavaScript framework.

Before

After

Elements: Edit HTML in Console

JavaScript

Good old console pro-tips:

$0
$$(header);
copy(document.body);
inspect(document.body.firstChild);
console.timeStamp(Please be super fast, k?);

Sources: Inline variables

Sources: Proactive Compilation

Blackboxing JS libraries

ES2015 Promises Inspector

* Note this feature is behind an experiment atm.

Enable DevTools experiments in about:flags, relaunch & then turn this on via Settings > Experiments.

Future

Experimental: Accessibility
Inspection

Experimental: Security Panel

LEARN
MORE

developers.google.com/web/tools/chrome-devtools

umaar.com/dev-tips

https://github.com/reddit/reddit-mobile/issues/247
http://www.paulirish.com/2015/advanced-performance-audits-with-devtools/

https://www.udacity.com/course/browser-rendering-optimization--ud860

http://totallytooling.tips

Thank you!

+AddyOsmani
@addyosmani