You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/spfx/debug-modern-pages.md
+15-5Lines changed: 15 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,15 +1,15 @@
1
1
---
2
2
title: Debug SharePoint Framework solutions on modern SharePoint pages
3
3
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
5
5
ms.localizationpriority: high
6
6
---
7
7
# Debug SharePoint Framework solutions on modern SharePoint pages
8
8
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.
10
10
11
11
> [!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.
13
13
14
14
## Debug SharePoint Framework extensions on modern SharePoint pages
15
15
@@ -55,7 +55,7 @@ When you add a new SharePoint Framework extension to your project, the SharePoin
55
55
}
56
56
```
57
57
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:
59
59
60
60
```console
61
61
gulp serve --config=<name>
@@ -67,7 +67,7 @@ For example:
67
67
gulp serve --config=helloWorld
68
68
```
69
69
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.
71
71
72
72

> 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`.
123
123
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
+
124
133
The following are the query string parameters that you need to add:
125
134
126
135
| Parameter | Description |
@@ -326,3 +335,4 @@ This approach should only be used when you're in development mode. If you deploy
326
335
-[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/)
327
336
-[Yeoman generator for the SharePoint Framework](yeoman-generator-for-spfx-intro.md)
0 commit comments