SharePoint Framework 在Visual Studio Code中除錯你的託管解決方案

部落格地址：http://blog.csdn.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"
            ]
        }
    ]
}

在Visual Studio Code除錯皮膚頂部的下拉框中選擇Hosted workbench，之後的操作就跟在本地沒什麼區別了，具體的可以參看前一篇文章。