Skip to content

Commit 9523583

Browse files
Add Local Network Access guidance for SPFx debug scenarios in Edge/Chrome (Chromium 141) (#10478)
* manifests.js file path reference updated * typo & grammatical fixes * typos & grammatical fixes * remove dupe note * remote dupe note * rephrase note * fix auto-finding: incorrect indentation * fix auto-finding: incorrect markdown indentation * Add Local Network Access guidance for SPFx debug scenarios in Edge/Chrome (Chromium 141) * markdown format edits --------- Co-authored-by: Andrew Connell <[email protected]>
1 parent 0697611 commit 9523583

File tree

1 file changed

+15
-5
lines changed

1 file changed

+15
-5
lines changed

docs/spfx/debug-modern-pages.md

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
---
22
title: Debug SharePoint Framework solutions on modern SharePoint pages
33
description: Guidance on how to debug SharePoint Framework solutions on modern SharePoint pages
4-
ms.date: 04/26/2025
4+
ms.date: 11/14/2025
55
ms.localizationpriority: high
66
---
77
# Debug SharePoint Framework solutions on modern SharePoint pages
88

9-
When building SharePoint Framework solutions, you can test them on modern SharePoint pages. For building SharePoint Framework extensions, testing on modern pages is the only option, since at this moment the SharePoint Workbench doesn't support loading extensions. Testing on modern pages can however be also used for debugging web parts, where it offers developers additional value.
9+
When building SharePoint Framework solutions, you can test them on modern SharePoint pages. For building SharePoint Framework extensions, testing on modern pages is the only option, since at this moment the SharePoint Workbench doesn't support loading extensions. Testing on modern pages can be used for debugging web parts, where it offers developers additional value.
1010

1111
> [!IMPORTANT]
12-
> While there are no technical restrictions for debugging local SharePoint Framework solutions on modern SharePoint pages, you should be careful when using it in your production tenant. This capability allows you to execute code that hasn't been tested and verified against your organization's policies and could be harmful to your production data.
12+
> While there are no technical restrictions for debugging local SharePoint Framework solutions on modern SharePoint pages, you should be careful when using them in your production tenant. This capability allows you to execute code that hasn't been tested and verified against your organization's policies and could be harmful to your production data.
1313
1414
## Debug SharePoint Framework extensions on modern SharePoint pages
1515

@@ -55,7 +55,7 @@ When you add a new SharePoint Framework extension to your project, the SharePoin
5555
}
5656
```
5757

58-
Next to the default configuration, the SharePoint Framework Yeoman generator will create an entry for each extension that you add to your project. Each entry contains a URL of the modern page that should be used to test the particular extension, the list of extensions that should be loaded and for each extension, the list of properties that should be set on them. To use the particular **serve** configuration, execute in the command line:
58+
Next to the default configuration, the SharePoint Framework Yeoman generator will create an entry for each extension that you add to your project. Each entry contains a URL of the modern page that should be used to test the particular extension, the list of extensions that should be loaded, and for each extension, the list of properties that should be set on them. To use the particular **serve** configuration, execute in the command line:
5959

6060
```console
6161
gulp serve --config=<name>
@@ -67,7 +67,7 @@ For example:
6767
gulp serve --config=helloWorld
6868
```
6969

70-
After running this command, gulp will start your web browser with the modern page specified in your configuration. The page will show a pop-up asking you to confirm that you now will be loading debug scripts.
70+
After running this command, gulp will start your web browser with the modern page specified in your configuration. The page will show a pop-up asking you to confirm that you will now be loading debug scripts.
7171

7272
![Popup to confirm loading debug scripts on a modern page in SharePoint Online](../images/ext-com-accept-debug-scripts.png)
7373

@@ -121,6 +121,15 @@ https://contoso.sharepoint.com/sites/team-a/sitepages/news.aspx
121121
> [!NOTE]
122122
> The development URL was changed in the SPFx v1.21 release from `https://localhost:4321/temp/manifests.js` to `https://localhost:4321/temp/build/manifests.js`.
123123
124+
> [!NOTE]
125+
> Starting with **Chromium 141**, browsers such as **Microsoft Edge** and **Google Chrome** enforce a new security model called **Local Network Access**.
126+
>
127+
> When debugging SPFx solutions, SharePoint Online must load resources from your local development environment (such as `https://localhost:4321`).
128+
>
129+
> When prompted with **“Allow this site to access devices on your local network?”**, you must select **Allow** in Edge or Chrome.
130+
>
131+
> If permission is denied, SPFx debug manifests and bundles cannot load, and the web part will fail during debugging.
132+
124133
The following are the query string parameters that you need to add:
125134

126135
| Parameter | Description |
@@ -326,3 +335,4 @@ This approach should only be used when you're in development mode. If you deploy
326335
- [Testing and debugging your SPFx solutions in production without causing any impact (Elio Struyf)](https://www.eliostruyf.com/testing-and-debugging-your-spfx-solutions-in-production-without-causing-any-impact/)
327336
- [Yeoman generator for the SharePoint Framework](yeoman-generator-for-spfx-intro.md)
328337
- [SharePoint Framework Overview](sharepoint-framework-overview.md)
338+

0 commit comments

Comments
 (0)