Scribd
Upload
127 views1 page

Chrome Developer Tools Cheat Sheet: HTML CSS

The document provides a cheat sheet for using Chrome Developer Tools: It lists ways to edit HTML, CSS, and JavaScript using the various tabs in Developer Tools, including editing DOM attributes inline, creating and editing CSS rules, free-form CSS editing with versioning, breaking on breakpoints, and inspecting variables at breakpoints. It also describes using the console to inspect elements and run commands, and debugging with features like conditional breakpoints, DOM breakpoints, and event listener breakpoints.

Uploaded by

Kipp Cryer
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
127 views1 page

Chrome Developer Tools Cheat Sheet: HTML CSS

The document provides a cheat sheet for using Chrome Developer Tools: It lists ways to edit HTML, CSS, and JavaScript using the various tabs in Developer Tools, including editing DOM attributes inline, creating and editing CSS rules, free-form CSS editing with versioning, breaking on breakpoints, and inspecting variables at breakpoints. It also describes using the console to inspect elements and run commands, and debugging with features like conditional breakpoints, DOM breakpoints, and event listener breakpoints.

Uploaded by

Kipp Cryer
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

Chrome Developer Tools Cheat Sheet

Open with Ctrl - Alt - I or right click and inspect element. View keyboard shortcuts with ?

HTML
Edit DOM attributes inline
In Elements tab or styles drawer, double click attribute.

CSS
Inline CSS per-element styling
In Elements sidebar, double click CSS Autocompletion of keys and values Tab between keys and values Double click after closing bracket to add new property

Edit chunks of HTML


In Elements tab, right click an element and select Edit as HTML Copy HTML via menu item Delete node via menu item

Create new CSS rules


Click on gear icon in Elements sidebar

Free form CSS editing


In Resources sidebar, double click CSS and Ctrl - S

Versioned CSS/JS
CSS/JS changes get saved into versions

Visually inspect DOM elements


In Elements tab, click footer button or Ctrl - Shift - C and select desired element in page.

Right click and revert to a revision. Right click and save back to a local le.

JavaScript
Console
Invoke with Esc or Ctrl - Alt - J or Console Get current DOM element with $0

Breakpoints
In Scripts tab, click in the gutter

Conditional breakpoints
right click the gutter

Console API
copy(text) copy text to clipboard dir(elt) show element properties inspect(elt) open in Elements tab

DOM breakpoints
in Elements tab, right click

XHR breakpoints
in Scripts sidebar + to lter by URL

Event listener breakpoints


In Scripts sidebar, check off type

Edit chunks of JavaScript


In Scripts tab, double click script to edit. Ctrl - S to save Go to line with Ctrl - L

Exception breakpoints
In Scripts tab, break icon in footer

Script pretty printing

Variable inspection
When at a breakpoint, hover over variable

by @borismus and @paul_irish

You might also like