Debugging SPFX Web Part With VS Code Issue.

Question

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

dave walker · Answer

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

deleted · Answer

Did you load all packages? Maybe a good point to start is the website of https://blog.mastykarz.nl/tag/sharepoint-framework/ or the https://developer.microsoft.com/en-us/office/blogs/getting-started-with-sharepoint-framework-tutorials/ site

phil harding · Answer

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.