================================== Chrome DevTools keyboard shortcuts ================================== First published at 11/17/2017 on https://defkey.com/chrome-devtools-shortcuts Chrome DevTools are web debugging tools integrated to Google Chrome web browser. Those tools are used by web developers to access and ispect inner workings of a website, find issues, get ideas to optimize code etc. Chrome DevTools has 79 shortcuts and we have listed all of them below. Opening DevTools ---------------- F12 Open whatever panel you used last Ctrl + Shift + I Open whatever panel you used last Ctrl + Shift + J Open the Console panel Global shortcuts ---------------- These shortcuts are available in most DevTools panels. F1 Show settings ? Show settings Ctrl + ] Focus the next panel Ctrl + [ Focus the previous panel Ctrl + Shift + D Switch back to whatever docking position you last used Ctrl + Shift + M Toggle Device Mode Ctrl + Shift + C Toggle Inspect Element mode Ctrl + Shift + P Open the Command Menu Esc Toggle the drawer F5 Normal reload Ctrl + R Normal reload Ctrl + F5 Hard reload Ctrl + Shift + R Hard reload Ctrl + F Search for text within the current panel Ctrl + Shift + F Open Search tab in the Drawer, which lets you search for text across all loaded resources Ctrl + O Open a file in the Sources panel Ctrl + P Open a file in the Sources panel Ctrl + Shift + + Zoom in Ctrl + Shift + - Zoom out Ctrl + 0 Restore default zoom level Ctrl + O then type ! followed by the name of the script, then press Enter: Run snippet Elements panel -------------- Ctrl + Z Undo change Ctrl + Y Redo change Up arrow / Down arrow Select the element above / below the currently-selected element Right arrow Expand the currently-selected node. If the node is already expanded, this shortcut selects the element below it Left arrow Collapse the currently-selected node. If the node is already expanded, this shortcut selects the element above it Ctrl + Left click (on the arrow icon next to the elements name) Expand or collapse the currently-selected node and all of its children Enter Toggle Edit Attributes mode on currently-selected element Tab Select the next / previous attribute after entering Edit Attributes mode Shift + Tab Select the next / previous attribute after entering Edit Attributes mode H Hide the currently selected element F2 Toggle Edit as HTML mode on the currently-selected element Styles pane ----------- Ctrl + Left click (on the property value) Go to the line where a property value is declared Shift + Left click (on the Color Preview box) Cycle through the RBGA, HSLA, and Hex representations of a color value Tab Use this shortcut after clicking property name or value to select the next / previous property or value Shift + Tab Use this shortcut after clicking property name or value to select the next / previous property or value Alt + Up arrow / Down arrow Use this shorcut after clicking a value to increment / decrement a property value by 0.1 Up arrow / Down arrow Use this shorcut after clicking a value to increment / decrement a property value by 1 Shift + Up arrow / Down arrow Use this shorcut after clicking a value to increment / decrement a property value by 10 Shift + Up arrow / Down arrow Use this shorcut after clicking a value to increment / decrement a property value by 100 Sources panel ------------- F8 Pause script execution or resume Ctrl + \ Pause script execution or resume F10 Step over next function or call Ctrl + ' Step over next function or call F11 Step into next function call Ctrl + ; Step into next function call Shift + F11 Step out of current function Ctrl + Shift + ; Step out of current function Ctrl + . Select the call frame below / above the currently-selected frame Ctrl + , Select the call frame below / above the currently-selected frame Ctrl + S Save changes to local modifications Ctrl + Alt + S Save all changes Ctrl + G Go to line Ctrl + O then type : followed by the line number then press Enter: Jump to a line number of the currently-open file Ctrl + O then type : followed by the line number then another: then column number then press Enter: Jump to a column of the currently-open file Cttl + Shift + O then type in the name of the declaration / rule set, or select it from the list of options: Go to a function declaration (if currently-open file is HTML or a script), or a rule set (if currently-open file is a stylesheet) Alt + W Close the active tab Code Editor ----------- Ctrl + Del Delete all characters in the last word, up to the cursor Ctrl + B (when cursor is focused on the line) Add or remove a line-of-code breakpoint Ctrl + M Go to matching bracket Ctrl + / Toggle single-line comment. If multiple lines are selected, DevTools adds a comment to the start of each line Ctrl + D Select / de-select the next occurrence of whatever word the cursor is on. Each occurrence is highlighted simultaneously Ctrl + U Select / de-select the next occurrence of whatever word the cursor is on. Each occurrence is highlighted simultaneously Performance panel ----------------- Ctrl + E Start / stop recording Ctrl + S Save recording Ctrl + O O Load recording Memory panel ------------ Ctrl + E Start / stop recording Console panel ------------- Right arrow Accept autocomplete suggestion Tab Accept autocomplete suggestion Esc Reject autocomplete suggestion Up arrow Get previous statement Down arrow Get next statement Ctrl + ` Focus the console Ctrl + L Clear the console Shift + Enter Force a multi-line entry. Note that DevTools should detect multi-line scenarios by default, so this shortcut is now usually unnecessary Enter Execute Hold Alt then click Expand to expand all sub-properties of an object that's been logged to the console. Source: Chrome DevTools Keyboard Shortcuts Reference Last modified on(UTC): Monday, November 11, 2019 Defkey © All rights reserved.