使用vscode以及chrome调试yarn源码

2 调试指南

本文发布于掘金专栏
文章原文位于github

在上一章中已经打包出带有sourcemap的yarn产物,本章将初步进行调试环境的配置

使用vscode进行调试

新建一个文件夹作为调试文件夹,也就是真正运行yarn命令的地方。在yarn的源码文件夹新建vscodelaunch.json。选择node -> launch,将其中的cwd选项设置为新建的调试文件夹的路径。

完整的配置文件如下

json 复制代码
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "test yarn version",  // 这里只写了最简单的yarn --version命令的调试
      "skipFiles": ["<node_internals>/**"],
      "console": "internalConsole",
      "outFiles": [
        "${workspaceFolder}/**/*.(m|c|)js",
        "!**/node_modules/**"
      ],
      "program": "${workspaceFolder}/mybuild/cli/index.js",
      "cwd": "${workspaceFolder}/../yarn-source-dev",  // 这个设置为新建的调试文件夹的路径,相对路径绝对路径都可以
      "args": [
        "--version"
      ]
    }
  ]
}

断点到src/cli/index.js里面进行调试,发现能命中断点

在接下来的调试里面通过增加launch.json里面configurations的来调试每个命令,只需把例子中的args修改成想调试的命令即可。

node火焰图

生成node火焰图

生成nodejs的运行火焰图可以很明显的看到运行的堆栈以及调用的顺序。

在调试文件夹里面增加默认的包然后删除node_modules

bash 复制代码
yarn init -y

yarn add react@18   # 这里一定使用18,因为18有依赖更好分析install的过程

rm -rf node_modules

找到打包出的入口js文件位置,相对与yarn源码文件夹的路径为./mybuild/cli/index.js,复制绝对路径。运行下面的代码,会在调试文件夹里面生成一个cpuprofile文件,这就是火焰图的文件,这个文件可以用浏览器的调试工具打开。

bash 复制代码
node --cpu-prof --cpu-prof-interval=1 /yarn-dev/yarn/lib/cli/index.js install

运行后生成的cpuprofile文件

查看火焰图

进入浏览器chrome://inspect/Open dedicated DevTools for Node

选中performance以及上传文件按钮

在文件选择里面选择刚才生成的cpuprofile文件,可以看到完整的调用栈信息的展示。

作者这里使用的是wsl,所以底下的文件没有映射到源代码里面,源代码的文件夹应该是src,这里因为使用了wsl导致sourcemap映射出了问题还是显示的打包后的文件夹mybuild。实际上使用windows或者linux mac都可以成功映射到源代码里面。这里关系并不大因为源码和打包后的代码里面的函数名基本没有改变所以也能看。

总结

本章介绍了使用vscodeyarn的源码进行调试,以及使用chrome的调试工具对yarn命令生成的火焰图进行分析。在接下来的调试里面会使用这两个方法进行分析调试。vscode的调试主要使用断点进行调试,方便观察每一步的变量以及逻辑,而火焰图则方便观察命令整体的运行步骤以及运行规律。

author: xiaochuan

date: 2024.12.26

相关推荐
10年前端老司机35 分钟前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程5 小时前
2025前端面试题
前端·面试
前端小趴菜056 小时前
React - createPortal
前端·vue.js·react.js
晓13136 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo7 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴7 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_7898 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼8 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原9 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf9 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js