Cannot debug SPfx application

[Marco-Mauri]

I cannot debug a SPfx application using firefox.

Step to reproduce

1. Create a new SPfx app as explained at this url: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part
2. Add a firefox configuration to the launch.json of the app
3. Start debugging

Any breakpoints that I add is never resolved, they are all grey. I tried to solve this problem by adding some pathMappings , but I wasn't able to.

[hbenl]

It works for me. Here's what I did:

I created a new SPfx app with these settings:

? What is your solution name? sharepoint-webpart
? Which baseline packages do you want to target for your component(s)? SharePoint Online only (latest)
? Where do you want to place the files? Use the current folder
? Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps in sites? No
? Which type of client-side component to create? WebPart
? What is your Web part name? HelloWorld
? What is your Web part description? HelloWorld description
? Which framework would you like to use? No JavaScript framework

Then I added this to my launch.json (as you can see, no pathMappings are necessary here):

    {
      "type": "firefox",
      "request": "launch",
      "reAttach": true,
      "name": "Firefox",
      "url": "https://localhost:4321/temp/workbench.html",
      "webRoot": "${workspaceFolder}"
    }

Then I set a breakpoint in src/webparts/helloWorld/HelloWorldWebPart.ts and start the debugger.
At first, the breakpoint remains grey, but that's because the script hasn't been loaded by the browser yet. As soon as I add a HelloWorld webpart in the browser (by clicking on the + button and then on HelloWorld), the breakpoint turns red. I was also able to hit the breakpoint.

[Marco-Mauri]

I've just created a new project replicating exactly your steps (including the name of the project), and I encountered the same problem: the breakpoint is always grey.

I'm using firefox 59 64 bit on windows 10, in case this makes any difference.

In any case thank you for your quick reply.

[hbenl]

How are you deploying the project? I used gulp serve.

[Marco-Mauri]

Yes, I'm using gulp serve. I wait for the site to load completely and then start the debugging inside VS Code.

[hbenl]

OK, I could reproduce it now, this bug only occurs on Windows and I guess it's related to microsoft/vscode#43959. I'll try to fix it over the weekend.

[hbenl]

Fixed in version 1.1.3

[Marco-Mauri]

I only wanted to thank you for your quick work.