Micah Wood @wpscholar https://wpscholar.com/wcraleigh2016

Using Chrome Developer Tools

Open from Menu

Open by Right Clicking

Elements Panel

Navigating the DOM

Searching the DOM

Editing the DOM

Toggle Classes

Add / Edit Attributes

Edit Elements

Delete Elements

Locating Styles

Filter Styles

Computed Styles

Editing Styles

Toggle Specific Styles

Edit Units

Create New Style Rules

Toggle Element State

View Rendered Fonts

Network Panel

Waterfall View

Table View

Filtering Table View

Detail View

Disable Cache

Network Throttling

Replay AJAX Requests

Device Toolbar

Responsive Breakpoints

Emulate Devices

Sources Panel

Find and Open Files

Pretty Print

Breakpoints

Persisting Changes

Edit Source Files in the Browser

Stage Persisted Changes

Snippets

Console

document.querySelector()

document.querySelectorAll()

$0, $1, $2, $3, $4

inspect()

Application Panel

Clear Cookies

View Local Storage

More Tools

Emulate Print Media

User Agent Spoofing

Search Everything

Settings

Resources

• Chrome Snippets - http://bgrins.github.io/devtools-snippets/

• Chrome Tips - https://wpscholar.com/?s=chrome

• 25 Tips and Tricks - https://www.keycdn.com/blog/chrome-devtools/

• Chrome Command Line API - http://developer.telerik.com/content-types/tutorials/easier-web-application-debugging-command-line-api/

Micah Wood @wpscholar https://wpscholar.com/wcraleigh2016

Using Chrome Developer Tools