Scribd
Upload
251 views

Chrome Developer Tools Cheat Sheet: HTML CSS

This document provides a cheat sheet for using Chrome Developer Tools. It summarizes the key features for inspecting and editing HTML, CSS, and JavaScript. The summary includes opening Developer Tools, editing the DOM and CSS inline, creating and editing CSS rules, using breakpoints and the console for JavaScript debugging, and more.

Uploaded by

Chester Allan F. Bautista
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
251 views

Chrome Developer Tools Cheat Sheet: HTML CSS

This document provides a cheat sheet for using Chrome Developer Tools. It summarizes the key features for inspecting and editing HTML, CSS, and JavaScript. The summary includes opening Developer Tools, editing the DOM and CSS inline, creating and editing CSS rules, using breakpoints and the console for JavaScript debugging, and more.

Uploaded by

Chester Allan F. Bautista
Copyright
© © All Rights Reserved
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

HTML CSS
Edit DOM attributes inline Inline CSS per-element styling
In Elements tab or styles drawer, double In Elements sidebar, double click CSS
click attribute.
• Autocompletion of keys and values
• Tab between keys and values
• Double click after closing bracket to
add new property

Create new CSS rules


Edit chunks of HTML
Click on gear icon in Elements sidebar
In Elements tab, right click an element
and select “Edit as HTML”

• Copy HTML via menu item Free form CSS editing


• Delete node via menu item In Resources sidebar, double click CSS and Ctrl - S

Versioned CSS/JS
CSS/JS changes get saved into versions
Visually inspect DOM elements
• Right click and revert to a revision.
In Elements tab, click footer button or
Ctrl - Shift - C and select desired • Right click and save back to a local
file.
element in page.

JavaScript

Console Breakpoints
Invoke with Esc or Ctrl - Alt - J or Console In Scripts tab, click in the gutter
• Get current DOM element with $0
• Conditional breakpoints
• Get all keyboard shortcuts with ? right click the gutter

• DOM breakpoints
Console API in Elements tab, right click
• copy(text) – copy text to clipboard • XHR breakpoints
• dir(elt) – show element properties in Scripts sidebar + to filter by URL

• inspect(elt) – open in Elements tab • Event listener breakpoints


In Scripts sidebar, check off type

Edit chunks of JavaScript • Exception breakpoints


In Scripts tab, break icon in footer
In Scripts tab, double click script to edit. Ctrl - S to save
• Go to line with Ctrl - L
Variable inspection
Script pretty printing When at a breakpoint, hover over variable

by @borismus and @paul_irish

You might also like