SharePoint Framework 在Visual Studio Code中调试你的本地解决方案

时间:2022-03-13 03:28:42

博客地址: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,如下图。

SharePoint Framework 在Visual Studio Code中调试你的本地解决方案

点击Install按钮,安装完成后,点击reload按钮重新加载,完成扩展的安装。安装完成后如下图所示:

SharePoint Framework 在Visual Studio Code中调试你的本地解决方案

使用本地的workbench调试SharePoint Framework解决方案

在编译SharePoint Framework解决方案时,你可以使用本地的workbench来验证你的web部件是否正确工作。使用本地workbench可以方便地测试不需要跟SharePoint交互的所有场景,包括离线开发。

为本地workbench创建一个调试配置

打开Visual Studio Code的Debug面板,如下图:

SharePoint Framework 在Visual Studio Code中调试你的本地解决方案

在面板的顶部,打开配置下拉框并选择Add Configuration...选项。

SharePoint Framework 在Visual Studio Code中调试你的本地解决方案

然后在环境下拉框处选择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中调试你的本地解决方案

启动SharePoint Framework解决方案

在Visual Studio Code中,点击View菜单->Integrated Terminal或者按下CTRL+`,并输入命令:

gulp serve --nobrowser

该命令之前的文章也介绍过,也可以在命令行中输入执行。该命令会编译你的SharePoint Framework解决方案并启动本地网络服务器来承载输出文件。由于编译器会启动它自己的浏览器实例,所以我们使用--nobrowser参数来防止任务打开一个浏览器窗口。

SharePoint Framework 在Visual Studio Code中调试你的本地解决方案

开始在Visual Studio Code中调试

等待gulp任务完成,让我们将焦点移回代码区域,按下F5启动调试(跟Visual Studio一样)。这里要说明一下,SharePoint Framework只会按需加载web部件,即只有你将web部件添加到页面之后,你的断点才会生效。

SharePoint Framework 在Visual Studio Code中调试你的本地解决方案

所以,F5打开页面之后,先点击加号将我们的web部件添加到页面,然后F5刷新一下浏览器,断点就加载上并且中断了。

SharePoint Framework 在Visual Studio Code中调试你的本地解决方案