debugging-extensions.md

description	title	author	ms.author	ms.date	ms.topic	ms.prod	keywords
With F12 Developer Tools, learn how to debug an extension's background script, content scripts, and extension pages.	Extensions - Debugging extensions	abbycar	abigailc	03/08/2017	article	microsoft-edge	edge, web development, html, javascript, developer, debug, debugging

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.

[!VIDEO https://channel9.msdn.com/Blogs/One-Dev-Minute/Debugging-Microsoft-Edge-Extensions/player]

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.
   
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.
   
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.
   
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.
   

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.
   
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".

   

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

   

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.

   

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".

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