Test SPFx web parts on modern page directly

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s