Share via

Debugging extensions

  • Article

Note

This documentation is for extensions for the legacy version of Microsoft Edge. For information on the new Microsoft Edge, see Microsoft Edge (Chromium) Extensions.

Important

The new Microsoft Edge program is now open to accept chromium-based extensions for the new Microsoft Edge (v77 or later). If you want to submit a new extension, visit Publish to Microsoft Edge (Chromium) Add-ons Store to learn about the submission process.

With this announcement, Microsoft is no longer accepting new extensions for the legacy version of Microsoft Edge. If you own an Extension for the legacy version, you should begin the process of porting your Extension to the new Microsoft Edge. The new Microsoft Edge is based on Chromium, so Extensions designed for the legacy version of Microsoft Edge do not work with the new version.

You can debug your extensions in Microsoft Edge by using F12 Developer Tools.

The following video goes through a buggy Microsoft Edge extension, walking though each debugging scenario and fixing it up along the way. See the step-by-step instructions below for more info.

Note

In order to take advantage of extension debugging with F12, you must first turn on developer features in about:flags. See Adding and removing extensions for details on how to do this.

Background script debugging

To start debugging the background script of your extension:

  1. Click on More (...) followed by Extensions to go into the extension pane.

    more button

  2. Click on the extension that you want to debug.

  3. Click on the Background page link to bring up F12 for the background process.

    selected extension view of options with inspect link

  4. Select the Debugger tab in F12.

  5. Navigate to and select your extension's background script.

  6. Place breakpoints for debugging by clicking to the left of the source code line number.

    f12 console showing background script with break points

  7. Select the Console tab and execute the location.reload() command. This will re-execute the background script, allowing you to step through your code.

    console with location.reload entered

Content script debugging

To start debugging the content script of your extension:

  1. Launch F12 by either navigating to the More (...) button and selecting F12 Developer Tools or by pressing F12 on your keyboard.

  2. Navigate to and select your extension's content script. Content scripts for extensions currently running will be depicted by a different folder for each extension.

    Note

    Only running content scripts will appear.

  3. Place breakpoints for debugging by clicking to the left of the source code line number.

    f12 with content script being debugged

  4. Refresh the browser tab to begin stepping though your code.

Extension page debugging

There are two methods that can be used for accessing the source code of your extension page for debugging. One method applies to a variety of pages while the other only works for popup pages.

Debugging any extension page

The following method works for all extension pages like the options page and popups:

  1. Right-click on the background of your page.

  2. Select View source.

    Open popup debugging with f12

  3. Once F12 opens, place breakpoints within the file you want to debug.

    popup debugging with f12

  4. Select the Console tab and execute the command location.reload(). This will re-execute the page script, allowing you to step through your code.

    console with location.reload entered

Debugging a popup extension page

While the method for debugging extension pages also applies to popup extension pages, the following steps outline another way to debug your popup:

  1. Right-click your extension's icon.

  2. Select Inspect popup.

    popup debug inspect

  3. Follow steps 3 and 4 above for placing breakpoints and reloading the popup.