I am unable to debug with VS Code, node.js & SPFx

Question

I completed the HelloWorld webpart in https://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/build-a-hello-world-web-part, and enhanced that webpart to connect to SharePoint following https://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/connect-to-sharepoint. Everything works fine in localhost, but the connection to SharePoint doesn't work in my dev tenant (the basic HelloWorld webpart does work there).

I am using VSCode 1.7.2; Node 6.5.0; Shell 1.3.8; and Renderer 52.0.274382.

I generated a new launch.json using node.js and corrected "program": "${workspaceRoot}\src\webparts\helloworld\HelloWorldWebPart.ts"

When I Launch Program, I get: "Cannot lanch program…; setting the 'outFiles' attribute might help."

I entered "outFiles": ["${workspaceRoot}\lib\webparts\helloworld\HelloWorldWebPart.ts"], but I still get exactly the same error.

Next, I tried Attach to Process: first I ran the command Tasks: Run Task; serve. This opened the localhost page in Chrome. Then I hit Attach to Process. Results: "Debug: Attach to Process: Cannot connect to runtime process, (timeout. After 10000ms)."

I am using an Azure Windows 10 VM.

Many thanks for your time, effort and generosity!!!

Velin Georgiev Velin Georgiev · Accepted Answer · 2017-04-01T00:24:39

The official documents from the Office Dev team here: https://dev.office.com/sharepoint/docs/spfx/debug-in-vscode

I found very useful article here: http://www.eliostruyf.com/how-to-debug-your-sharepoint-framework-web-part

I also created one here: http://blog.velingeorgiev.pro/how-debug-sharepoint-framework-webpart-visual-studio-code

Gist with the launch.json config here: https://gist.github.com/VelinGeorgiev/4a7b77ced7198df0a3898420d46f3405

The config pasted here for quick reference:

// Use Chrome browser to debug SharePoint Framework React webpart with Visual Studio Code on Windows
// - Install "Debugger for Chrome" extension
// - Add this configuration to the launch.json
// - Close all Chrome browser active instances
// - Start the SPFx nodejs server by executing "gulp serve"
// - Go to VS Code debug view (top menu -> View -> Debug)
// - Hit the play (start debugging) button
// Happy debugging!
// Full guides
// http://blog.velingeorgiev.pro/how-debug-sharepoint-framework-webpart-visual-studio-code
// https://dev.office.com/sharepoint/docs/spfx/debug-in-vscode
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "SPFx Local",
            "type": "chrome",
            "request": "launch",
            "url": "https://localhost:4321/temp/workbench.html",
            "webRoot": "${workspaceRoot}",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:///../../../../*": "${webRoot}/*",
                "webpack:///../../../../src/*": "${webRoot}/src/*",
                "webpack:///../../../../../src/*": "${webRoot}/src/*"
            },
            "runtimeArgs": [
                "--remote-debugging-port=9222"
            ]
        },
        {
            "name": "SPFx Online",
            "type": "chrome",
            "request": "launch",
            "url": "https://<your_tenant>.sharepoint.com/sites/<your_site>/SitePages/<your_webpart_page>.aspx",
            "webRoot": "${workspaceRoot}",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:///../../../../*": "${webRoot}/*",
                "webpack:///../../../../src/*": "${webRoot}/src/*",
                "webpack:///../../../../../src/*": "${webRoot}/src/*"
            },
            "runtimeArgs": [
                "--remote-debugging-port=9222"
            ]
        },
        {
            "name": "SPFx Online Workbench",
            "type": "chrome",
            "request": "launch",
            "url": "https://<your_tenant>.sharepoint.com/_layouts/workbench.aspx",
            "webRoot": "${workspaceRoot}",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:///../../../../*": "${webRoot}/*",
                "webpack:///../../../../src/*": "${webRoot}/src/*",
                "webpack:///../../../../../src/*": "${webRoot}/src/*"
            },
            "runtimeArgs": [
                "--remote-debugging-port=9222"
            ]
        }
    ]
}

Please let me know if any issues.

I am unable to debug with VS Code, node.js & SPFx

1 Answers