custom-devtools-tool.md

title	Sample: Custom DevTools tool
description	Microsoft Edge extension that adds a Custom tool in DevTools. Sends messages between the inspected webpage and DevTools.
author	MSEdgeTeam
ms.author	msedgedevrel
ms.topic	article
ms.service	microsoft-edge
ms.subservice	extensions
ms.date	04/06/2026

Sample: Custom DevTools tool

The sample "Custom DevTools tool" is a Microsoft Edge extension that adds a Custom tool in Microsoft Edge DevTools, including a tab in the Activity Bar, and a panel below the tab. The tool name and its tab in DevTools can be something other than Custom.

• The Custom DevTools tool calls the DevTools API to display memory information.

• The webpage under inspection, and the Custom DevTools tool, send messages to each other.

Download, install, use, and modify the sample, as follows.

See also:

• Overview of DevTools
• Create a DevTools extension, adding a custom tool tab and panel
• Code for Custom DevTools tool
• /devtools-extension/ - Readme and source code for the Custom DevTools Tool sample.

Preview of the sample

The Custom DevTools Tool adds a Custom tool tab and panel in DevTools within Microsoft Edge:

Display memory information

The Custom tool in DevTools calls the DevTools API (chrome.system.memory.getInfo((data)) to retrieve and display memory information.

Send message from DevTools to inspected page

The Custom tool in DevTools has a button that sends a message to the inspected webpage. The inspected webpage then displays a JavaScript alert dialog:

Send message from inspected page to DevTools

Clicking around within the inspected webpage sends a message to DevTools. The Custom tool uses a content script to send a message (the clicked coordinates) from the inspected webpage (any webpage) to the Custom DevTools tool and the Console tool in DevTools.

The Custom tool displays the mouse-click coordinates from the message:

The Console tool also displays the mouse-click coordinates from the message:

Step 1: Download the sample

If not done yet, download the "main" branch of the Demos repo, or clone (or fork and clone) the repo. Downloading the repo is simplest, and is described below.

Download the "main" branch of the Demos repo, as follows:

1. In Microsoft Edge, go to the MicrosoftEdge / Demos repo.

2. Click the down arrow in the Code button, and then select Download ZIP.

3. In Microsoft Edge, the Downloads dialog shows Demos-main.zip. "-main" is added, meaning a static snapshot of the "main" branch of the repo.

4. Hover to the right of Demos-main.zip, and then click the Show in folder button.

   File Explorer opens, displaying the Downloads folder.

5. Right-click Demos-main.zip, and then select Extract all.

   The Extract Compressed (Zipped) Folders dialog opens.

6. Click the Extract button.

   The % complete dialog opens, and then finishes.

7. Move the Demos-main folder to a GitHub repos location, such as C:\Users\localAccount\GitHub.

Step 2: Install the extension to add the tool in DevTools

1. In Microsoft Edge, select Settings and more (), hover over Extensions, and then select Manage extensions.

   The Extensions tab and page opens (edge://extensions).

2. Click Load unpacked.

   The Select the extension directory dialog opens.

3. Navigate to the /Demos-main/devtools-extension folder, such as C:\Users\localAccount\GitHub\Demos-main\devtools-extension\, and then click the Select Folder button.

   The Custom DevTools Tool card is displayed:

   

Step 3: Select the Custom tool in DevTools

1. In Microsoft Edge, go to a webpage, such as the To Do app, in a new window or tab.

   The Custom DevTools tool requires a webpage, not an empty tab.

2. Right-click the webpage, and then select Inspect.

   DevTools opens.

3. In the Activity Bar of DevTools, click the Custom () tool's tab.

   The Custom tool tab and panel are displayed:

   

   If the Custom () tool's tab isn't visible, do any of the following:

   • Click the More tools () button, and then select Custom.

   • Make DevTools wider, and then click the Custom () tool's tab.

   The custom DevTools page has several sections:

   • Memory display information.

   • A button to send a message from DevTools to the inspected webpage, to make the page display a JavaScript alert dialog.

   • A Coordinates display area, to send a message from the inspected webpage to the DevTools Console and Custom tools.

Step 4: View memory information from a DevTools API call

• In the Custom tool, next to Available Memory Capacity, observe the once-per-second updating of the value:

  

Step 5: Send message from DevTools to inspected page

1. In the Custom tool, click the Say Hello button.

   A JavaScript alert dialog opens, displaying the message: "Hello from the DevTools extension!"

   

   DevTools sends a message to the inspected webpage, causing JavaScript to display an alert.

2. Click the OK button.

   The dialog closes.

Step 6: Send message from inspected page to DevTools

1. In the inspected webpage, click various spots.

   In the Custom tool, next to Coordinates, the coordinates are displayed and updated while you click around:

   

2. In DevTools, in the Activity Bar, select the Console () tool.

3. In the inspected webpage, click various spots.

   The clicked coordinates are displayed in the Console:

   

Step 7: Modify the Custom tool

1. If not done already, install Visual Studio Code.

2. Open Visual Studio Code.

3. Click the File menu, and then click Open Folder.

   The Open Folder dialog opens.

4. Navigate to the /Demos-main/devtools-extension/ folder, such as C:\Users\localAccount\GitHub\Demos-main\devtools-extension\, and then click the Select Folder button.

   A dialog opens, asking whether to open the repo in the parent folder.

5. Click the Yes button.

   In the Explorer pane, the /devtools-extension/ folder is displayed.

6. Click panel.html.

   panel.html is opened for editing:

   

7. Add "My" to the <h2> heading; change from:

   <h2>Custom DevTools Tool</h2>

   to:

   <h2>My Custom DevTools Tool</h2>

8. Save panel.html.

9. In the Explorer pane, click manifest.json.

   manifest.json is opened for editing.

10. Add "My" to the name; change from:

    "name": "Custom DevTools Tool",

    to:

    "name": "My Custom DevTools Tool",

11. Save manifest.json.

Step 8: Reload the modified Custom tool

1. In Microsoft Edge, select Settings and more (), hover over Extensions, and then select Manage extensions.

   The Extensions tab and page opens (edge://extensions).

2. In the Custom DevTools Tool card, click the Reload link.

   The card now shows My Custom DevTools Tool as the name of the extension:

   

   An Errors link might appear in the card, displaying "Uncaught Error: Extension context invalidated", because the sample was modified while still in use. If you want to avoid this error, you can click Remove in the Custom DevTools Tool card, and then click Load unpacked.

Step 9: Use the modified Custom tool

1. Go to a webpage, such as the To Do app, in a new window or tab.

   The Custom DevTools tool requires a webpage, not an empty tab.

2. Right-click the webpage, and then select Inspect.

   DevTools opens.

3. In the Activity Bar of DevTools, click the Custom () tool's tab.

   The Custom tool is displayed, with the word My added to the heading in the panel:

   

   If the title still says Custom DevTools Tool instead of My Custom DevTools Tool, close and reopen DevTools.

   If the Custom () tool's tab isn't visible, do any of the following:

   • Click the More tools () button, and then select Custom.

   • Make DevTools wider, and then click the Custom () tool's tab.

This is the end of the steps to use and modify the DevTools Extension sample. Next, you can study Code for Custom DevTools tool.

Troubleshooting

If the Custom tab isn't visible in DevTools, or it's outdated and doesn't show your latest code changes:

• Make DevTools wide, to show many tools in the Activity Bar.

• Close and reopen DevTools.

• Refresh or hard-refresh the inspected page.

• In Microsoft Edge, in the Extensions page, click Reload for the extension.

• If no icon is provided in such an extension, the tab when not selected is narrow and gray, on the right side of the Activity Bar. Click the narrow gray tab.

• Go to a webpage, not an empty tab. The code in the sample "Custom DevTools tool" requires a webpage.

When the Activity Bar is narrow, the Custom Devtools tool is added to the More tools menu on the Activity Bar.

The Custom tab doesn't have a Remove from Activity Bar command on the right-click menu.

See also

• Overview of DevTools
• Create a DevTools extension, adding a custom tool tab and panel
• Code for Custom DevTools tool
• /devtools-extension/ - Readme and source code.
• MicrosoftEdge / Demos
• To Do app
• Visual Studio Code
• Code for Custom DevTools tool
• Samples for Microsoft Edge extensions