讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新

当前位置： 首页  >  下载站  >  插件扩展  >  Chrome插件  >  Vue.js devtools V5.1.1

Vue.js devtools V5.1.1

Vue.js devtools V5.1.1

过Vue.js devtools，是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展，可以在浏览器开发者工具下调试代码。做前端开发的IT工程师应该比较熟悉这款工具，可以边侧边栏窗格中的页面，边检查代码。由于vue是数据驱动的，所以这就存在在开发调试中查看DOM结构并不能解析出什么。但是借助vue-devtools插件，我们就可以很容易的对数据结构进行解析和调试
分类:   插件扩展 /  Chrome插件 发布时间:  2020-04-10 访问量:  10264
下载量:  330
点击下载
更多>

最新下载

谷歌浏览器插件HTML Tree Generator 查看网页HTML代码结构树

谷歌浏览器插件HTML Tree Generator 查看网页HTML代码结构树

HTML Tree Generator 上是一个元素树，css定义了布局。此扩展将任何页面显示为树，对于做网页前端开发来说非常有用。插件虽然是2015年发布的，但是在2022年依然可用。
0 2026-01-06
非常方便的网页任意对象拾色器Chrome浏览器插件ColorPick Eyedropper

非常方便的网页任意对象拾色器Chrome浏览器插件ColorPick Eyedropper

非常方便的全方位拾色器，使用起来也比较简单，安装后，点击ColorPick Eyedropper插件的图标，然后鼠标就变成了十字横纵指标一个的光标，会跟着一个框，想拾色哪里就点准哪里就好了。右上角的插件框框会显示色值。
0 2026-01-06
谷歌浏览器插件Next.js Explorer 快速检查页面数据是否超过128Kb和其他有用指标

谷歌浏览器插件Next.js Explorer 快速检查页面数据是否超过128Kb和其他有用指标

Next.js 是一个轻量级的 React 服务端渲染应用框架，插件Next.js Explorer 是一个Next.js 探索工具，能够检测网站是否使用Next.js构架，并且使用三种图标颜色来进行区别。分别是：默认色（黑白），表示网页没有使用Next.js。绿色，表示网页使用Next.js，页面数据最佳。红色，表示网页使用Next.js，页面数据超过128Kb。为什么128kb会显示红色呢，因
0 2026-01-06
谷歌浏览器插件NoFollow 检测网页上的NoFollower和noindex元标记

谷歌浏览器插件NoFollow 检测网页上的NoFollower和noindex元标记

NoFollow 是一款可以检测网页上的NoFollower和noindex元标记的插件。对于网站运营和前端开发来说，是一款有用的辅助插件，SEOer必备。Outline nofollow links, detect nofollow and noindex meta tags on webpages. Features website filtering and custom CSS outli
0 2026-01-06
谷歌浏览器插件Ahrefs SEO Toolbar 强大的SEO工具之一

谷歌浏览器插件Ahrefs SEO Toolbar 强大的SEO工具之一

Ahrefs是市场上强大的SEO工具之一。它可以帮助您了解为什么您的竞争对手排名如此之高以及您可以做些什么来击败它们。它还可以帮助您找到可用于提高搜索流量的关键字和博客帖子提示。他们有一个SEO工具栏作为Chrome扩展程序，通过深入的SEO分析和关键字报告可以查看您正在查看的任何页面。
0 2026-01-06
Viewport Resizer 一个可以测试响应式布局的chrome扩展

Viewport Resizer 一个可以测试响应式布局的chrome扩展

移植自@MalteWassermann的脚本，一个可以测试响应式布局的chrome扩展，前端开发者参考~
0 2026-01-06
谷歌浏览器插件CSS Used 获取所选DOM的所有css

谷歌浏览器插件CSS Used 获取所选DOM的所有css

CSS Used 是一款前端开发设计辅助工具，支持单击页面即可获取应用于选定web元素及其子元素的所有css。已知限制1.对于像“.wrapp｛…｝”这样的CSS规则，如果只选择了“＜p＞”，则结果“.wrap p｛..｝”将不适用于“＜p＜”。将规则更改为“p｛…｝”，或者在最终HTML中添加“.wrap”父级。2.目前不支持CSS自定义属性（变量）和所有样式继承相关功能。
0 2026-01-05
谷歌浏览器插件MDClient 在Github上阅读Markdown文档

