Customize keyboard shortcuts

In the Shortcuts page of Settings, you can view the defined shortcuts for Microsoft Edge DevTools, define your own shortcut for a specific action, or use a preset to match the default shortcuts from Microsoft Visual Studio Code.

For the default keyboard shortcuts, see Keyboard shortcuts.

Match keyboard shortcuts from Visual Studio Code

To match the keyboard shortcut in the Microsoft Edge DevTools for an equivalent action in Visual Studio Code:

  1. To open DevTools, right-click the webpage, and then select Inspect. Or, press Ctrl+Shift+I (Windows, Linux) or Command+Option+I (macOS). DevTools opens.

  2. In DevTools, on the main toolbar, click the Settings (Settings icon.) button. Or, press Shift+?.

  3. In the Settings panel, select the Shortcuts page.

  4. In the upper right, in the Match shortcuts from preset dropdown list, select Visual Studio Code instead of DevTools (Default).

    Matching keyboard shortcuts in DevTools to Visual Studio Code.

For example, to pause or continue running a script in Visual Studio Code, you select F5. But with the DevTools (Default) preset, to pause or continue running a script, you press F8. When you change the preset to Visual Studio Code, you now also press F5 in DevTools, just like in Visual Studio Code.

See also

Edit the keyboard shortcut for a DevTools action

  1. To open DevTools, right-click the webpage, and then select Inspect. Or, press Ctrl+Shift+I (Windows, Linux) or Command+Option+I (macOS). DevTools opens.

  2. In DevTools, on the main toolbar, click the Settings (Settings icon.) button. Or, press Shift+?.

  3. In the Settings panel, select the Shortcuts page.

  4. Select the action you want to customize. For example, in the Debugger section, select the Pause script execution action.

  5. Click the Edit (EditKeyboardShortcut.) icon.

    Select the action to customize from the Shortcuts page in Settings.

  6. To bind the shortcut keys to the action, ensure the text box next to the action has focus, and then use the keyboard to select the shortcut keys.

  7. To bind more than one shortcut combination to an action, select Add a shortcut, make sure the text box next to the action has focus, and then use the keyboard to select the shortcut keys.

    Select the keys you want to assign to the action.

  8. To save your new keyboard shortcut, select the checkmark (CheckmarkKeyboardShortcut.) icon.

    Select the checkmark icon to save your new keyboard shortcut

  9. Select your new keyboard shortcut to trigger the action in DevTools.

Icons and buttons

  • If there's a Custom Keyboard Shortcut (CustomKeyboardShortcut.) icon displayed next to a checkbox, it indicates that you have customized the keyboard shortcut.

  • To remove a keyboard shortcut for an action while you are editing the keyboard shortcuts for an action, click the Delete shortcut (DeleteKeyboardShortcut.) icon.

  • To add an additional keyboard shortcut for an action while you are editing the keyboard shortcuts for an action, click the Add a shortcut link, or click the Custom Keyboard Shortcut (CustomKeyboardShortcut.) icon.

  • To save a modified or added keyboard shortcut while you are editing the keyboard shortcuts for an action, click the checkmark (CheckmarkKeyboardShortcut.) icon.

  • To discard your changes while you are editing the keyboard shortcuts for an action, click the X (XKeyboardShortcut.) icon.

  • To reset all shortcuts, click the Restore default shortcuts button.

If a keyboard shortcut is currently assigned to one action, it can't be assigned to another action. Instead, delete the keyboard shortcut from the previous action, and then add that keyboard shortcut to the new action.

See also