Skip to content

debug manifests.js file path reference updated #10209

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

debug manifests.js file path reference updated #10209

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions docs/spfx/debug-in-vscode.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Debug SharePoint Framework solutions in Visual Studio Code
description: Prerequisites and steps for configuring Visual Studio Code for debugging SharePoint Framework solutions.
ms.date: 07/15/2022
ms.date: 04/26/2025
ms.localizationpriority: high
---
# Debug SharePoint Framework solutions in Visual Studio Code
Expand Down Expand Up @@ -116,7 +116,7 @@ Debugging an Extension in a hosted workbench is similar to the steps for a Web P

```json
?loadSPFX=true
&debugManifestsFile=https://localhost:4321/temp/manifests.js
&debugManifestsFile=https://localhost:4321/temp/build/manifests.js
&customActions={"e5625e23-5c5a-4007-a335-e6c2c3afa485":{
"location":"ClientSideExtension.ApplicationCustomizer",
"properties":{
Expand All @@ -125,6 +125,9 @@ Debugging an Extension in a hosted workbench is similar to the steps for a Web P
}}
```

> [!NOTE]
> Debug query string was changed starting from the SPFx verson 1.21 from `https://localhost:4321/temp/manifests.js` to `https://localhost:4321/temp/build/manifests.js`

More detail about the URL parameters:

- **loadSPFX=true**: Ensures that the SharePoint Framework is loaded on the page. For performance reasons, the framework does not load unless at least one extension is registered. Because no components are registered, you must explicitly load the framework.
Expand All @@ -142,7 +145,7 @@ Debugging an Extension in a hosted workbench is similar to the steps for a Web P
```json
https://contoso.sharepoint.com/Lists/Contoso/AllItems.aspx
?loadSPFX=true
&debugManifestsFile=https://localhost:4321/temp/manifests.js
&debugManifestsFile=https://localhost:4321/temp/build/manifests.js
&customActions={"e5625e23-5c5a-4007-a335-e6c2c3afa485":{
"location":"ClientSideExtension.ApplicationCustomizer",
"properties":{
Expand All @@ -151,6 +154,9 @@ Debugging an Extension in a hosted workbench is similar to the steps for a Web P
}}
```

> [!NOTE]
> Debug query string was changed starting from the SPFx verson 1.21 from `https://localhost:4321/temp/manifests.js` to `https://localhost:4321/temp/build/manifests.js`

1. Select **Load debug scripts** to continue loading scripts from your local host.

![Allow Debug Manifest question from the page](../images/ext-app-debug-manifest-message.png)
Expand Down
37 changes: 28 additions & 9 deletions docs/spfx/debug-modern-pages.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Debug SharePoint Framework solutions on modern SharePoint pages
description: Guidance on how to debug SharePoint Framework solutions on modern SharePoint pages
ms.date: 12/14/2023
ms.date: 04/26/2025
ms.localizationpriority: high
---
# Debug SharePoint Framework solutions on modern SharePoint pages
Expand Down Expand Up @@ -96,7 +96,7 @@ To debug an Application Customizer, add the following to the URL of your modern

