图文详解vue.js devtools插件使用方法附最新版本下载

发布时间: 编辑:RILL 0人评论 71254次浏览 实用方法教程
直达下载
摘要 : 本文主要介绍Vue.js devtools插件使用方法,提供chrome插件直接安装和源代码安装两种方法,你还可以在其中找到常见问题即安装之后“vue.js not detected“的解决办法。

Vue.js devtools 背景简介

我们chrome插件网之前介绍过Vue.js devtools,是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展,可以在浏览器开发者工具下调试代码。做前端开发的IT工程师应该比较熟悉这款工具,可以边侧边栏窗格中的页面,边检查代码。由于vue是数据驱动的,所以这就存在在开发调试中查看DOM结构并不能解析出什么。但是借助vue-devtools插件,我们就可以很容易的对数据结构进行解析和调试。本文重点介绍Vue.js devtools使用方法,提供chrome插件直接安装和源代码安装两种方法,你还可以在其中找到常见问题即安装之后“vue.js not detected“的解决办法。

Vue.js devtools使用方法

一、chrome插件使用方法
1、你可以从chrome应用商店里找到Vue.js devtools插件,如果你的chrome应用商店无法打开,你可以在本站的下方找到Vue.js devtools下载地址。
2、离线安装chrome插件的方法均可参照:怎么在谷歌浏览器中安装.crx扩展。如果你是最新版Chrome浏览器,可以参考chrome 67版本后无法拖拽离线安装CRX格式插件的解决方法
3、下载Vue.js devtools的crx文件后,打开Chrome的扩展页面(chrome:// extensions /或按Chrome菜单图标>更多工具>扩展程序查找),然后拖放 crx文件到扩展页面安装它;
4、点击“添加拓展程序”完成安装。

Vue.js devtools chrome插件使用方法

5、Vue.js devtool插件安装后无法使用,出现提示“vue.js not detected”,这时我们可以使用下面的方法:

Vue.js devtools chrome插件使用方法

第一,我们需要找到Vue.js devtool插件的安装目录。(如果真找不到插件的安装位置,可以在本地电脑搜索插件的ID:nhdogjmejiglipccpnnnanhbledajbpd。)不同操作系统中chrome插件安装位置不同,比如win8系统中chrome插件的安装位置:C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\Extensions\nhdogjmejiglipccpnnnanhbledajbpd
第二,在找到了Vue.js devtool插件的安装目录后,打开mainifest.json文件(这是关键)。

Vue.js devtools chrome插件使用方法
将mainfest.json中代码persistent:false,修改成persistent:true。如下图所示:

Vue.js devtools chrome插件使用方法
一般情况下,修改完如上的位置的代码。打开vue项目后,在控制台选择vue,就应该可以正常使用了。

Vue.js devtools chrome插件使用方法
第三,如果通过上面的方法调整过后,还是不能够使用,那么可以调整一下webpack.config.js的代码,如下图所示:

Vue.js devtools chrome插件使用方法
最后,重启一下你的vue项目应该就可以使用了。

Vue.js devtools chrome插件使用方法


二、源代码安装方法

1、在github下载devtools源码,地址:https://github.com/vuejs/vue-devtools。

Vue.js devtools源代码安装方法
2、下载好后进入vue-devtools-master工程 执行cnpm install, 下载依赖,然后执行npm run build,编译源程序。
Vue.js devtools源代码安装方法
Vue.js devtools源代码安装方法
3、编译完成后,目录结构如下:
Vue.js devtools源代码安装方法

修改shells-chrome目录下的mainifest.json 中的persistant为true:
Vue.js devtools源代码安装方法
Vue.js devtools源代码安装方法
 4、打开谷歌浏览器的设置--->扩展程序,并勾选开发者模式
Vue.js devtools源代码安装方法
Vue.js devtools源代码安装方法

然后将刚刚编译后的工程中的shells目录下,chrome的整个文件夹直接拖拽到当前浏览器中,并选择启用,即可将插件安装到浏览器。
Vue.js devtools源代码安装方法
5、打开一个已有的vue项目,运行项目,然后在浏览器中--->设置--->更多工具--->开发者工具,进入调试模式:
发现vue.js is not detected  ,可以调整一下webpack.config.js的代码:

 Vue.js devtools源代码安装方法
Vue.js devtools源代码安装方法
最后,重启一下你的vue项目应该就可以使用了。
 Vue.js devtools源代码安装方法

小结:Vue.js devtool插件安装后出现提示“vue.js not detected”的问题,首先在扩展程序中选择开发者模式,打开插件的安装目录,将mainifest.json 中的persistant为true,如果还不行就调整一下webpack.config.js的代码,最后重启vue项目就可以使用。

Vue.js devtools联系方式

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

文章参考:
http://www.cnplugins.com/tool/fix-vue-js-not-detected.html
https://www.cnblogs.com/tanyongli/p/7554045.html

查看更多

图文详解vue.js devtools插件使用方法附最新版本下载下载地址

点击下载图文详解vue.js devtools插件使用方法附最新版本下载

转载必须注明来自:https://huajiakeji.com/utilities/2018-12/1653.html

Vue.js devtools插件

Vue.js devtools插件

3 人评论 165729 次人浏览 4.6分 4.6 分
Vue.js开发者工具是一款适用于chrome浏览器和Firefox浏览器的浏览器插件。
JSON Formatter

JSON Formatter

0 人评论 74548 次人浏览 4.6分 4.6 分
JSON Formatter是一款能格式化json代码,使得json代码页面变得便于阅读的chrome json格式化开源插件。
GitHub File Icon

GitHub File Icon

1 人评论 13443 次人浏览 4.0分 4.0 分
GitHub File Icon是一款可以改善GitHub 现有的档案系统呈现样式,使它更容易被用户阅读的chrome插件。
PHP Console

PHP Console

1 人评论 51051 次人浏览 4.0分 4.0 分
PHP Console是一款可以帮助PHP开发者,以Chrome浏览器为媒介输出PHP调试信息的谷歌浏览器插件。
WEB前端助手(FeHelper)

WEB前端助手(FeHelper)

0 人评论 76723 次人浏览 3.8分 3.8 分
FE助手:包括字符串编解码、代码压缩、美化、JSON格式化、正则表达式、时间转换工具、二维码生成与解码、编码规范检测、页面性能检测、页面取色、Ajax接口调试
JetBrains IDE Support

JetBrains IDE Support

0 人评论 72966 次人浏览 3.7分 3.7 分
JetBrains IDE Support是一款webstorm网页开发调试工具,支持HTML/CSS/JavaScript编辑和JavaScript调试。
XPath Helper

XPath Helper

5 人评论 192076 次人浏览 3.4分 3.4 分
XPath Helper可以支持在网页点击元素生成xpath,整个抓取使用了xpath、正则表达式、消息中间件、多线程调度框架的chrome插件。
XPath Helper Wizard

XPath Helper Wizard

0 人评论 19637 次人浏览 3.3分 3.3 分
XPath Helper Wizard是一个可以创建XPath查询选择类似的元素并且返回可视化结果的chrome插件
极简Json格式化插件

极简Json格式化插件

0 人评论 51105 次人浏览 3.2分 3.2 分
极简Json格式化是一个非常简单的Chrome插件,用于将JSON接口返回值格式化成可读方式。
CSDN开发助手插件

CSDN开发助手插件

0 人评论 7888 次人浏览 3.0分 3.0 分
CSDN开发助手插件是一款集成本地书签、历史记录与 CSDN搜索的搜索工具,专为程序员服务,是一款程序员必备的浏览器插件。
Header Editor

Header Editor

0 人评论 111954 次人浏览 2.8分 2.8 分
Header Editor是一款管理浏览器请求的Chrome扩展,包括修改请求头和响应头、重定向请求、取消请求。
JSON Viewer

JSON Viewer

0 人评论 80331 次人浏览 2.4分 2.4 分
JSON Viewer是最漂亮的、可定制的JSON/JSONP荧光笔高亮插件,用于打印JSON和JSONP。
评论:(0)

已有 0 位网友发表了一针见血的评论,你还等什么?