Skip to content
Merged
20 changes: 15 additions & 5 deletions docs/spfx/debug-modern-pages.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
---
title: Debug SharePoint Framework solutions on modern SharePoint pages
description: Guidance on how to debug SharePoint Framework solutions on modern SharePoint pages
ms.date: 04/26/2025
ms.date: 11/14/2025
ms.localizationpriority: high
---
# Debug SharePoint Framework solutions on modern SharePoint pages

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

> [!IMPORTANT]
> 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.
> 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.

## Debug SharePoint Framework extensions on modern SharePoint pages

Expand Down Expand Up @@ -55,7 +55,7 @@ When you add a new SharePoint Framework extension to your project, the SharePoin
}
```

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

```console
gulp serve --config=<name>
Expand All @@ -67,7 +67,7 @@ For example:
gulp serve --config=helloWorld
```

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

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

Expand Down Expand Up @@ -121,6 +121,15 @@ https://contoso.sharepoint.com/sites/team-a/sitepages/news.aspx
> [!NOTE]
> 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`.

> [!NOTE]
> Starting with **Chromium 141**, browsers such as **Microsoft Edge** and **Google Chrome** enforce a new security model called **Local Network Access**.
>
> When debugging SPFx solutions, SharePoint Online must load resources from your local development environment (such as `https://localhost:4321`).
>
> When prompted with **“Allow this site to access devices on your local network?”**, you must select **Allow** in Edge or Chrome.
>
> If permission is denied, SPFx debug manifests and bundles cannot load, and the web part will fail during debugging.

The following are the query string parameters that you need to add:

| Parameter | Description |
Expand Down Expand Up @@ -326,3 +335,4 @@ This approach should only be used when you're in development mode. If you deploy
- [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/)
- [Yeoman generator for the SharePoint Framework](yeoman-generator-for-spfx-intro.md)
- [SharePoint Framework Overview](sharepoint-framework-overview.md)