SharePoint Framework 在Visual Studio Code中调试你的托管解决方案

博客地址：http://blog.****.net/FoxDave

上一篇介绍了如何在本地调试你的SharePoint Framework解决方案，本篇介绍如何调试你的SharePoint Online上的解决方案，其实是类似的，只是一些配置不同而已，但是为了使文章更清晰，所以单独写出。

为托管workbench创建调试配置

在调试需要跟SharePoint交互的解决方案时，你需要验证是否能够正确通信。验证的方法很简单，使用在线的workbench即可，链接为https://yourtenant.sharepoint.com/_layouts/workbench.aspx。在构将你的SharePoint Framework解决方案时，你会经常做这个测试，所以咱们会为在线托管的SharePoint workbench创建一个单独的配置文件。

打开.vscode目录下的launch.json文件，将文件内容替换为下面的代码并保存（其中Hosted workbench部分的url值替换为你自己的O365 tenant domain。）：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Local workbench",
            "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": "Hosted workbench",
            "type": "chrome",
            "request": "launch",
            "url": "https://contoso.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"
            ]
        }
    ]
}

在托管的workbench调试你的SharePoint Framework客户端web部件

在Visual Studio Code调试面板顶部的下拉框中选择Hosted workbench，之后的操作就跟在本地没什么区别了，具体的可以参看前一篇文章。