vue 调试工具 vue devtools 谷歌插件 安装

vue 调试工具 vue devtools 谷歌插件 安装

 

1、通过官方地址下载：​​​​GitHub - vuejs/devtools: ⚙️ Browser devtools extension for debugging Vue.js applications.

 

2、选择版本 v5.1.1   ：好多次才测验出来这个版本简单快捷易操作。

 

 

 

 3、点击downlaod ZIP  下载到本地

 

 4、将压缩包解压  依次执行命令  

 

① npm install  

 

 

 

② npm run build  

 

 

 

 5、在google 浏览器输入 ‘chrome://extensions/’  打开扩展程序管理  打开开发者模式 点击‘加载已解压的扩展程序’ ，选中devtools-5.1.1文件夹下的shells-chrome  添加成功就安装成功了。

 

在启动vue项目的时候  打开控制台就可以看到如下页面  就很方便我们调试项目了。

 

 

————————————————

版权声明：本文为CSDN博主「树上的男爵l」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/m0_65005642/article/details/121976966

 

 

安装: 

1.到github下载：

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

2.在vue-devtools目录下安装依赖包

1 2	cd vue-devtools cnpm install

3.修改manifest.json文件

把"persistent":false改成true

 

 4.编译代码

npm run build

 

5.扩展Chrome插件

Chrome浏览器 >  更多程序 > 拓展程序 

点击加载已解压程序按钮, 选择 vue-devtools > shells > chrome 放入, 安装成功如下图

 

 这里会有一个灰色的标识 说明安装OK，并且也开启了；

 

其他网页因为没检测到vue，所以是灰色的，假如网页里检测到vue，就亮了；

 

我们打开刚才helloWorld页面；

 

右击 审查元素 然后打开vue 我们可以看到所有内存中的DOM元素以及值 方便我们调试程序；