使用vue-devtools打开对应组件文件

• 本文参加了由公众号@若川视野 发起的每周源码共读活动，  点击了解详情一起参与。
• 这是源码共读的第1期，链接：juejin.cn/post/695934…

如何在谷歌浏览器中安装vue-devtools

git clone https://github.com/vuejs/devtools.git
cd devtools
# 如果没安装 yarn，可以 npm i yarn -g
# 安装依赖
yarn install
# 构建
yarn build

此时devtools\packages\shell-chrome文件夹下就会出现build文件夹。

然后把整个shell-chrome文件夹拖入谷歌的扩展程序页面。

如何打开对应组件文件

原理

code path/to/file

一句话简述原理：利用nodejs中的child_process，执行了类似code path/to/file命令，于是对应编辑器就打开了相应的文件，而对应的编辑器则是通过在进程中执行ps x（Window则用Get-Process）命令来查找的，当然也可以自己指定编辑器。