当前位置:首页 > 软件下载 > 编程开发 > 编程软件 > Vue Devtools(vue调试工具)插件中文版 最新版

Vue Devtools(vue调试工具)插件中文版 最新版

评分:5

Vue Devtools 是一个用于网页前端开发的vue调试工具,该软件可以帮助用户在浏览器中调试和开发vue.js的运行代码,这是一个非常有用的编程开发辅助工具。VueDevtools插件只是一个Chrome和FirefoxDevTools扩展插件,在浏览器中,可以一边检查一边检查代码,方便实用。

VueDevtools用户可以使用Vue.jsdevtools数据结构调试工具在浏览器开发人员工具下调试代码,在侧栏窗格页面的同时检查代码,帮助用户更好地开发页面结构。

  

Vue Devtools使用方法

 只有Vue.config.devtools===true才能使用devtools。

1、components面板。

components面板内可以看到我们定义的一系列组件,选择对应的组件后,右侧面板可以看到组件内的data、props、computed、attrs属性。

同时,data属性可以编辑,编辑后的页面也会实时变更。

选择Select后,您可以实时选择页面中的组件,并快速定位与调试面板对应的组件。

鼠标右键->InspectVuecomponent也可以快速定位组件。可根据组件名称筛选组件。

也可以筛选数据。

点击InspectDom直接定位到Elements面板内的DOM元素。

每个组件的例子都有变量,现在选择的组件是$vm0,其馀组件从上到下的顺序值($vm1、$vm2、$vm3…),控制台可以直接印刷$vm0。

2、Vuex面板。

Vuex面板可以每次记录mutation。点击对应的mutation,在右侧可以看到mutation提交的详细信息,与此时state的状态相同。

同时,可以筛选mutation和state。

鼠标滑过mutation的记录,commit、revert、TimeTravel、commit:保存指定的mutation,mutation的记录最上面的BaseState将成为本次mutation的state,同时本次commit前的mutation将被删除。revert:恢复到指定的mutation,现在的state变成了知道mutation的state,revert后的记录被删除。TimeTravel:时间旅行,state的数据切换到指定的mutation,但所有记录都保存下来。

Vuex面板支持导出/导入state的功能导出:将state复制到剪板上。导入:支持将json数据直接导入vuex。

3、Events面板。

Events面板可以记录每次$emit触发的事件,右侧可以看到事件的详细信息,同样支持筛选。

name:事件名type:事件类型为了与Vue1.x兼容,在Vue1.x中以$dispatch触发事件时,type为$dispatchsource:触发事件的组件paload:负荷,触发事件时传达的参数。

4、Routing面板。

Routing面板有history、routeshistory每次记录路由的变化,请注意这里的history==window.history,每次路由的变化都会变成history,即使是this.$replace跳跃的路由。

右侧显示详细信息,面板中的from、to和vue-router路由钩中的from、to表示相同的意思。

routes展示所有路由,基本上是vue-router中routes的可视化展示。

用手把手使用vuedevtools。

5、Performance。

performance有助于分析页面和组件的渲染状况。有两个功能Framespersecond和Componentrender。

Framespersecond:浏览器每秒渲染多少帧,即每秒渲染多少页。蓝色柱越高,fps越高,页面越光滑。它还可以记录引起页面渲染的原因,如M、E和R。m:mutationE:eventsR:routes。

Componentrender可以记录组件的渲染时间,注意这个时间是累积的。例如,这个组件渲染了两次,那个渲染时间是这两次的总时间。同时也可以看到组件内各生命周期钩的执行时间。

6、Settings。

Normalizecompontname:Components面板组件名称显示风格,originame原始组件名称,Pascalcase大驼峰,Kebabcase中横线。

Editableprops:能否编辑props属性,默认情况下不能编辑components面板内的props属性。

NewVuexbackend:Vuex面板是否单独在后台运行,内存是否更快、更少。

Theme:主题。TimeFormat->Displaymilliseconds:时间格式显示为毫秒,但目前没有出现在哪里。AtuoloadVuexstate:是否自动加载vuexstate,目前没有效果。

  

Vue Devtools(vue调试工具)插件中文版 最新版

Vue Devtools功能介绍

 - 上手简单

当用户已经了解HTML、CSS和JavaScript时,阅读指南后可以立即开始构建。

-多种功能

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

-演示优化

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

您也可以看到他们的最终更新时间,如果他们有自己的主页,也可以对他们进行分类和其他功能。

  

Vue Devtools(vue调试工具)插件中文版 最新版

Vue Devtools安装方法

 1.下载安装文件。

下载插件,在浏览器安全提示时选择保留,在下载文件夹中找到下载的文件,后缀是.crx。

说明:如果有安全提示,请选择保留。这是浏览器的默认设置,我们的外挂不会危害你的电脑。

2.打开扩展程序安装页面。

复制chrome://extensions,贴在地址栏上,按回车键进入扩展程序安装页面,打开右上角的【开发者模式】。

3.安装插件。

将下载的.crx文件拖到扩展设置页面,等待数秒,点击设置弹仓添加即可。

  

Vue Devtools(vue调试工具)插件中文版 最新版

Vue Devtools注意事项

 当页面使用Vue.js的生产/精简版本时,默认情况下禁用devtools检查,所以Vue窗格不会显示。

为了将它应用到通过file://协议打开的页面上,需要在Chrome的ExtensionManagement面板中为这个扩展程序选择“允许访问文件URL”。

只有在您想要从源代码构建扩展中获得尚未发布的功能时,才需要进行此操作。

  

Vue Devtools(vue调试工具)插件中文版 最新版 软件截图
Vue Devtools(vue调试工具)插件中文版 最新版

Vue Devtools(vue调试工具)插件中文版 最新版下载地址

  • PC版

Vue Devtools(vue调试工具)插件中文版 最新版

相关版本

大家都喜欢

  • 电脑软件
  • 手机软件

本类排行

  • 周排行/
  • 月排行