Debugging extensions

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 command "location.reload()". 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.

  1. Place breakpoints for debugging by clicking to the left of the source code line number.
    f12 with content script being debugged
  2. 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".

    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.