spfx-fast-serve-helpers 1.18.10 broke debugging/breakpoints in VS Code

[kbeeveer46]

When I upgraded to spfx-fast-serve-helpers 1.18.10 my webpart breakpoints are never hit. When I downgrade to 1.18.9 it works fine.

I'm still a little confused on what version of fast serve helpers I should be using. Should I be using 1.18.0 or 1.18.X (where X is the latest) if my project is running SPFx 1.18.2?

Let me know if you need any other info. I'm using VS Code 1.87.0.

Launch file

{
            "name": "Chrome Hosted workbench",
            "type": "chrome",
            "request": "launch",
            "url": "https://xxxxxx.sharepoint.com/sites/ClientPortalQA/_layouts/workbench.aspx?debug=true&noredir=true&debugManifestsFile=https://localhost:4321/temp/manifests.js",
            "webRoot": "${workspaceRoot}",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:///.././src/*": "${webRoot}/src/*",
                "webpack:///../../../src/*": "${webRoot}/src/*",
                "webpack:///../../../../src/*": "${webRoot}/src/*",
                "webpack:///../../../../../src/*": "${webRoot}/src/*"
            },
            "runtimeArgs": [
                "--remote-debugging-port=9222"
            ],
            "skipFiles": [
                "<node_internals>/**",
                "${webRoot}/node_modules/**/*.js"
            ],
            "resolveSourceMapLocations": [
                "${workspaceFolder}/**",
                "!**/node_modules/**"
            ]
        }

[s-KaiNet]

It works for me with just the default launch.json created by SPFx 1.18.2:

{
  /**
   * Install Chrome Debugger Extension for Visual Studio Code to debug your components with the
   * Chrome browser: https://aka.ms/spfx-debugger-extensions
   */
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Hosted workbench",
      "type": "chrome",
      "request": "launch",
      "url": "https://sp.sharepoint.com/_layouts/workbench.aspx",
      "webRoot": "${workspaceRoot}",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///.././src/*": "${webRoot}/src/*",
        "webpack:///../../../src/*": "${webRoot}/src/*",
        "webpack:///../../../../src/*": "${webRoot}/src/*",
        "webpack:///../../../../../src/*": "${webRoot}/src/*"
      },
      "runtimeArgs": [
        "--remote-debugging-port=9222"
      ]
    }
  ]
}

You have some additional skipFiles and resolveSourceMapLocations - try to remove them.

When it comes to versions, the latest 1.18.x should be installed, meaning 1.18.10. Thus, by default spfx-fast-serve adds dependency with a tilde ~. Tilde ensures that the latest patch version is installed upon npm install.

[kbeeveer46]

I went back to .10 and tried that launch file using npm run serve but no luck. I also tried gulp serve with that file and it works. When I use gulp serve with my original file the break points do not work. The reason I need resolveSourceMapLocations is because I get the errors below. I'm not sure what they mean but that code makes them go away.

The weird thing is that version .9 works but .10 doesn't using my version of the launch file. I just downgraded to .9 again to triple check and it works fine. I'll keep playing around with it and see what I can find.

[s-KaiNet]

I found some differences in source maps behavior between .9 and .10 version, so will take a closer look. Meanwhile I recomend you to stick with .9 for a while.

[s-KaiNet]

@kbeeveer46 could you install .11 - npm i spfx-fast-serve-helpers@1.18.11 -DE and check if the issue is fixed for you?

[kbeeveer46]

@s-KaiNet I upgraded to 11 and it works! I tested both Chrome and Edge using my original launch file and it stopped on the breakpoint.

[s-KaiNet]

Great! Issue resolved then :)

[heinrich-ulbricht]

@s-KaiNet I am struggling with not all breakpoints being hit for some time now and finally had the idea to try it without spfx-fast-serve. This resolved the issue.

I'm wondering if there are leftover issues.

I'm on version 1.18.13 and have a SPFx solution that contains one app customizer and one web part which share .ts files.

Breakpoints that are in the web part .ts file are hit, when web part code runs. Breakpoints triggered by the app customizer code are hit as well.

But one type of breakpoint is not hit: when web part code runs that uses .ts files that are shared between the customizer and the web part (and are located outside the webparts folder), breakpoints in the shared file are not hit. In this case I get a dreaded "source not found" error for the shared .ts file. Running without spfx-fast-serve makes the breakpoints work, without any changes to the launch.json.

I just wanted to throw it out here to see if you have thoughts on that. Any ideas are appreciated.