在前面的章节中,我们主要介绍了利用 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}"
}
]
}
配置好之后,我们选择在调试菜单中选择刚才配置的选项。点击左边的三角就可以进入调试模式。