谷歌浏览器插件MDClient 在Github上阅读Markdown文档

如果有人想看到它，只需给他们Github读取repo的权限，你就可以通过这个扩展看到它。
0 2026-01-05
谷歌浏览器插件GitHub Repository Explorer 访问github项目历史记录 支持搜索

谷歌浏览器插件GitHub Repository Explorer 访问github项目历史记录 支持搜索

GitHub Repository Explorer 是一款github辅助插件，能够便捷的帮助开发者访问您过去访问过的github存储库（浏览器历史记录）。
0 2026-01-05
谷歌浏览器插件HeadingsMap 针对网页自动生成文档地图标题大纲

谷歌浏览器插件HeadingsMap 针对网页自动生成文档地图标题大纲

HeadingsMap 是一款针对网页结构梳理的插件，可以显示、浏览和审核（可访问性和SEO）标题结构，直接展示出内容大纲。生成带有标题的文档地图或索引（您可以通过单击其任何项目直接访问内容）。
0 2026-01-05

24小时阅读排行榜

更多>

最新教程

最新Python教程 从入门到精通

最新Python教程 从入门到精通
下载首页 / 插件下载 / Chrome插件

下载Vue.js devtools的crx文件后，打开Chrome的扩展页面（chrome：// extensions /或按Chrome菜单图标>更多工具>扩展程序查找），然后拖放 crx文件到扩展页面安装它；
4、点击“添加拓展程序”完成安装。

1586507365(1).jpg


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

1586507386(1).jpg


第一，我们需要找到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文件（这是关键）。

1586507402(1).jpg


将mainfest.json中代码persistent：false，修改成persistent：true。如下图所示：

1586507423(1).jpg


一般情况下，修改完如上的位置的代码。打开vue项目后，在控制台选择vue，就应该可以正常使用了。

1586507439(1).jpg


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

1586507455(1).jpg最后，重启一下你的vue项目应该就可以使用了。


1586507477(1).jpg

二、源代码安装方法

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

1586507490(1).jpg

2、下载好后进入vue-devtools-master工程 执行cnpm install, 下载依赖，然后执行npm run build，编译源程序。

1586507507(1).jpg

1586507524(1).jpg
3、编译完成后，目录结构如下：

1586507537(1).jpg

修改shells-chrome目录下的mainifest.json 中的persistant为true：

1586507554(1).jpg

1586507583(1).jpg

 4、打开谷歌浏览器的设置--->扩展程序，并勾选开发者模式

1586507599(1).jpg

1586507620(1).jpg

然后将刚刚编译后的工程中的shells目录下，chrome的整个文件夹直接拖拽到当前浏览器中，并选择启用，即可将插件安装到浏览器。
1586507643(1).jpg

5、打开一个已有的vue项目，运行项目，然后在浏览器中--->设置--->更多工具--->开发者工具，进入调试模式：
发现vue.js is not detected  ，可以调整一下webpack.config.js的代码：
1586507658(1).jpg1586507678(1).jpg 

最后，重启一下你的vue项目应该就可以使用了。
 1586507712(1).jpg

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


本站所有资源都是由网友投搞发布，或转载各大下载站，请自行检测软件的完整性！本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担!如有侵权请联系我们删除下架，联系方式：admin@php.cn

相关推荐

热门下载

谷歌浏览器插件Quicker Connector Quicker软件配套的浏览器插件

谷歌浏览器插件Quicker Connector Quicker软件配套的浏览器插件

