CHROME DEV TOOLS

SETTINGS

BEHIND THE FLAG

THE MAIN TABS

ELEMENTS

GENERATED HTML

DEBUGGING JAVASCRIPT

EDITING AND DEBUGGING CSS

RWD, DEVICE AND NETWORK

SCREENSHOT

enable device frame

LIVE EDITING

on any page

document.documentElement.contentEditable="true"

LIVE EDITING

SETTING UP A LOCAL ENVIRONMENT

TIMELINE & NETWORK

FINDING JANK

APPLICATION

CACHE-CONTROL

AUDITS

PERFORMANCE AND ACCESSIBILITY

ANIMATIONS

DEBUG AND ANALYSIS

EXTERNAL DEVICES

ANDROID ONLY

COPYING objects

any object

> Save as global variable (Right click)
> // temp1
> copy(temp1)

Chrome Dev Tools

By Mads Stoumann

Chrome Dev Tools

Intro to front-enders about Chrome Dev Tools

  • 48