在前面的章节中，我们主要介绍了利用 Chrome 的开发者工具进行前端的调试。在这一章节中，我们将介绍与我们开发息息相关的编辑器的调试方法。
这里我们主要介绍由微软出品的 Visual Studio Code（简称 VSCode）编辑器中有关前端的调试方法。VSCode 作为一款轻量级的文本编辑器本身就拥有强大的功能，再加上丰富的插件让我们可以编写任何语言的程序。我自从用上了 VSCode 之后，就彻底抛弃了 Sublime 了。
当然，作为前端的调试，我们基本是离不开 Chrome 的，比较我们编写好的代码最终也只能在浏览器中才能执行。因此我们首先就要在 VSCode 中安装好由微软官方出品的 Chrome 调试插件—— Debugger for Chrome。我们在 VSCode 的商店中搜索然后点击安装即可。安装完成后就让我们开始进行调试吧~
4.1 本地静态页面调试
为了方便我们的调试，我们这一次准备了一个非常简单的 Demo 页面。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>VSCode TESTER</title>
</head>
<body>
<p>VSCode 调试用页面</p>
<div class="container" id="container">
</div>
<script src="./index.js"></script>
</body>
</html>var container = document.getElementById('container')
alert(`HEY! Can you see me?`)
container.innerHTML = `HEY, Here is changed!`我们打开后，会先出现一个弹窗，然后再页面上显示两句话。
嗯，当然，我们这一章是要讲 VSCode 中的调试。所以我们就暂时离开 Chrome 回到 VSCode 中来。我们在 VSCode 中给 index.js 中的 alert 方法打上断点。
等等，别直接打开 html 文件了。那样肯定是不行的，因为断点是在 VSCode 中设置的，所以我们接下来要配置一下测试部分。在菜单栏的右边我们点击调试按钮（快捷键：Ctrl + Shift + D）进入调试界面。
在调试的界面中，我们选择添加配置，进入配置界面。毕竟 VSCode 可不知道我们每个项目的页面，我们需要针对项目手动进行一下配置。
在配置文件 launch.json 中，我们进行下面的配置。配置不难，需要注意的是路径的问题。重点在于 file 和 webRoot。 webRoot 是网站的根目录，一般默认是 VSCode 打开的那个目录。这个例子中 VSCode 是在 D:\LearningSpace\learning-book 下打开的，因此这就是 ${workspaceFolder} 的实际路径。而我们的示例文件是在 D:\LearningSpace\learning-book\Frontend dev-test\example\Chapter 4 目录下的，因此我们需要在 file 这里补全路径，${workspaceFolder}/Frontend dev-test/example/Chapter 4/index.html。
最终配置完成的文件内容。
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "静态文件 Chapter 4",
"file": "${workspaceFolder}/Frontend dev-test/example/Chapter 4/index.html",
"webRoot": "${workspaceFolder}"
},
{
"type": "chrome",
"request": "launch",
"name": "本地服务器调试",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
}
]
}配置好之后，我们选择在调试菜单中选择刚才配置的选项。点击左边的三角就可以进入调试模式。
