SharePoint Framework 在Visual Studio Code中除錯你的本地解決方案

部落格地址：http://blog.csdn.net/FoxDave

Visual Studio Code不知道大家都有沒有，介面清爽，編輯快速，是一個非常好的前端開發工具。本文介紹如何使用Google Chrome和Debugger for Chrome Visual Studio Code擴充套件來除錯SharePoint Framework解決方案。

準備工作

首先安裝Google Chrome，具體過程不表了，下載地址為：https://www.google.com/chrome/browser/desktop/index.html

接下來安裝Debugger for Chrome Visual Code擴充套件

開啟Visual Code，選左邊圖示選單最下面的擴充套件皮膚，搜尋Debugger for Chrome，如下圖。

點選Install按鈕，安裝完成後，點選reload按鈕重新載入，完成擴充套件的安裝。安裝完成後如下圖所示：

使用本地的workbench除錯SharePoint Framework解決方案

在編譯SharePoint Framework解決方案時，你可以使用本地的workbench來驗證你的web部件是否正確工作。使用本地workbench可以方便地測試不需要跟SharePoint互動的所有場景，包括離線開發。

為本地workbench建立一個除錯配置

開啟Visual Studio Code的Debug皮膚，如下圖：

在皮膚的頂部，開啟配置下拉框並選擇Add Configuration...選項。

然後在環境下拉框處選擇Chrome。

然後用下面的程式碼替換自動開啟的launch.json檔案：

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

該配置使用Debugger for Chrome擴充套件提供的chrome偵錯程式。它指向了本地的workbench作為啟動節點。在除錯TypeScript時最關鍵的部分是配置原始碼對映，偵錯程式用它來把在瀏覽器中執行的JavaScript對映到原始TypeScript程式碼。
下面我們來測試配置是否好用。

配置一個斷點

在Visual Studio Code中開啟主體web部件原始碼檔案並在render方法的第一行新增一個斷點。

啟動SharePoint Framework解決方案

在Visual Studio Code中，點選View選單->Integrated Terminal或者按下CTRL+`，並輸入命令：

gulp serve --nobrowser

該命令之前的文章也介紹過，也可以在命令列中輸入執行。該命令會編譯你的SharePoint Framework解決方案並啟動本地網路伺服器來承載輸出檔案。由於編譯器會啟動它自己的瀏覽器例項，所以我們使用--nobrowser引數來防止任務開啟一個瀏覽器視窗。

開始在Visual Studio Code中除錯

等待gulp任務完成，讓我們將焦點移回程式碼區域，按下F5啟動除錯（跟Visual Studio一樣）。這裡要說明一下，SharePoint Framework只會按需載入web部件，即只有你將web部件新增到頁面之後，你的斷點才會生效。

所以，F5開啟頁面之後，先點選加號將我們的web部件新增到頁面，然後F5重新整理一下瀏覽器，斷點就載入上並且中斷了。