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