日常开发中用的比较多的是通过console.log来输出变量信息，根据输出判断执行是否正确，但通过这种方式能够查看的上下文信息比较有限，比如调试三方库、webpack开发环境下调试vue文件时，推荐使用debugger的方式进行调试，逐步分析源码执行情况。
添加debugger主要有两种方式：
- 一种借助浏览器的开发者工具
- 另一种是通过vscode内置的调试器。
浏览器开发者工具
调试文件又分为 普通的js文件 和 应用文件 （应用文件在这指开发环境下webpack构建后的的vue文件）。
普通js文件
控制台->source 即可查看源代码，看板右侧可以查看具体的变量信息、执行栈等信息。
应用文件
像普通js那样直接打开 控制台->Source 是看不到源码的 (开发环境为vite是可以看见的) ，点击查看.vue结尾的文件都是webpack构建打包后的代码，如下图所示：
一开始怀疑是项目sourcemap配置的问题，但鼠标悬浮在这些文件上会提示 form source map的字样，最后发现是浏览器配置的问题，修改配置即可查看源码。
控制台 -> Source Settings -> Ignore List -> disable /node_modules/|/bower_components/选项：
修改后刷新即可查看源码：
vscode内置调试工具
vscode内置了调试插件 侧边栏->运行和调试，不过需要先完善launch.json配置文件，不同场景配置不一样：
-
program: 适用于需要运行一个本地的程序文件（如 Node.js 应用）。 -
url: 适用于需要打开一个指定网页的 URL（如在浏览器中调试前端项目）。
普通js文件
填写配置文件launch.json，主要通过 program 字段设置要调试的程序文件入口：
{
"version": "0.2.0",
"configurations": [
{
"type": "node", // 指定调试器类型为 Node.js
"request": "launch", // 使用 "launch" 请求类型，表示要启动并调试程序
"name": "Debug JS File",// 此配置的名称，在 VS Code 中用于识别此配置
"program": "${file}", // 指定要调试的程序文件，${file} 表示当前打开的文件
"cwd": "${workspaceFolder}", // 工作目录，通常设置为工作区的根目录
}
]
}
调试结果：
应用文件
填写配置文件launch.json，区别于普通js，应用项目主要通过 url 字段来设置本地服务器运行的地址：
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "针对 localhost 启动 Chrome",
"url": "http://localhost:8081", // 通常指在本地开发时运行的 Vue 或 React 应用
"webRoot": "${workspaceFolder}"
}
]
}
调试结果：
如果调试应用文件使用 program 来设置入口文件的话会出现 "window is not defined" 的错误，这是因为program 是为 Node.js 环境准备的，它会尝试在 Node.js 环境中执行代码，而 window 对象是浏览器专有的全局对象，Node.js 中没有 window。
