Vue-DevTools调试工具安装

Posted 2021-04-16 前端未来

        做前端开发，调试能力尤其重要，目前SPA项目，都是基于虚拟DOM操作数据，如果不借助于工具，我们调试会变得略微艰难，关于dev-tools的文章非常多，今天我就个人安装使用情况做一些记录。

基于Chrome安装通常有两种方式

一、Chrome应用商店安装

     这种方式极其简单，打开商店，直接搜索vue devtools即可，但是国内用户需要翻墙才能打开，所以这种方式会卡住大部分用户。

二、插件源码编译安装

1. 打开Github，搜索vue-devtools，通过Git克隆

git clone https://github.com/vuejs/vue-devtools.git

用vscode打开以后，需要切换到master分支（默认dev分支打包会报错）

或者使用git checkout master切换到master分支

2. 安装项目依赖

// 进入到项目目录cd vue-devtools// 安装依赖cnpm install 或者 yarn install 或者 npm install

安装成功后截图如下：会显示 All packages installed

3. 编译源码

npm run build 或者 cnpm run build

编译成功后，如下图：

4. 添加编译后插件到chrome扩展程序中

• cnpm run build之后，会生成一个shells文件夹

• shells文件夹里面包含一个chrome文件夹

  

• 打开浏览器扩展程序

  

• 选择shells -> chrome文件夹导入

  
  

  

  
  

  导入后会显示devtools插件

  

5. 测试验证

打开慕课上面的小米商城课程，可以直观的看到当前页面包含的自定义组件、每个组件上挂载的data数据，以及Vuex当中存储的数据。

插件安装简单，但是想必部分同学也会遇到坑：

• 看不懂插件如何安装和编译

• 安装依赖失败

• 下载源码无法切换分支

• 编译后不知道导入哪个文件夹

• 导入后，浏览器不生效

  
  

上面的步骤只要完完全全走下来会解决所有的问题！

如果大家不想自己编译也可以直接使用我编译好的插件：

https://github.com/JackySoft/JackySoft.github.io

下载chrome.zip进行解压即可。

关注前端，关注未来，爱上 前端未来