```json
?loadSPFX=true
&debugManifestsFile=https://localhost:4321/temp/manifests.js
&debugManifestsFile=https://localhost:4321/temp/build/manifests.js
&customActions={"<extensionId>":{
"location":"<extensionType>",
"properties":<propertiesJSON>
Expand All @@ -108,7 +108,7 @@ For example:
```text
https://contoso.sharepoint.com/sites/team-a/sitepages/news.aspx
?loadSPFX=true
&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={
&debugManifestsFile=https://localhost:4321/temp/build/manifests.js&customActions={
"e5625e23-5c5a-4007-a335-e6c2c3afa485":{
"location":"ClientSideExtension.ApplicationCustomizer",
"properties":{
Expand All @@ -118,6 +118,10 @@ https://contoso.sharepoint.com/sites/team-a/sitepages/news.aspx
}
```

> [!NOTE]
> Debug query string was changed starting from the SPFx verson 1.21 from `https://localhost:4321/temp/manifests.js` to `https://localhost:4321/temp/build/manifests.js`


Following are the query string parameters that you need to add:

| Parameter | Description |
Expand Down Expand Up @@ -149,7 +153,7 @@ To debug a field customizer, add the following to the URL of your modern page:

```json
?loadSPFX=true
&debugManifestsFile=https://localhost:4321/temp/manifests.js&fieldCustomizers={
&debugManifestsFile=https://localhost:4321/temp/build/manifests.js&fieldCustomizers={
"<fieldName>":{
"id":"<fieldCustomizerId>",
"properties":<propertiesJSON>
Expand All @@ -162,7 +166,7 @@ For example:
```text
https://contoso.sharepoint.com/sites/team-a/Lists/Orders/AllItems.aspx
?loadSPFX=true
&debugManifestsFile=https://localhost:4321/temp/manifests.js
&debugManifestsFile=https://localhost:4321/temp/build/manifests.js
&fieldCustomizers={
"Percent":{
"id":"45a1d299-990d-4917-ba62-7cb67158be16",
Expand All @@ -173,6 +177,11 @@ https://contoso.sharepoint.com/sites/team-a/Lists/Orders/AllItems.aspx
}
```


> [!NOTE]
> Debug query string was changed starting from the SPFx verson 1.21 from `https://localhost:4321/temp/manifests.js` to `https://localhost:4321/temp/build/manifests.js`


Following are the query string parameters that you need to add:

|Parameter |Description |
Expand Down Expand Up @@ -204,7 +213,7 @@ To debug a list view command set, add the following to the URL of your modern pa

```json
?loadSPFX=true
&debugManifestsFile=https://localhost:4321/temp/manifests.js
&debugManifestsFile=https://localhost:4321/temp/build/manifests.js
&customActions={"<extensionId>":{
"location":"<extensionType>",
"properties":<propertiesJSON>
Expand All @@ -216,7 +225,7 @@ For example:
```text
https://contoso.sharepoint.com/sites/team-a/Lists/Orders/AllItems.aspx
?loadSPFX=true
&debugManifestsFile=https://localhost:4321/temp/manifests.js
&debugManifestsFile=https://localhost:4321/temp/build/manifests.js
&customActions={"a8047e2f-30d5-40fc-b880-b2890c7c16d6":{
"location":"ClientSideExtension.ListViewCommandSet.CommandBar",
"properties":{
Expand All @@ -226,6 +235,11 @@ https://contoso.sharepoint.com/sites/team-a/Lists/Orders/AllItems.aspx
}}
```


> [!NOTE]
> Debug query string was changed starting from the SPFx verson 1.21 from `https://localhost:4321/temp/manifests.js` to `https://localhost:4321/temp/build/manifests.js`


Following are the query string parameters that you need to add:

| Parameter | Description |
Expand Down Expand Up @@ -259,7 +273,7 @@ gulp serve --nobrowser
Next, in the web browser, navigate to the modern page, on which you want to test the web parts. After the page loaded, add the following to the URL:

```text
?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js
?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/build/manifests.js
```

For example:
Expand All @@ -270,9 +284,14 @@ For example:
```text
https://contoso.sharepoint.com/sites/team-a/sitepages/news.aspx
?loadSPFX=true
&debugManifestsFile=https://localhost:4321/temp/manifests.js
&debugManifestsFile=https://localhost:4321/temp/build/manifests.js
```


> [!NOTE]
> Debug query string was changed starting from the SPFx verson 1.21 from `https://localhost:4321/temp/manifests.js` to `https://localhost:4321/temp/build/manifests.js`


The page will reload and show a popup asking you to confirm that you now will 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
9 changes: 7 additions & 2 deletions docs/spfx/extensions/guidance/migrate-from-ecb-to-spfx-extensions.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Tutorial - Migrating from Edit Control Block (ECB) menu item to SharePoint Framework Extension
description: Migrate from old "classic" customizations (ECB) to the new model based on SharePoint Framework extensions.
ms.date: 06/13/2022
ms.date: 04/26/2025
ms.localizationpriority: medium
---

Expand Down Expand Up @@ -198,9 +198,14 @@ To reproduce the same behavior of the ECB menu item built by using the SharePoin
1. Open your favorite browser and go to a "modern" library of any "modern" team site. Append the following query string parameters to the **AllItems.aspx** page URL.

```html
?loadSpfx=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"6c5b8ee9-43ba-4cdf-a106-04857c8307be":{"location":"ClientSideExtension.ListViewCommandSet.ContextMenu","properties":{"targetUrl":"ShowDetail.aspx"}}}
?loadSpfx=true&debugManifestsFile=https://localhost:4321/temp/build/manifests.js&customActions={"6c5b8ee9-43ba-4cdf-a106-04857c8307be":{"location":"ClientSideExtension.ListViewCommandSet.ContextMenu","properties":{"targetUrl":"ShowDetail.aspx"}}}
```


> [!NOTE]
> Debug query string was changed starting from the SPFx verson 1.21 from `https://localhost:4321/temp/manifests.js` to `https://localhost:4321/temp/build/manifests.js`


In the previous query string, replace the GUID with the `id` value you saved from the **CustomEcbCommandSet.manifest.json** file.

Moreover, there's a `location` property that assumes the value of **ClientSideExtension.ListViewCommandSet.ContextMenu**, which instructs SPFx to render the Command Set as an ECB menu item. Following are all the options for the `location` property:
Expand Down
4 changes: 2 additions & 2 deletions docs/spfx/extensions/guidance/migrate-from-jslink-to-spfx-extensions.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Tutorial - Migrating from JSLink to SharePoint Framework extensions
description: Migrate from old "classic" customizations (JSLink) to the new model based on SharePoint Framework extensions.
ms.date: 06/13/2022
ms.date: 04/26/2025
ms.localizationpriority: high
---
# Migrating from JSLink to SharePoint Framework extensions
Expand Down Expand Up @@ -244,7 +244,7 @@ To reproduce the same behavior of the `JSLink` custom field rendering, you need
1. Open your favorite browser, and go to a "modern" list, which has a custom field with the name **Color** and the type **Choice** with the same value options as before (Red, Green, Blue, Yellow). You can eventually use the list you created in the "classic" site, just viewing it with the new "modern" experience. Now, append the following query string parameters to the **AllItems.aspx** page URL.

```http
?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&fieldCustomizers={"Color":{"id":"c3070978-d85e-4298-8758-70b5b5933076"}}
?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/build/manifests.js&fieldCustomizers={"Color":{"id":"c3070978-d85e-4298-8758-70b5b5933076"}}
```

In this query string, replace the GUID with the `id` value you saved from the **CustomColorFieldFieldCustomizer.manifest.json** file, and the **Color** property name refers to the name of the field to customize. If you like, you can also provide a custom configuration object, serialized in JSON format, as an additional parameter for the field customizer construction.
Expand Down
9 changes: 7 additions & 2 deletions docs/spfx/extensions/guidance/migrate-from-usercustomactions-to-spfx-extensions.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Tutorial - Migrating from UserCustomAction to SharePoint Framework extensions
description: Migrate from old "classic" customizations (CustomAction) to the new model based on SharePoint Framework extensions.
ms.date: 06/13/2022
ms.date: 04/26/2025
ms.localizationpriority: medium
---

Expand Down Expand Up @@ -326,9 +326,14 @@ The UI elements of the custom footer are rendered using React and a custom React
1. Now open your favorite browser and go to a "modern" page of any "modern" team site. Now, append the following query string parameters to the page's URL.

```html
?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"82242bbb-f951-4c71-a978-80eb8f35e4c1":{"location":"ClientSideExtension.ApplicationCustomizer"}}
?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/build/manifests.js&customActions={"82242bbb-f951-4c71-a978-80eb8f35e4c1":{"location":"ClientSideExtension.ApplicationCustomizer"}}
```


> [!NOTE]
> Debug query string was changed starting from the SPFx verson 1.21 from `https://localhost:4321/temp/manifests.js` to `https://localhost:4321/temp/build/manifests.js`


In this query string, replace the GUID with the `id` value you saved from the **CustomFooterApplicationCustomizer.manifest.json** file.

Notice that when executing the page request, you're prompted with a warning message box with the title "Allow debug scripts?", which asks your consent to run code from localhost for security reasons. If you want to locally debug and test the solution, you have to allow it to "Load debug scripts."
Expand Down