Debugging extensions

Debugging SPFx extensions is slightly different from Web Parts, as they can’t be tested on the hosted workbench page. They must be tested on a real modern page context on a SharePoint site using a specific URL format dictated by SPFx.

Because extensions don’t have a property bag like Web Part, any configuration they rely on must be passed through that URL via a query string parameter (such as a specific property’s value you would normally use when registering the extension in the site).

When you create or add an extension to an SPFx project, a config/serve.json file is created like this:

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json",
  "port": 4321,
  "https": true,
  "serveConfigurations": {
    "default": {
      "pageUrl"...