vue.js devtols插件(vue调试工具)

大小:2.56M 类别:
  • 浏览辅助

官方安全无插件纠错

  • 更新时间2025-01-07
  • 版本v7.6.8
  • 系统Pc
  • 语言简体中文

Vue.js devtools插件是一款用于调试Vue.js应用程序的Chrome和Firefox DevTools扩展工具,一般也被叫做vue调试工具。插件可以在浏览器开发者工具下调试代码,边侧边栏窗格页面,边检查代码,可以通过此工具对数据结构进行解析和调试。Vue.js devtools插件可以边侧边栏窗格中的页面,边检查代码,由于vue是数据驱动的,所以这就存在在开发调试中查看DOM结构并不能解析出什么,但是借助vue-devtools插件,我们就可以很容易的对数据结构进行解析和调试。

通过vue调试工具数据结构调试工具可以在浏览器开发者工具下调试代码,边侧边栏窗格页面,边检查代码,通过一些特殊的语法,将DOM和数据绑定起来,无需手动操作DOM,一旦创建了绑定,DOM将和数据保持同步,每当变更了数据,DOM也会相应地更新,有兴趣的小伙伴快来下载体验吧!

Vue.js devtools插件安装教程

1、首先用户点击谷歌浏览器右上角的自定义及控制按钮,在下拉框中选择工具选项,然后点击扩展程序来启动Chrome浏览器的扩展管理器页面

2、进入扩展程序页面后将开发者模式打勾

3、找到自己已经下载好的Chrome离线安装文件“ljjemllljcmogpfapbkkighbhhppjdbg.crx”,然后将其从资源管理器中拖动到Chrome的扩展管理界面中,松开鼠标就可以把当前正在拖动的插件安装到谷歌浏览器中去,但是谷歌考虑用户的安全隐私,在用户松开鼠标后还会给予用户一个确认安装的提示

5、这时候用户会发现在扩展管理器的中央部分中会多出一个拖动以安装的插件按钮,点击添加扩展程序用户这时候只需要点击添加按钮就可以把该离线Chrome插件安装到谷歌浏览器中去,安装成功。

Vue.js devtools插件使用方法

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

2、编译完成后,目录结构如下

3、修改shells目录下的mainifest.json 中的persistant为true

位置:C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\Extensions\ljjemllljcmogpfapbkkighbhhppjdbg\6.0.0.2_0

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

5、然后将刚刚编译后的工程中的shells目录下,chrome的整个文件夹直接拖拽到当前浏览器中,并选择启用,即可将插件安装到浏览器

6、打开一个已有的vue项目,我们以todolist项目为例,运行项目,然后在浏览器中--->设置--->更多工具--->开发者工具,进入调试模式

7、安装完插件后,将会看到多了vue一栏,选择vue,就可以在调试vue项目的过程中查看相应的组件等

功能介绍

1、上手简单

在用户已经了解HTML,CSS和JavaScript的情况下,阅读指南后即可立即开始构建。

2、功能多样

渐进式的生态系统,在图书馆和功能全面的框架之间进行扩展。

3、演示优化

20KB min+gzip运行,快速虚拟DOM,最少的优化工作。

Vue.js devtools插件还可以看到它们最后的更新时间,如果它们有自己的主页,还可以对它们进行分类和其他更多的功能。

展开内容

类似软件

网友评论

0人参与,0条评论
  • 评论需审核后才能显示

