DevTools comes with tons of keyboard shortcuts. Some are well known (like
F12 to open DevTools), but there are many others which you might not be familiar with, and which could make your life easier.
Chrome and Edge have a screen where you can not only find all of the keyboard shortcuts, but also customize them. Chrome enabled this screen in version 107, and Edge has had it for a longer while.
To list the shortcuts:
- Open DevTools (
- Go to the Settings by pressing
- Click Shortcuts in the sidebar.
To customize the shortcuts:
- Hover one of the shortcuts and click the edit icon (the icon looks like a pencil).
- Press the new key combination you want for this shortcut.
- You can then save the new shortcut, cancel your change, or revert to the shortcut's initial value.