Debugging SPFX Web Part With VS Code Issue.

[Dave Walker]

Hi there, I'm new to SPFX development 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.

1. I create a basic Hello-World web part by selecting "web part" from the Yoeman generator.

2. I set a break point on line 19 which is the first line of the render function

3. In the VS Code terminal I type "gulp server --nobrowser"

4. I then hit F5 to enter debug mode

5. A new Chrome browser comes up. PROBLEM: The page is complete blank with no workbench functionality

6. 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 appreciated.

Thank you,
Dave Walker
Solution Architect

[#2]

Did you load all packages? Maybe a good point to start is the website of Waldek Mastykarz or the pnp site

[#3]

The problem seems to be that the "gulp serve --nobrowser" task doesn't create the contents of the "workbench-packages" folder, like the "gulp serve" task does.

[#4]

Hi Phil, so I tried "gulp serve" from the terminal instead of "gulp server --nobrowser" so that the packages load.  Gulp serve opens a workbench instance which I close.  I then start the debugger which brings up a new workbench instance.  I drop the web part on the page and hit refresh, but the break point doesn't activate.  Any ideas? 

Dave

[#5]

Paul, I'm precisely following the steps provided here:

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-p...

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/debug-in-vscode

I've been through these steps a few times. 

[#6]

Exactly what I tried with the same results, also tried the same steps as yourself 😞

[#7]

Thanks for confirming Phil.  I've tried this in a couple of environments with the same results.  It's clear now that they've changed something without updating the documentation.  

[#8]

See Andrew Connells reply for the fix to this issue;

https://github.com/SharePoint/sp-dev-docs/issues/2831#issuecomment-441995248