vue-devtools 原理学习

本文参加了由公众号@若川视野 发起的每周源码共读活动，点击了解详情一起参与。

启动

1. 介绍环境

• window 系统11
• Chrome 浏览器（最新）
• Node 16.x
• VS Code
• 2024 年度

2. 安装谷歌扩展
3. 执行命令

git clone https://github.com/lxchuan12/open-in-editor.git
cd vue3-project 
rm yarn.lock
yarn

4. 碰到异常
   1. Error: certificate has expired (yarn install) ，解决办法删除 yarn.lock 文件。

调试

1. 在 VS Code 以本地仓库的根路径作为工作区根路径。
2. 打开 /vue3-project/package.json 文件，在 点击scripts上的 调试按钮。
3. 打开页面。
4. 打开浏览器 dev-tools。
5. 左侧有个页面菜单，左侧是组件树面板，右键是组件节点面板。右上角就是点击打开对应的组件文件。
6. 临时禁用VS Code搜索忽略列表，搜索 launch-editor-middleware ，找到引用的代码文件，打上断点。

总结

1. 经历过Error: certificate has expired 安装依赖报错不一定是远程源失效。
2. 了解到 RCE （Remote Code Excute） 远程代码执行攻击。
3. 推测大致的原理流程，Vue 项目代码编译->组件编译代码关联源码->浏览器运行-> 订阅Vue 信息中心-> 由 vue-devtools 获取组件树的信息-> 创建打开源码请求-> 请求参数转化为开发脚手架参数-> 由脚手架执行命令,通过可执行程序以及命令参数打开对应的文件。
4. 发现 VS Code JS 调试面板理解不足。
5. 欢迎各位大佬纠正萌新的错误。