Google Chrome Developer Tools Cheatsheet

Google Chrome Developer Tools Cheatsheet

Opening Devtools

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

  • Open the Chrome menu at the top-right of your browser window, then select Tools > Developer Tools.
  • Right-click on any page element and select Inspect Element.
Windows / LinuxMac
Open Developer ToolsF12, Ctrl + Shift + ICmd + Opt + I
Open / switch from inspect element mode and browser windowCtrl + Shift + CCmd + Shift + C
Open Developer Tools and bring focus to the consoleCtrl + Shift + JCmd + Opt + J
Inspect the Inspector (undock first one and press)Ctrl + Shift + JCmd + 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 / LinuxMac
Show General Settings dialog?, F1?
Next panelCtrl + ]Cmd + ]
Previous panelCtrl + [Cmd + [
Backward in panel HistoryCtrl + Alt + [Cmd + Alt + [
Forward in panel historyCtrl + Alt + ]Cmd + Alt + ]
Jump to panel 1-9 (when enabled in General Settings)Ctrl + 1-9Cmd + 1-9
Toggle Console / close settings dialog when openEscEsc
Refresh the pageF5, Ctrl + RCmd + R
Refresh the page ignoring cached contentCtrl + F5, Ctrl + Shift + RCmd + Shift + R
Text search within current file or panelCtrl + FCmd + F
Text search across all sourcesCtrl + Shift + FCmd + Alt + F
Search by filename (except on Timeline)Ctrl + O, Ctrl + OCmd + O, Cmd + O
Restore default text sizeCtrl + 0Shift + 0
Zoom inCtrl + +Shift + +
Zoom outCtrl + Shift +

Elements Panel

Windows / LinuxMac
Undo changeCtrl + ZCmd + Z
Redo changeCtrl + YCmd + Y, Cmd + Shift + Z
NavigateUp, DownUp, Down
Expand / collapse nodeRight, LeftRight, Left
Expand nodeSingle-click on tagSingle-click on tag
Edit attributeEnter, Double-click on attributeEnter, Double-click on attribute
Hide elementHH
Toggle edit as HTMLF2

Right-clicking an element you can:

  • Force element psuedo states: (:active, :hover, :focus, :visited)
  • Set breakpoints on the elements: (Subtree modifications, Attribute modification, Node removal)
  • Clear console

Styles Sidebar

Windows / LinuxMac
Edit ruleSingle-clickSingle-click
Insert new propertySingle-click on whitespaceSingle-click on whitespace
Go to line of style rule property declaration in sourceCtrl + Click on propertyCmd + Click on property
Go to line of property value declaration in sourceCtrl + Click on property valueCmd + Click on property value
Go to line of style rule property declaration in sourceCtrl + Click on propertyCmd + Click on property
Go to line of property value declaration in sourceCtrl + Click on property valueCmd + Click on property value
Cycle through the color definition valueShift + Click on color picker boxShift + Click on color picker box
View auto-complete suggestionsCtrl + SpaceCmd + Space
Edit next / previous propertyTab, Shift + TabTab, Shift + Tab
Increment / decrement valueUp, DownUp, Down
Increment / decrement value by 10Shift + Up, Shift + DownShift + Up, Shift + Down
Increment / decrement value by 10PgUp, PgDownPgUp, PgDown
Increment / decrement value by 100Shift + PgUp, Shift + PgDownShift + PgUp, Shift + PgDown
Increment / decrement value by 0.1Alt + Up, Alt + DownOpt + Up, Opt + Down

Emulate an element’s pseudo state (:active, :hover, :focus, :visited)

Add new style selectors

Network Panel

Understanding the information displayed within each column

  • Size: Total size of resource

    Content: Gzipped size of resource

  • Time: total duration to get response

    Latency: time taken to get first byte

  • File that initialized the resource load

    How the resource load was scheduled

  • Select the Timeline heading to change sort modes for the network.
  • Transparent: Latency load time Solid: Total load time

Export network data into HAR format

Sources Panel

Windows / LinuxMac
Pause / resume script executionF8, Ctrl + \F8, Cmd + \
Step over next function callF10, Ctrl + F10, Cmd +
Step into next function callF11, Ctrl + ;F11, Cmd + ;
Step out of current functionShift + F11, Ctrl + Shift + ;Shift + F11, Cmd + Shift + ;
Select next call frameCtrl + .Opt + .
Select previous call frameCtrl + ,Opt + ,
Toggle breakpoint conditionClick on line number, Ctrl + BClick on line number, Cmd + B
Edit breakpoint conditionRight-click on line numberRight-click on line number
Delete individual wordsAlt + DeleteOpt + Delete
Comment a line or selected textCtrl + /Cmd + /
Save changes to local modificationsCtrl + SCmd + S
Go to lineCtrl + GCtrl + G
Search by filenameCtrl + OCmd + O
Jump to line numberCtrl + P + :<number>Cmd + P + :<number>
Jump to columnCtrl + O + :<number> + :<number>Cmd + O + :<number> + :<number>
Go to memberCtrl + Shift + OCmd + Shift + O
Toggle console and evaluate code selected in Sources panelCtrl + Shift + ECmd + Shift + E
Run snippetCtrl + EnterCmd + Enter
Toggle commentCtrl + /Cmd + /

Exceptions

Timeline Panel

Windows / LinuxMac
Start / stop recordingCtrl + ECmd + E
Save timeline dataCtrl + SCmd + S
Load timeline dataCtrl + OCmd + O

Profiles Panel

Windows / LinuxMac
Start / stop recordingCtrl + ECmd + E

Profiling types:

  • CPU profiler: shows where execution time is spent in your page’s JavaScript functions
  • Heap profiler: shows memory distribution by your page’s JavaScript objects and related DOM nodes

Search Shortcuts

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

Windows / LinuxMac
Search scripts, stylesheets and snippets by filenameCtrl + O⌘ + O
Text search within current fileCtrl + F⌘ + F
Text search across all sourcesCtrl + Shift + F⌘ + Alt + F
Filter/navigate to a JavaScript function/CSS rule when viewing a fileCtrl + Shift + O⌘ + SHift + O
Launch line number dialog when viewing a fileCtrl + K⌘ + L
Evaluate code selected in scripts in the consoleCtrl + Shift + E⌘ + Shift + E

Console

Windows / LinuxMac
Next suggestionTabTab
Previous suggestionShift + TabShift + Tab
Accept suggestionRightRight
Previous command / lineUpUp
Next command / lineDownDown
Clear ConsoleCtrl + LCmd + K, Opt + L
Multi-line entryShift + EnterCtrl + Return
ExecuteEnterReturn

Right-clicking on console:

  • XMLHTTPRequest logging: Turn on to view the XHR log
  • Preserve log upon navigation
  • Filter: Hide and unhide messages from script files
  • Clear console: Clear all console messages

Screencasting

Windows / LinuxMac
Pinch zoom in and outAlt + Scroll,Ctrl + Cick and drag with two fingersOpt + Scroll, Cmd + Cick and drag with two fingers
Inspect element toolCtrl + Shift + CCmd + Shift + C

Emulation

Windows / LinuxMac
Pinch zoom in and outShift + ScrollShift + Scroll

Console API

CommandDescription
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.memoryAn 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.profilesAn 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.onerrorWhen 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

CommandDescription
$$Returns an array of elements that match the given CSS selector.
$0The currently-selected object in the inspector.
$_The previously evaluated statement
$1The 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

FeatureDescription
-disable-javascriptDisable JavaScript from command line.
-disable-imagesDisable images.
-disable-javaDisable Java.
-disable-pluginsDisable plugins.
-disable-popup-blockingDisable popup blocking.
-start-maximizedStart 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:

  • Windows: C:/Users/%username%/AppData/Local/Google/Chrome/User Data/Default/User StyleSheets/Custom.css
  • Mac OSX: ~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css
  • Ubuntu: ~/.config/chromium/Default/User StyleSheets/Custom.css

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 / LinuxMac
Find nextCtrl + GCmd + G
Find previousCtrl + Shift + GCmd + Shift + G
Open a new window in Incognito modeCtrl + Shift + NCmd + Shift + N
Toggle Bookmarks bar on and offCtrl + Shift + BCmd + Shift + B
View the History pageCtrl + HCmd + Y
View the Downloads pageCtrl + JCmd + Shift + J
View the Task ManagerShift + ESCShift + ESC
Next page in a tabs browsing historyAlt + RightAlt + Right
Previous page in a tabs browsing historyBackspace, Alt + LeftBackspace, Alt + Left
Highlight content in the web address areaF6, Ctrl + L, Alt + DCmd + L, Alt + D
Places a ? in the address bar for performing a keywordsearch using your default search engineCtrl + K, Ctrl + ECmd + K, Cmd + E

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

about:pages

PageDescription
about:aboutDisplays all the chrome://chrome-urls
about:statsDisplay page statistics.
about:memoryDisplay memory usage in a multi-process browser.
about:pluginsDisplay installed plug-ins.
about:histogramsDisplay connection times.
about:dnsDisplay DNS information.
about:cacheDisplay cached web pages.
about:networkDisplay a menu for various network monitoring and testing.
view-cache:statsDisplay 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:versionDisplay 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

Cheatsheet by Jared Williams .

Kommentar verfassen