Chrome DevTools: Create your own keyboard shortcuts and increase productivity

Introduction

The DevTools Shortcut Editor lets you assign your own preferred keyboard shortcuts to common workflows. For example, you can configure the shortcut Shift + S to take a screenshot of an element.

How to use this feature

This is an experimental Canary feature, so enable the Enable keyboard shortcut editor experiment from the Experiments Pane.

With the experiment enabled, do the following steps:

1. Open the shortcuts menu from the Command Menu (Cmd + Shift + P > Shortcuts).
2. Select the Edit button next to a shortcut.
3. Enter your desired shortcut via Add a shortcut link.
4. Save your changes by selecting the checkmark.

You can now try out your shortcut in the relevant panel.

A useful screenshot shortcut

I have assigned Shift + S to capture an element screenshot.

Other available shortcuts include:

• Clear console
• Show Console
• Run snippet
• Capture screenshot
• Go offline

See more shortcut options here

• Start recording events
• Clear console
• Clear console history
• Create live expression
• Show Console
• Toggle breakpoint input window
• Evaluate selected text in console
• Next call frame
• Previous call frame
• Run snippet
• Step
• Step into next function call
• Step out of current function
• Step over next function call
• Toggle breakpoint
• Toggle breakpoint enabled
• Deactivate breakpoints
• Pause script execution
• Add selected text to watches
• Focus debuggee
• Toggle drawer
• Edit as HTML
• Hide element
• Redo
• Select an element in the page to inspect it
• Undo
• Run command
• Reload DevTools
• Next panel
• Previous panel
• Cancel search
• Search in panel
• Find next result
• Find previous result
• Restore last dock position
• Zoom in
• Zoom out
• Reset zoom level
• Open file
• Release notes
• Report a DevTools issue
• Start/stop recording
• Pan or rotate down
• Pan or rotate left
• Switch to pan mode
• Reset view
• Pan or rotate right
• Switch to rotate mode
• Pan or rotate up
• Zoom in
• Zoom out
• Start/stop recording
• Toggle device toolbar
• Hard reload page
• Reload page
• Enable slow 3G throttling
• Enable fast 3G throttling
• Go offline
• Go online
• Hide request details
• Search
• Record network log
• Collect garbage
• Start instrumenting coverage and reload page
• Instrument coverage
• Next frame
• Previous frame
• Load profile…
• Next recording
• Previous recording
• Start profiling and reload page
• Save profile…
• Show recent timeline sessions
• Record
• Clear site data
• Capture area screenshot
• Capture full size screenshot
• Capture node screenshot
• Capture screenshot
• Sensors
• Documentation
• Shortcuts
• Settings
• Add folder to workspace
• Close All
• Close the active tab
• Create new snippet
• Decrement CSS unit by 1
• Decrement CSS unit by 10
• Go to line
• Go to a function declaration/rule set
• Increment CSS unit by 1
• Increment CSS unit by 10
• Jump to next editing location
• Jump to previous editing location
• Rename
• Save
• Save all
• Search
• Switch file

Extra

• On the subject of shortcuts, there's a Console Shortcut to get the currently selected element in the Elements Panel.
• If you'd like to understand the difference between a regular screenshot, an area screenshot, an element screenshot, then checkout my screenshot tips.