前言
以前学习源码，一般都是先把源码大致看一遍，然后如果遇到不清楚的变量或者功能，就会使用 console 来打印输出，优点是打印出来清晰易懂, 缺点就是如果太多的 console，反而会增加阅读成本。所以今天使用 vscode调试 来进行调试，主要目的是用来学习 调试，而非源码
为什么选择 axios 源码呢？
首先因为axios 本身不依赖于前端框架（比如vue/react），是一个比较纯粹的 js 项目
再者是因为 axios 在平时的项目中用的比较多，而且以前也写过关于 axios 的源码，比较了解流程
起步
下载 axios 源码
bash
git clone https://github.com/axios/axios.git如果只想拉取最新一版代码，不需要以前老版本，可以使用：
bash
git clone --depth 1 https://github.com/axios/axios.git下载完毕之后，先看看 readme.md 看看有没有什么关于启动的信息
如果没有，那么需要找到 package.json 文件，找到启动脚本，一般是 dev 或者是 start
如果此时直接启动 npm run start 的话，是启动不了的，我们进入 ./sandbox/server.js 文件中看看它是做了什么
server.js
在 server.js 中使用 http 模块创建了一个服务，然后监听 url的pathname ,通过匹配不同的 pathname调用不同的文件
当你使用 / 访问时，会把pathname 赋值为/index.html,然后后面匹配 /index.html，返回/client.html 文件
在 client.html 文件中，又引用了 axios.js，那么就会发送一个请求，则会匹配到 /axios.js 这个路径，然后返回 ../dist/axios.js
但是没有 ../dist/axios.js 这个文件，甚至没有 dist 这个文件，猜测可能是个打包文件，找到 package.json 中的 打包命令
这个命令使用了
gulp和rollup打包工具其中
gulp clear是为了清除构建过程中的临时文件和目录cross-env NODE_ENV = production 将 Node.js 环境变量
NODE_ENV设置为production
🔗rollup -c -m是一个 Rollup 的命令，-c 是表示用配置文件来运行 Rollup,-m 是用来生成sourcemap
执行命令之后，会生成 dist文件 
此时，我们再使用 npm run start 的话，在终端中就可以看到启动成功了！
在浏览器中打开 http://localhost:3000/
至此，axios 终于启动起来了，可以进行调试了
调试准备
在上文中访问 / 时，经过一阵跳转，会加载 ../dist/axios.js 文件
但是这个文件是一个打包后的文件，看右边的代码就知道，虽然可以调试，但是不太方便，我们需要映射到源文件中
为了方便调试，我们可以借助 vscode 调试工具的帮忙
创建一个 launch.json 文件，由于我使用的是 edge 浏览器，所以我选择 edge
使用谷歌浏览器的也可以选择
chrome
创建完毕之后launch.json 默认长这个样子
我们需要对其进行修改
🔗url 要改成你启动服务的端口号，webRoot 是用来解析 sourcemap
点击 运行与调试 按钮
会新出现一个 空白的浏览器 tab（因为request的是launch）
至此，调试准备已经完毕了，可以开始正式调试了
正式调试
那么应该在哪里打断点呢?
这就需要看这个 axios.js 对应的源文件是哪个了，我们知道 rollup 是用了自定义配置文件来打包的，我们找到这个配置文件
rollup.config.js
也就是 ./lib/axios.js 是源文件，所以可以在这个文件打断点，然后执行 F5
axios.js
点击之后，程序会在此处停住，同时在 vscode 会出现一排操作项
从左到右分别是：
- 跳转到下个断点
- 单行执行（不进入函数）
- 单步执行（进入函数内部）
- 单步退出（从函数中出来）
- 重新执行
- 停止调试
优点
当你使用调试工具时，所有变量可以通过 鼠标悬浮 的方式查看
defaults 变量
同时在左侧也可以看到各种变量，也可以添加 监视，来监视某一个变量的变化
如果你不想使用鼠标，也可以使用 调试控制台，只需要在最下方的输入框中输入你想查看的变量即可
结尾
今天分享的是 使用 vscode 调试 axios，通过使用 vscode 的自带的调试工具，确实要比自己打 console 要方便一点，更能看清楚代码流程，如果想要更快的阅读代码，选择调试也是一个不错的选择