When debugging a SPFX Field Customizer Solution using VS Code, I cannot get the breakpoints to hit in the IDE. If I open the dev tools in the browser, I am able to put in breakpoints in the code and get them to hit, but not in the VSCode IDE.
In contrast, when I debug a WebPart using the hosted workbench, I am able to get the breakpoints to hit correctly in the VS Code IDE.
Here is what I am doing:
- Create Simple Hello World Field Customizer from the MS guidance here.
- Create the test list in my tenant.
- run gulp serve --nobrowser
- Put a breakpoint in the render method and then start debug from VSCode using the following config: { "name": "FieldCustomizer debug", "type": "chrome", "request": "launch", "url": "https://testtenant.sharepoint.com/Lists/Orders/AllItems.aspx?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&fieldCustomizers={"Percent":{"id":"myGUID","properties":{"prop1":"val1"}}}", "webRoot": "", "sourceMaps": true, "resolveSourceMapLocations": [ "${workspaceFolder}/", "!/node_modules/**" ], "sourceMapPathOverrides": { "webpack:///../../../src/": "/src/", "webpack:///../../../../src/": "/src/", "webpack:///../../../../../src/": "/src/" }, "runtimeArgs": [ "--remote-debugging-port=9222" ] }
Breakpoint is not hit but field customizer correctly renders in a new instance of chrome after allowing loading of scripts. Same issue in Edge.
