Debugging SPFX in VS Code Issue

Question

Hi there, I'm new to SPFX and I'm attempting to debug using VS Code, but it's not working. I'm following the MS documentation as well as the PnP guidance.  Here's the steps I'm following and the error I'm seeing.  

1. In VS Code I installed the "Debugger for Chrome" extension.
2. I create a basic Hello-World web part by selecting "web part" from the Yoeman generator.
3. I set a break point on line 19 which is the first line of the render function
4. In the VS Code terminal I type "gulp server --nobrowser"
5. I then hit F5 to enter debug mode
6. A new Chrome browser comes up.  PROBLEM: The page is complete blank with no workbench functionality
7. In the debug console I see the following errors:

Failed to load resource: the server responded with a status of 404 (Not Found) [https://localhost:4321/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_default.js]

Failed to load resource: the server responded with a status of 404 (Not Found) [https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/lib/api/workbenchInit.js]

Failed to load resource: the server responded with a status of 404 (Not Found) [https://localhost:4321/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_default.js]

Failed to load resource: the server responded with a status of 404 (Not Found) [https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/lib/api/workbenchInit.js]

TypeError: Cannot read property 'start' of undefined

workbench.html:69

    at d:\Projects\Sandbox\SPFX\tutorials\helloworld-webpart-2\temp\workbench.html:69:30

Failed to load resource: the server responded with a status of 404 (Not Found) [https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/lib/api/assets/server-icon.png]

Any information about how to resolve this is greatly apprecation.

Thank you,

Dave Walker

Solution Architect

Answer 1

Hi Dave, 

Still no luck with this?

How developers have managed to do work with SPFX?

I am having the same issue.

Answer 2

Hi Amit, not yet unfortunately.  However,  following the same steps, but using the "debugger" statement on a line of code instead of a break point allows you to step into the code. This is what I have been using as a workaround for now.

Dave

Answer 3

Hi Dave

Did you find any solution for this issue. I too have the same issue and not able to find any solution.

Thanks,

Amit