Question

我在https://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/build-a-hello-world-web-part中完成了HelloWorld webpart，并在https://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/connect-to-sharepoint之后增强了该webpart以连接到SharePoint。在localhost中一切正常，但是与SharePoint的连接在我的开发租户中不起作用（基本的HelloWorld webpart在那里工作）。

我正在使用VSCode 1.7.2;节点6.5.0;壳牌1.3.8;和渲染器52.0.274382。

我使用node.js生成了一个新的launch.json并更正了＆＃34; program＆＃34;：＆＃34; $ {workspaceRoot} \ src \ webparts \ helloworld \ HelloWorldWebPart.ts＆＃34;

当我启动程序时，我得到：＆＃34;不能lanch程序......;设置＆＃39; outFiles＆＃39;属性可能有帮助。＆＃34;

我输入＆＃34; outFiles＆＃34;：[＆＃34; $ {workspaceRoot} \ lib \ webparts \ helloworld \ HelloWorldWebPart.ts＆＃34;]，但我仍然得到完全相同的错误。

接下来，我尝试了Attach to Process：首先我运行命令Tasks：Run Task;服务。这打开了Chrome中的localhost页面。然后我点击了Attach to Process。结果：＆＃34;调试：附加到进程：无法连接到运行时进程，（超时。超过10000毫秒）。＆＃34;

我正在使用Azure Windows 10 VM。

非常感谢您的时间，精力和慷慨!!!

Answer 1

Office Dev团队的官方文档： https://dev.office.com/sharepoint/docs/spfx/debug-in-vscode

我在这里找到了非常有用的文章： http://www.eliostruyf.com/how-to-debug-your-sharepoint-framework-web-part

我还在这里创建了一个： http://blog.velingeorgiev.pro/how-debug-sharepoint-framework-webpart-visual-studio-code

点击launch.json配置： https://gist.github.com/VelinGeorgiev/4a7b77ced7198df0a3898420d46f3405

此处粘贴的配置可供快速参考：

// 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"
            ]
        }
    ]
}

如果有任何问题，请告诉我。

我无法使用VS Code调试，node.js＆amp; SPFX

1 个答案: