The case

When developing web parts with SharePoint Framework (SPFx) you use the workbench both locally and online on a SharePoint site (/_layouts/15/workbench.aspx) to test and debug. Sometimes the workbench is limiting because differences in layout (canvas width), use of theme colors, etc. We would therefore like to be able to test and debug the web part on a real modern page without having to package and deploy the web part.

The Solution

The solution is to use the same approach as when we are debugging SharePoint Framework Extensions: we use the loadSPFX and debugManifestFile query parameters:

• Start the debugging session (gulp serve –nobrowser)
• Navigate to the page where you will test the web part
• Append the following to the URL in the browser and reload:
• loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js
• A popup appears, click the “Allow debug scripts”:

Now, you can click Edit to edit the modern page and your web part will be available to choose in the web part picker (in this case a web part called “NewsList”):