讲师中心 微信公众号
首页
文章
后端开发 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 访问量:  10591
下载量:  333
点击下载
更多>

最新下载

谷歌浏览器插件Cookie master 好用的cookie编辑和管理工具

谷歌浏览器插件Cookie master 好用的cookie编辑和管理工具

Cookie master是一个管理网站cookie的工具，可以对cookie进行编辑，不会收集隐私，也没有广告和多余的功能。
0 2026-01-20
简化 GitHub 界面并实用的浏览器扩展 Refined GitHub

简化 GitHub 界面并实用的浏览器扩展 Refined GitHub

Refined GitHub 是一个简化 GitHub 界面并拥有实用功能的浏览器扩展程序。支持 Chrome、Firefox 与 Opera。功能：单击 alt 切换过期 PR comments 与 PR/commit 文件。y 键复制文件的规范链接。comment 中 tab/shift tab 缩进文本。用 Squash and merge 合并请求时，使用 PR 标题作为提交标题。在 co
0 2026-01-20
Eye Dropper前端开发 浏览器窗口内取色器

Eye Dropper前端开发 浏览器窗口内取色器

Eye Dropper是一款浏览器窗口内取色器（拾色器）Chrome插件，方便前端配色使用。
0 2026-01-19
Python Shell测试python代码、测试正则表达式

Python Shell测试python代码、测试正则表达式

这款插件相对来说要小众一些，Python是一种脚本语言，其设计理念强调代码可读性。Python Shell插件适用于偶尔需要用Python做项目的开发者朋友，普通Chrome用户不用下载，程序员专用工具。插件功能并不多，但很实用，提供了测试Python代码语法和测试正则的功能，还附加了一个计算器功能。
0 2026-01-19
Sourcegraph 更好地在Github上阅读和理解项目代码的工具

Sourcegraph 更好地在Github上阅读和理解项目代码的工具

简单地说，Sourcegraph是一个帮助我们更好地阅读和理解代码的工具。安装插件后进入GitHub，找一个项目，点开一个文件，在工具栏里会看到多了一个View File的按钮，点击此按钮，如下图：这样我们就可利用Sourcegraph很方便地查看代码了，是不是很方便，而且项目结构也非常清晰。相关的插件有Octotree（GitHub开源代码树状结构形式查看）。
0 2026-01-19
谷歌浏览器插件FontViz 轻松查找出网站网页上使用的字体

谷歌浏览器插件FontViz 轻松查找出网站网页上使用的字体

FontViz 是一款帮助前端开发者识别网页字体的插件，这类的插件我们之前也推荐过，比如whatfont、Fonts Ninja 等等。这类插件彻底改变了网页设计师、开发人员和QA专业人员的字体验证。从字体大小和系列到HTML标签和渲染一致性，FontViz 这个强大的工具为您提供了一套全面的功能，以确保您的网络项目中的像素完美排版。插件值得推荐。
0 2026-01-19
谷歌浏览器插件ReColor 检查电脑屏幕的坏点噪点的插件

谷歌浏览器插件ReColor 检查电脑屏幕的坏点噪点的插件

ReColor 是一款检测工具，能够查找并修复屏幕上颜色加深的像素，较浅的区域，查找噪点。开启插件后，会全屏显示，如果需要退出，按ESC键或F11键。This extension will run in fullscreen to show various colors on your display and help you detect for dead pixels and also red
0 2026-01-19
谷歌浏览器插件User

谷歌浏览器插件User

User-Agent Switcher是一款方便在浏览器上切换User-Agent 的插件，而且无论您喜欢哪种浏览器或操作系统，做开发做测试还是自己对某个设备类型浏览有偏好可以通过切换user-agent来解决，看到在不同设备下的展示效果。
0 2026-01-19
谷歌浏览器插件SNAP检测「SnapTest」Selenium IDE替代品

谷歌浏览器插件SNAP检测「SnapTest」Selenium IDE替代品

SNAP检测「SnapTest」Selenium IDE替代品。在各种框架中创建、维护和自动生成手工QA自动化代码。
0 2026-01-19
谷歌浏览器插件Jam 网页开发 找bug的工具 错误报告工具 记录浏览器中的错误

谷歌浏览器插件Jam 网页开发 找bug的工具 错误报告工具 记录浏览器中的错误

Jam 是一个网页开发工程必备的工具之一，能够帮你科学快速的寻找bug，并形成一个错误报告，将浏览器中的错误记录下来。
0 2026-01-19

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号