SPFx 断点和从 Visual Studio Code 调试，而不是从 Chrome答案

【问题标题】：SPFx breakpoints and debugging from Visual Studio Code instead from ChromeSPFx 断点和从 Visual Studio Code 调试，而不是从 Chrome
【发布时间】：2017-08-10 18:42:31
【问题描述】：

我正在尝试找到一种方法来从 Visual Studio Code 而不是从 Chrome 调试我的本地 SPFx 工作台，但我找不到任何关于如何将 Chrome 附加到 Visual Studio Code 并在我的 react typescript webpart 中命中断点的指南（网络应用程序）。有没有很好的指导如何做到这一点？

这可能是微不足道的，但我是 react-gulp-vs 代码世界的新手，过去，使用 Visual Studio 和 IExplorer 调试 javascript 相对容易，我想知道 Visual Studio 是否存在简单的设置代码也是如此。

谢谢！

【问题讨论】：

标签： reactjs typescript sharepoint office365 visual-studio-code

【解决方案1】：

对此进行快速更新。 @gruss 关于 Chrome 的调试器是正确的，但我想更进一步并创建一个指南。

Office 开发团队的官方文档在这里： 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:///../../../src/*": "${webRoot}/src/*",
                "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:///../../../src/*": "${webRoot}/src/*",
                "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:///../../../src/*": "${webRoot}/src/*",
                "webpack:///../../../../src/*": "${webRoot}/src/*",
                "webpack:///../../../../../src/*": "${webRoot}/src/*"
            },
            "runtimeArgs": [
                "--remote-debugging-port=9222"
            ]
        }
    ]
}

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

【讨论】：

【解决方案2】：

这个 VS Code 扩展可能正是您所需要的。

https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

【讨论】：