1/3
2/3
3/3
谷歌浏览器安装vuejs devtools插件
hedy_li
2021年01月17日 12:31
收录于文集
共2篇

1.下载chrome扩展插件

在github上下载压缩包并解压到本地,github下载地址:https://github.com/vuejs/vue-devtools下载master分支。

2.npm install    

下载完成后打开命令行cmd进入vue-devtools-master文件夹,2.1. npm install,安装依赖包; (如果安装太慢,就先安装淘宝镜像,命令行输入    $ npm install -g cnpm --registry=https://registry.npm.taobao.org。   安装完成后可以测试是否安装成功:可输入命令:$ cnpm -v         返回版本号说明安装成功 现在就可以用 $ cnpm install ) 

npm install

2.2.npm run build  编译

npm run build

编译打包完后会在shells>chrome下的src文件夹里生产如上图所示的几个js文件;

3.扩展chrome插件

3.1.打开chrome浏览器,点击右上角,打开更多工具>扩展程序;3.2.打开右上角的开发者模式。 再点击加载已解压的扩展程序,然后把shells>chrome文件夹放入

4.测试插件是否有效。运行Vue项目后 切换到Vue模式。

注意如果使用的是vue.min.js  需要在程序中设置

Vue.config.devtools = true; 开启。

或者换成引入vue.js

-----对于新版本安装看下面

新地址:https://github.com/vuejs/devtools

1、下载npm install -g yarn 2、yarn install 3、yarn run build 4、打开chrome://extensions/(谷歌->更多工具->扩展程序) 5、点击“加载已解压的扩展程序”

6、选择文件vue-devtools/packages/shell-chrome/