Debugging SharePoint Framework Extensions in FireFox and VS Code

Quickly jotting down my notes on how to debug SpFx extensions with FireFox & Code. This probably applies to SpFx web parts as well.

Install FireFox the Debug Adapter

The Microsoft instructions for debugging using Chrome are pretty much in play here, the only difference is you'll be installing the FireFox debugging adapter extension rather than the Chrome extension, and using a different configuration schema.

The FireFox debug adapter has fantastic documentation - https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-firefox-debug

Updated Configuration launch.json

The schema for launch.json looks something like this. Make sure to update the URL string to point to your tenant, with the proper manifest ID for your extension

{
    // Use IntelliSense to learn about possible Node.js debug attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "firefox",
            "request": "launch",
            "reAttach": true,
            "name": "Launch localhost",
            "webRoot": "${workspaceRoot}",
            "url": "<URL to SharePoint modern site>?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={%228d46551f-0397-446d-8efd-c83f8bae3965%22:{%22location%22:%22ClientSideExtension.ApplicationCustomizer%22,%22properties%22:{%22testMessage%22:%22Hello%20as%20property!%22}}}",
            "sourceMaps": "client",
            "pathMappings": [
                {
                    "url": "webpack:///",
                    "path": "${webRoot}/"
                }
            ],
            "port": 9222
        }
    ]
}

Make sure to update the URL string to point to your tenant, with the proper manifest ID for your extension

Reach out in the comments if you're still having trouble getting it to work.