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

配置一个断点

在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刷新一下浏览器，断点就加载上并且中断了。