Chrome DevTools

Optimise your Web Development Workflow

Originally given at ffconf 2016, watch the talk here

You might also like these slides on browser automation in JavaScript

About Me

Current

A few things I like...

• People leave on time
• Hack days are not just fixing technical debt
• Open Source github.com/springernature
• github.com/springernature/frontend

DevTools Tips

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

123 tips posted so far! 🎊

Subscribe here:

umaar.com/dev-tips

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

CSS

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

Animation

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

• 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

Accessibility

Reasonable contrast ratio

	
Text



					

Back to Accessibility Inspection in general

Without an extension...

Accessibility Inspector

Performance

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

perf/audits

github.com/perfs/audits

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

Workspaces

❗Hello online viewer This was a live demo, this page explains the feature: umaar.com/dev-tips/123-workspaces-2-0

Sourcemaps

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

Customising

Extra

Advanced Network Filters

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

Smart Console

Proactive JavaScript Compilation

Console API

Blackboxing

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?

console.log({
    myFunction() {

    }
});
					

Device Screenshots

CSS Coverage

❗Hello online viewer This was a live demo, this page explains the feature: umaar.com/dev-tips/121-css-coverage/

Node.js debugging

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

• umaar.com/dev-tips/119-node-js-hot-code-swap

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

Thank you

Twitter: @umaar

umar.hansa@gmail.com for feedback or ideas

You might also like these slides on browser automation in JavaScript