Implement memory polling in DevTools extension

[MichelLaplane]

Rendered article section for review:

• Create a DevTools extension, adding a custom tool tab and panel > Step 3: Display memory information by calling extension APIs
  • /extensions/developer-guide/devtools-extension.md
  • Internal preview: https://review.learn.microsoft.com/microsoft-edge/extensions/developer-guide/devtools-extension?branch=pr-en-us-3628
  • External preview: https://github.com/MichelLaplane/edge-developer/blob/patch-1/microsoft-edge/extensions/developer-guide/devtools-extension.md#step-3-display-memory-information-by-calling-extension-apis
  • Before/live: https://learn.microsoft.com/microsoft-edge/extensions/developer-guide/devtools-extension
  • Added memory polling functionality to the DevTools extension panel.
    • Added panel.js code listing.

According to AI:
This PR refactors the DevTools extension tutorial in Step 3 to move the memory polling logic from devtools.js into a separate panel.js file that runs in the panel's context. This improves the architecture by handling visibility changes and avoiding unnecessary API calls when the panel is hidden. Key changes:

• Moved memory polling logic from devtools.js to a new panel.js file with visibility-aware start/stop functions
• Simplified devtools.js to only create the panel and log lifecycle events
• Updated explanation text to reflect the new architecture

Related PRs:

• Break out "Custom DevTools sample" from "Create DevTools extension" #3616 - Docs repo
• Delete per-phase dirs from /devtools-extension/ MicrosoftEdge/Demos#106 - Demos repo

The present PR might imply changing code in the Demos repo.

AB#60079014

[Copilot]

Pull Request Overview

This PR refactors the DevTools extension tutorial in Step 3 to move the memory polling logic from devtools.js into a separate panel.js file that runs in the panel's context. This improves the architecture by handling visibility changes and avoiding unnecessary API calls when the panel is hidden.

Key changes:

• Moved memory polling logic from devtools.js to a new panel.js file with visibility-aware start/stop functions
• Simplified devtools.js to only create the panel and log lifecycle events
• Updated explanation text to reflect the new architecture

Comments suppressed due to low confidence (1)

microsoft-edge/extensions/developer-guide/devtools-extension.md:265

• [nitpick] The file panel.html is listed in line 265 as 'Updated in Step 3' but it was previously mentioned in line 161 as 'Added in Step 2'. While it is being updated in Step 3 (a script tag is added), consider clarifying the description to indicate it's being updated rather than created, to maintain consistency with how devtools.js is described.

* `panel.html` - Updated in Step 3.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[mikehoffms]

Related PRs:

• Break out "Custom DevTools sample" from "Create DevTools extension" #3616 - Docs repo
• Delete per-phase dirs from /devtools-extension/ MicrosoftEdge/Demos#106 - Demos repo

Does the present PR imply changing code in Demos repo?

[MichelLaplane]

Yes I believe so

[learn-build-service-prod]

Learn Build status updates of commit 84e3845:

✅ Validation status: passed

File	Status	Preview URL	Details
microsoft-edge/extensions/developer-guide/devtools-extension.md	✅Succeeded	View

For more details, please refer to the build report.

[learn-build-service-prod]

Learn Build status updates of commit fe019ff:

✅ Validation status: passed

File	Status	Preview URL	Details
microsoft-edge/extensions/developer-guide/devtools-extension.md	✅Succeeded	View

For more details, please refer to the build report.

[learn-build-service-prod]

PoliCheck Scan Report

The following report lists PoliCheck issues in PR files. Before you merge the PR, you must fix all severity-1 and severity-2 issues. The AI Review Details column lists suggestions for either removing or replacing the terms. If you find a false positive result, mention it in a PR comment and include this text: #policheck-false-positive. This feedback helps reduce false positives in future scans.

✅ No issues found

More information about PoliCheck

Information: PoliCheck | Severity Guidance | Term
For any questions: Try searching the learn.microsoft.com contributor guides or post your question in the Learn support channel.

[captainbrosset]

@MichelLaplane thank you very much for proposing these changes. Could you please propose them on our Demos repo instead though? Going through the Demos would allow us to more easily verify and test your changes and then merge them.

Demos repo: https://github.com/MicrosoftEdge/Demos
Code should be added in https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension

It would also be easier if you did this after MicrosoftEdge/Demos#106 has been merged since the code will be much simpler at that point.

Thanks again.

[MichelLaplane]

Hi captainbrosset, How can I do that ? The same modification should be made to the sample 4 as panel.onShown event is never fired in the devtool.js. Regards. Michel Laplane Michel Laplane (MVP Office Apps & Services - Visio) 40, Route d’Autun 71640 Dracy Le Fort (+33)6 84 52 49 29 ***@***.******@***.***> www.visualblog.fr<http://www.visualblog.fr/> www.sharevisual.com<http://www.sharevisual.com> From: Patrick Brosset ***@***.***> Sent: Friday, November 7, 2025 5:46 PM To: MicrosoftDocs/edge-developer ***@***.***> Cc: MichelLaplane ***@***.***>; Mention ***@***.***> Subject: Re: [MicrosoftDocs/edge-developer] Implement memory polling in DevTools extension (PR #3628) [https://avatars.githubusercontent.com/u/1152698?s=20&v=4]captainbrosset left a comment (MicrosoftDocs/edge-developer#3628)<#3628 (comment)> @MichelLaplane<https://github.com/MichelLaplane> thank you very much for proposing these changes. Could you please propose them on our Demos repo instead though? Going through the Demos would allow us to more easily verify and test your changes and then merge them. Demos repo: https://github.com/MicrosoftEdge/Demos Code should be added in https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension It would also be easier if you did this after MicrosoftEdge/Demos#106<MicrosoftEdge/Demos#106> has been merged since the code will be much simpler at that point. Thanks again. — Reply to this email directly, view it on GitHub<#3628 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ADTQWG6WKN2BJSO3JEWEXUD33TEDVAVCNFSM6AAAAACLIKA4JCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTKMBTGYYDKMJWGU>. You are receiving this because you were mentioned.Message ID: ***@***.******@***.***>>

[mikehoffms]

1. Wait for PR 106 Delete per-phase dirs from /devtools-extension/ MicrosoftEdge/Demos#106 to be closed/merged.

   Then the /Demos/devtools-extension/ directory will no longer contain the 4 subdirs /sample 1/ through /sample 4/, but will directly contain all of the code for both the /sample 3/ and /sample 4/ versions of the sample.

2. Fork & clone the Demos repo https://github.com/MicrosoftEdge/Demos.

3. Create and switch to a working branch.

4. Modify the code that's directly in /Demos/devtools-extension/.

5. Commit & push.

6. Create a PR.

Before PR 106 is merged, if you want to get started, you could do the above steps and modify the code in the /Demos/devtools-extension/sample 3/ and possibly also the /Demos/devtools-extension/sample 4/ folder. If you want, you could immediately create a PR that way, in that folder; then later we could apply the same change to the post-PR 106 code.

This is not a guarantee that the proposed code change will be made, in this demo. Creating a PR in the Demos repo will clearly submit that proposed change for review, as opposed to modifying code within the context of the article in the Docs repo, which is not reliably complete or clear about what the proposed change is.

@MichelLaplane