同类排行

  • global speed(网页视频加速插件)

    7.9/444K

    网页视频倍速控制插件

    查看
  • tampermonkey插件(油猴脚本)

    8.5/7.8M

    tampermonkey插件是一款免费的浏览器扩展和最为流行的用户脚本管理器,拥有适用于chrome谷歌浏览器、firefox火狐、360浏览器、Microsoft Edge、Opera Next等多个浏览器的不同版本,能够方便管理不同的脚本。

    查看
  • ViolentMonkey暴力猴(Chrome脚本管理插件)

    9.0/629K

    一个开源的用户脚本管理器,支持很多浏览器

    查看
  • Fatkun插件(图片批量下载插件)

    8.6/2.1M

    Fatkun插件是一款适用于chrome浏览器的图片批量下载插件,通过这款插件我们可以在谷歌浏览器进行批量图片下载,快速获取网页中的图片下载到本地,省去了图片一张一张下载的麻烦,提高效率,让我们的图片下载工作更加的轻松简单。

    查看
  • Code Cola(CSS样式可视化插件)

    9.1/189K

    code cola插件是一款能查看网页代码样式的chrome CSS样式可视化插件,相信大家都知道,网页设计出来以后,其样式都是不能在浏览器上修改的,只有设计网页的作者才能修改,但是有了这款Code Cola插件,用户就可以直接在浏览器上修改你打开的网页。

    查看
  • LastPass(Chrome密码保管插件)

    9.1/27.57M

    LastPass插件是一款可以帮助你保存你的所有密码的密码管理器插件,插件采用了强大的加密算法,能够自动登录/云同步/跨平台/支持多款浏览器,保它将保存你的密码给你访问的每台电脑和移动设备,而你仅需要记得一个密码你的LastPass的主密码即可,在使用时,LastPass将

    查看
  • NooBox二箱(Chrome以图搜图插件)

    9.0/2.72M

    NooBox二箱插件是一款用于搜索图片的chrome以图搜图插件,该插件可以直接将图片拖动到软件中进行搜索,实现以图搜图的模式,使用非常简单,支持十多个浏览器同时搜索,您可以选择相应的浏览器进行使用,支持一键打开、关闭搜索引擎让你可以随时随地的使用任何软件进行搜索。

    查看
  • 关灯看视频(Chrome自动调暗插件)

    9.1/8.4M

    关灯看视频插件是一款可以在你看视频的时候自动调暗浏览器页面的插件,插件可以在您看在线视频的时候屏蔽掉所有的干扰,将视频单独的凸显出来,给您营造一个关灯看视频的感觉,整体的效果就和电影院差不多,带给您全新的视觉体验。

    查看
  • Dualsub(通用字幕渲染器)

    9.1/135K

    Dualsub是一款通用字幕渲染器插件,软件功能强大全面,使用后可以帮助用户更轻松便捷的在浏览器显示视频双语字幕,非常方便实用,插件能够在用户使用浏览器观看视频的时候提供双语字幕显示,为用户的视频观看提供了便利。

    查看
  • 卖家精灵(Chrome关键词优化插件)

    9.5/5.82M

    卖家精灵插件是一款专用于电脑端浏览器上的一个插件工具,该插件提供全类目数据,以及各类目Top 10万的关键词深度数据,如搜索量、点击量、购买量、转化率等,还支持美国、日本、欧洲五国、加拿大、澳大利亚、印度等10国站点。

    查看
  • Screenity(屏幕记录器和注释工具)

    9.1/17.1M

    谷歌浏览器录屏拓展插件

    查看
  • Screen Shader(Chrome调节屏幕色温插件)

    9.1/141K

    Screen Shader插件是一款防蓝光护眼插件,插件主要能通过将网页整体颜色调整为舒缓的的橙色来使得网页中不会出现刺激眼睛的颜色,在安装了这款插件后,所有页面的整体颜色都将会变成橙色,而使用者可以通过点击插件图标来调整该插件的亮度以及深度,同时该插件还能通过定位使用者所

    查看
  • 几枝(Chrome古诗词标签插件)

    9.1/5.17M

    几枝插件是一款专业高效的浏览器插件,软件用于四种简洁的风格,可以让你的标签页面变的非常的有形,每款都很多精致、大气,绝对令人惊喜,小伙伴们可以不断进行古诗词转换,通过新标签页展示中国传统色的动画效果和经典古诗词搭配让你感受到一定古风氛围。

    查看
  • Flonnect(免费录屏工具)

    8.8/1.43M

    Flonnect是一款适用于浏览器的免费录屏工具。它可以帮助用户录制屏幕和摄像头,并下载具有清晰音频质量的录屏视频。Flonnect目前提供了Chrome扩展,简化了录制过程,并提供了一系列强大的功能来增强视频效果。

    查看
  • Chrome货币转换插件

    9.1/433K

    货币转换器插件是一款Chrome数字货币汇率转换器,使用此货币转换器实时计算货币和汇率,您可以在旅行计划中使用它,交易外汇市场,股票交易所,甚至可以使用二元期权来转换世界上任何地方的货币。

    查看