Quicker Connector 是Quicker软件的浏览器插件，使用户可以通过Quicker动作控制浏览器或网页实现自动化操作。需要结合Quicker软件1.29.0+版本使用。如果您没有使用Quicker软件(https://getquicker.net)，请勿安装此插件。Quicker Connector v0.7.4.0上次更新日期：2023年12月4日
Chrome插件
2025-12-25
谷歌浏览器插件Chrome Extension Downloader 下载Chrome商店的CRX文件

谷歌浏览器插件Chrome Extension Downloader 下载Chrome商店的CRX文件

Chrome Extension Downloader 这款工具可以根据您的选择，直接以.crx或.zip文件的形式下载Chrome扩展文件。（1） 根据您的选择，直接以.crx或.zip文件的形式下载Chrome扩展文件。（2） 在线提取并查看Chrome扩展文件的源代码。此扩展不包含任何跟踪源代码或广告代码。您还可以通过使用相同的扩展下载扩展来检查是否注入了任何跟踪或广告代码。根据您的需要，您
Chrome插件
2025-12-25
谷歌浏览器插件NoFollow Simple 用黄色虚线框标注网页上的nofollow文字和图片链接

谷歌浏览器插件NoFollow Simple 用黄色虚线框标注网页上的nofollow文字和图片链接

NoFollow Simple 可以理解成《NoFollow》的简洁版，没有设置项，安装插件后，打开网页，会自动标注网页上加了nofollow的文字链接和图片链接。如果你想要更多选项的扩展，如网站过滤，为链接设置自己的CSS样式，当发现nofollow或noindex元标签时显示信息框，请查看开发者的另一个《NoFollow插件》。
Chrome插件
2025-12-27
谷歌浏览器插件Storage Area Explorer 用于Chrome打包应用程序和扩展的存储区域的简单编辑器

谷歌浏览器插件Storage Area Explorer 用于Chrome打包应用程序和扩展的存储区域的简单编辑器

Storage Area Explorer 是一款Chrome开发者工具，用于Chrome打包应用程序和扩展的存储区域的简单编辑器。此扩展仅对扩展开发人员有用，如果您不是开发人员，不要安装这个插件。提示：插件安装成功后，F12键打开Devtool，切换到“Storage Area Explorer”选项卡。
Chrome插件
2025-12-27
谷歌浏览器插件FATREL SEO工具 高亮网页上的NoFollow链接

谷歌浏览器插件FATREL SEO工具 高亮网页上的NoFollow链接

FATREL 是一款SEO工具，安装插件后，方便你可以在浏览器网页上直观的查看到nofollow链接，针对网页上的nofollow链接，插件会标注红色框框，分辨起来显得更加容易。不止是nofollow，还支持查看Rel=nofollow, Rel=sponsored and Rel=ugc …… nofollow含义：如果你是网页优化新手，可以了解，nofollow的意思是向谷歌发出信号，表示他们
Chrome插件
2025-12-27
谷歌浏览器插件CSS Peeper 提取网页CSS并构建漂亮的样式

谷歌浏览器插件CSS Peeper 提取网页CSS并构建漂亮的样式

CSS Peeper是一款前端开发者插件，是为设计师定制的CSS查看器。使用CSS Peeper 访问有用的样式，让设计师专注于设计，并尽可能少地花时间挖掘代码。有没有想过网站上的行高、字体或按钮大小是多少？我们为您提供满足您好奇心的终极工具。CSS Peeper 可以让您能够以最简单的方式检查代码，检查web上对象、颜色和资源的隐藏CSS样式。
Chrome插件
2025-12-27
谷歌浏览器插件WP Hive为WordPress.ORG显示插件报告

谷歌浏览器插件WP Hive为WordPress.ORG显示插件报告

WP Hive是一款针对用WordPress建站用户的插件，利用WP Hive的自有数据在WordPress.ORG的插件页为插件显示一个数据报告。
Chrome插件
2025-12-29
谷歌浏览器插件AMP Validator 谷歌官方提供的AMP验证器

谷歌浏览器插件AMP Validator 谷歌官方提供的AMP验证器

AMP Validator 是一款 AMP验证器插件，是由谷歌官方提供的。AMP即移动网页加速，其将资源托管在谷歌实现用户点击秒开无需等待。The AMP Validator will check the current page to see if it is an AMP page and then run it through the AMP validator and report if
Chrome插件
2025-12-29
谷歌浏览器插件RESTMan 用于处理http请求的浏览器扩展

谷歌浏览器插件RESTMan 用于处理http请求的浏览器扩展

RESTMan是通过http和https处理RESTAPI的扩展。如何使用单击任务栏上显示的RESTMan图标。在主输入字段中键入url，然后选择要使用的方法：GET/POST/PUT/DELETE/PATCH。单击箭头“发送”或按Ctrl+Enter。
Chrome插件
2025-12-29
谷歌浏览器插件JSON Viewer Pro 可视化JSON

谷歌浏览器插件JSON Viewer Pro 可视化JSON

JSON Viewer Pro是一款可视化JSON信息的插件，增强了JSON的易读性，插件无广告且免费。A completely free extension to visualise JSON response in awesome Tree and Chart view with great user experience and options. ✅…A completely free ex
Chrome插件
2025-12-30
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号