Micah Wood @wpscholar https://wpscholar.com/wcraleigh2016
Using Chrome Developer Tools
Open by Right Clicking
Navigating the DOM
Add / Edit Attributes
Toggle Specific Styles
Create New Style Rules
Toggle Element State
View Rendered Fonts
Filtering Table View
Network Throttling
Replay AJAX Requests
Responsive Breakpoints
Find and Open Files
Persisting Changes
Edit Source Files in the Browser
Stage Persisted Changes
document.querySelector()
document.querySelectorAll()
$0, $1, $2, $3, $4
Application Panel
View Local Storage
Emulate Print Media
User Agent Spoofing
Search Everything
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