Vue调试工具vue-devtools的安装与使用

简介

vue-devtools是一款基于chrome浏览器的插件，用于调试vue应用，以提高调试效率。

插件商店直接安装

Chrome
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

Firefox
https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools

Safari
https://github.com/vuejs/vue-devtools/blob/master/docs/workaround-for-safari.md

手动安装

1. 在GitHub下载

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

2. 解压后，进入到该文件夹下，按住shift不放，单击鼠标右键，打开Powershell 窗口

3. 依次执行下面两条命令，安装依赖包并编译

   npm install
   npm run build
   

   

4. 打开谷歌浏览器，在地址栏中输入 chrome://extensions/ 进入扩展中心，打开 开发者模式

5. 然后将chrome文件夹整个拖入到扩展程序页面中
   

6. 打开一个vue项目，运行项目，按F12，进入调试模式，选择vue即可