To access the DevTools, on any web page or app in Google Chrome you can use one of these options:

Windows / Linux Mac
Open Developer Tools F12, Ctrl + Shift + I Cmd + Opt + I
Open / switch from inspect element mode and browser window Ctrl + Shift + C Cmd + Shift + C
Open Developer Tools and bring focus to the console Ctrl + Shift + J Cmd + Opt + J
Inspect the Inspector (undock first one and press) Ctrl + Shift + J Cmd + Opt + J

To open up the General Settings dialog type ? or F1 when the Developer Tools window is open. Press Esc to close the settings dialog.

All Panels

Windows / Linux Mac
Show General Settings dialog ?, F1 ?
Next panel Ctrl + ] Cmd + ]
Previous panel Ctrl + [ Cmd + [
Backward in panel History Ctrl + Alt + [ Cmd + Alt + [
Forward in panel history Ctrl + Alt + ] Cmd + Alt + ]
Jump to panel 1-9 (when enabled in General Settings) Ctrl + 1-9 Cmd + 1-9
Toggle Console / close settings dialog when open Esc Esc
Refresh the page F5, Ctrl + R Cmd + R
Refresh the page ignoring cached content Ctrl + F5, Ctrl + Shift + R Cmd + Shift + R
Text search within current file or panel Ctrl + F Cmd + F
Text search across all sources Ctrl + Shift + F Cmd + Alt + F
Search by filename (except on Timeline) Ctrl + O, Ctrl + O Cmd + O, Cmd + O
Restore default text size Ctrl + 0 Shift + 0
Zoom in Ctrl + + Shift + +
Zoom out Ctrl + - Shift + -

Elements Panel

Windows / Linux Mac
Undo change Ctrl + Z Cmd + Z
Redo change Ctrl + Y Cmd + Y, Cmd + Shift + Z
Navigate Up, Down Up, Down
Expand / collapse node Right, Left Right, Left
Expand node Single-click on tag Single-click on tag
Edit attribute Enter, Double-click on attribute Enter, Double-click on attribute
Hide element H H
Toggle edit as HTML F2

Right-clicking an element you can:

Styles Sidebar

Windows / Linux Mac
Edit rule Single-click Single-click
Insert new property Single-click on whitespace Single-click on whitespace
Go to line of style rule property declaration in source Ctrl + Click on property Cmd + Click on property
Go to line of property value declaration in source Ctrl + Click on property value Cmd + Click on property value
Go to line of style rule property declaration in source Ctrl + Click on property Cmd + Click on property
Go to line of property value declaration in source Ctrl + Click on property value Cmd + Click on property value
Cycle through the color definition value Shift + Click on color picker box Shift + Click on color picker box
View auto-complete suggestions Ctrl + Space Cmd + Space
Edit next / previous property Tab, Shift + Tab Tab, Shift + Tab
Increment / decrement value Up, Down Up, Down
Increment / decrement value by 10 Shift + Up, Shift + Down Shift + Up, Shift + Down
Increment / decrement value by 10 PgUp, PgDown PgUp, PgDown
Increment / decrement value by 100 Shift + PgUp, Shift + PgDown Shift + PgUp, Shift + PgDown
Increment / decrement value by 0.1 Alt + Up, Alt + Down Opt + Up, Opt + Down

Element Pseudostates Emulate an element's pseudo state (:active, :hover, :focus, :visited)

Adding style selectors Add new style selectors

Network Panel

Understanding the information displayed within each column

Export network data into HAR format

Sources Panel

Windows / Linux Mac
Pause / resume script execution F8, Ctrl + \ F8, Cmd + \
Step over next function call F10, Ctrl + ' F10, Cmd + '
Step into next function call F11, Ctrl + ; F11, Cmd + ;
Step out of current function Shift + F11, Ctrl + Shift + ; Shift + F11, Cmd + Shift + ;
Select next call frame Ctrl + . Opt + .
Select previous call frame Ctrl + , Opt + ,
Toggle breakpoint condition Click on line number, Ctrl + B Click on line number, Cmd + B
Edit breakpoint condition Right-click on line number Right-click on line number
Delete individual words Alt + Delete Opt + Delete
Comment a line or selected text Ctrl + / Cmd + /
Save changes to local modifications Ctrl + S Cmd + S
Go to line Ctrl + G Ctrl + G
Search by filename Ctrl + O Cmd + O
Jump to line number Ctrl + P + :<number> Cmd + P + :<number>
Jump to column Ctrl + O + :<number> + :<number> Cmd + O + :<number> + :<number>
Go to member Ctrl + Shift + O Cmd + Shift + O
Toggle console and evaluate code selected in Sources panel Ctrl + Shift + E Cmd + Shift + E
Run snippet Ctrl + Enter Cmd + Enter
Toggle comment Ctrl + / Cmd + /

Pause on Exception Button Don't pause on exceptions

Pause on All Exceptions Pause on All exceptions (including those caught within try/catch blocks)

Pause on Uncaught Exceptions Pause on uncaught exceptions (usually the one you want)

Timeline Panel

Windows / Linux Mac
Start / stop recording Ctrl + E Cmd + E
Save timeline data Ctrl + S Cmd + S
Load timeline data Ctrl + O Cmd + O

Profiles Panel

Windows / Linux Mac
Start / stop recording Ctrl + E Cmd + E

Profiling types:

Search Shortcuts

Find or navigate to specific files, methods or line numbers in an web app within the Sources panel

Windows / Linux Mac
Search scripts, stylesheets and snippets by filename Ctrl + O ⌘ + O
Text search within current file Ctrl + F ⌘ + F
Text search across all sources Ctrl + Shift + F ⌘ + Alt + F
Filter/navigate to a JavaScript function/CSS rule when viewing a file Ctrl + Shift + O ⌘ + SHift + O
Launch line number dialog when viewing a file Ctrl + K ⌘ + L
Evaluate code selected in scripts in the console Ctrl + Shift + E ⌘ + Shift + E

Console

Windows / Linux Mac
Next suggestion Tab Tab
Previous suggestion Shift + Tab Shift + Tab
Accept suggestion Right Right
Previous command / line Up Up
Next command / line Down Down
Clear Console Ctrl + L Cmd + K, Opt + L
Multi-line entry Shift + Enter Ctrl + Return
Execute Enter Return

Right-clicking on console:

Screencasting

Windows / Linux Mac
Pinch zoom in and out Alt + Scroll,Ctrl + Cick and drag with two fingers Opt + Scroll, Cmd + Cick and drag with two fingers
Inspect element tool Ctrl + Shift + C Cmd + Shift + C

Emulation

Windows / Linux Mac
Pinch zoom in and out Shift + Scroll Shift + Scroll

Console API

Command Description
console.assert(expression[, object, ...]) Tests that an expression is true. If not, it will write a message to the console and throw an exception.
console.clear() Clears the console.
console.constructor()
console.count([title]) Writes the number of times that the line of code where count was called was executed. The optional argument title will print a message in addition to the number of the count.
console.debug(object[, object, ...]) Writes a message to the console, including a hyperlink to the line where it was called.
console.dir(object) Prints an interactive listing of all properties of the object. This looks identical to the view that you would see in the DOM tab.
console.dirxml(node) Prints the XML source tree of an HTML or XML element. This looks identical to the view that you would see in the HTML tab. You can click on any node to inspect it in the HTML tab.
console.error(object[, object, ...]) Writes a message to the console with the visual "error" icon and color coding and a hyperlink to the line where it was called.
console.exception(error-object[, object, ...]) Prints an error message together with an interactive stack trace of JavaScript execution at the point where the exception occurred.
console.group(object[, object, ...]) Writes a message to the console and opens a nested block to indent all future messages sent to the console. Call console.groupEnd() to close the block.
console.groupCollapsed(object[, object, ...]) Like console.group(), but block is initially collapsed.
console.groupEnd() Closes the most recently opened block created by a call to console.group() or console.groupCollapsed().
console.hasOwnProperty()
console.info(object[, object, ...]) Writes a message to the console with the visual "info" icon and color coding and a hyperlink to the line where it was called.
console.isPrototypeOf()
console.keys() Gives you the names of all the elements of an object.
console.log(object[, object, ...]) Writes a message to the console. You may pass as many arguments as you'd like, and they will be joined together in a space-delimited line. You can use printf-like string substitution patterns as well which are:
  • String: %s - console.log('The %s is a %s', animal, cat);
  • Integer: %d, %i - console.log('Number %d plus %i', 1, 2); *integer not yet supported
  • Floating point number: %f - console.log('Floating points: %f', 1.5); *numeric formatting not yet supported
  • Hyperlink: %o - console.log('Live laugh code at $o', 'http://anti-code.com' );
  • Style formatting: %c - console.log('%c This is white text on a black background', 'color:#fff;background:#000;');
console.memory An object that returns: jsHeapSizeLimit, totalJSHeapSize, usedJSHeapSize
console.profile([title]) Turns on the JavaScript profiler. The optional argument title would contain the text to be printed in the header of the profile report.
console.profileEnd() Turns off the JavaScript profiler and prints its report.
console.profiles An array of profile objects that summarizes the data from profile().
console.propertyIsEnumerable()
console.table(data[, columns]) Allows to log provided data using tabular layout. The method takes one required parameter that represents table like data (array of arrays or list of objects).
console.time([name]) Creates a new timer under the given name. Call console.timeEnd(name) with the same name to stop the timer and print the time elapsed.
console.timeEnd() Stops a timer created by a call to console.time(name) and writes the time elapsed.
console.timeStamp()
console.toLocaleString()
console.toString()
console.trace() Prints an interactive stack trace of JavaScript execution at the point where it is called.
console.values() Gives you all the values of those elements.
console.warn(object[, object, ...]) Writes a message to the console with the visual "warning" icon and color coding and a hyperlink to the line where it was called.
console.valueOf()
window.onerror When exceptions are thrown in the window context and is not caught by any try/catch block, the function will be invoked with the exception's message, the URL of the file where the exception was thrown and the line number in that file passed as three arguments in that order.
window.onerror = function(msg, url, line) { console.log('message: ' + msg, 'url: ' + url, 'line: ' + line); };

Command Line API

Command Description
$$ Returns an array of elements that match the given CSS selector.
$0 The currently-selected object in the inspector.
$_ The previously evaluated statement
$1 The previously-selected object in the inspector.
$n(index) Access to an array of last 5 inspected elements.
dir(object) Prints an interactive listing of all properties of the object. This looks identical to the view that you would see in the DOM tab.
dirxml(node) Prints the XML source tree of an HTML or XML element. This looks identical to the view that you would see in the HTML tab. You can click on any node to inspect it in the HTML tab.
clear() Clears the console.
copy() Copies everything passed to it to the clipboard.
inspect(object[, tabName]) Inspects an object in the most suitable tab, or the tab identified by the optional argument tabName.
keys(object) Returns an array containing the names of all properties of the object.
values(object) Returns an array containing the values of all properties of the object.
monitorEvents(object[, types]) Turns on logging for all events dispatched to an object. The optional argument types may specify a specific family of events to log. The most commonly used values for types are "mouse" and "key". The full list of available types includes "composition", "contextmenu", "drag", "focus", "form", "key", "load", "mouse", "mutation", "paint", "scroll", "text", "ui", and "xul".
unmonitorEvents(object[, types]) Turns off logging for all events dispatched to an object.
performance
performance.timing
performance.memory
performance.navigation
profile([title]) Turns on the JavaScript profiler. The optional argument title would contain the text to be printed in the header of the profile report.
profileEnd() Turns off the JavaScript profiler and prints its report.

Flags

Feature Description
-disable-javascript Disable JavaScript from command line.
-disable-images Disable images.
-disable-java Disable Java.
-disable-plugins Disable plugins.
-disable-popup-blocking Disable popup blocking.
-start-maximized Start Chrome fullscreen

For example: "C:\Documents and Settings\%username%\Local Settings\Application Data\Google\Chrome" -disable-javascript

DevTools Themes

Tweak your skin for the DevTools using the DevTools themselves by undocking them then hitting Ctrl + Alt + I or ⌃ + Alt + I on Mac.
Override the classes/IDs of Devtools for your theme via:

Read about how to customize your Devtools .

Other Chrome Shortcuts

Here are some additional Chrome shortcuts which are useful for general use within the browser not specific to the DevTools. View all Chrome shortcuts for Windows, Mac, and Linux.

Windows / Linux Mac
Find next Ctrl + G Cmd + G
Find previous Ctrl + Shift + G Cmd + Shift + G
Open a new window in Incognito mode Ctrl + Shift + N Cmd + Shift + N
Toggle Bookmarks bar on and off Ctrl + Shift + B Cmd + Shift + B
View the History page Ctrl + H Cmd + Y
View the Downloads page Ctrl + J Cmd + Shift + J
View the Task Manager Shift + ESC Shift + ESC
Next page in a tabs browsing history Alt + Right Alt + Right
Previous page in a tabs browsing history Backspace, Alt + Left Backspace, Alt + Left
Highlight content in the web address area F6, Ctrl + L, Alt + D Cmd + L, Alt + D
Places a ? in the address bar for performing a keyword
search using your default search engine 		Ctrl + K, Ctrl + E Cmd + K, Cmd + E

For a list of all Chrome shortcuts for Windows, Mac, and Linux check out http://goo.gl/PsTNm

about:pages

Page Description
about:about Displays all the chrome://chrome-urls
about:stats Display page statistics.
about:memory Display memory usage in a multi-process browser.
about:plugins Display installed plug-ins.
about:histograms Display connection times.
about:dns Display DNS information.
about:cache Display cached web pages.
about:network Display a menu for various network monitoring and testing.
view-cache:stats Display cached documents.
chrome-resource:/favicon/ Display the binary data for a PNG file.
chrome-resource:/new-tab/ A template for the empty tab page.
about:version Display information about the browser.

Chrome URLs

For Debugging

The following pages are for debugging purposes only. Because they crash or hang the renderer, they're not linked directly; you can type them into the address bar if you need them