vue dev-tools插件

背景

        在项目上用到vue技术，在bilibili上学习vue，期间老师推荐使用vue dev-tools调试神器，所以过来安转和使用了，用了感觉不错，希望给大家带来效率的提升。

定义

        Vue DevTools 是一款旨在增强 Vue 开发者体验的工具，它是一款功能强大且用途广泛的工具，可以在使用 Vue 应用程序时显着提高您的生产力和调试能力。它的实时编辑、时间旅行调试和全面检查功能使其成为任何Vue.js开发人员的必备工具。

作用

        Vue DevTools 提供了几个优势，可以显著增强您的开发过程和Vue.js应用程序的调试体验：

        实时编辑属性：Vue DevTools 允许你直接实时编辑属性并立即看到反映的更改。此功能对于快速测试更改特别有用，而无需重新启动应用程序或手动更新代码。

        时间旅行调试：最强大的功能之一是它能够执行时间旅行调试。这意味着您可以在任何时间点检查商店的状态，从而跟踪错误并了解应用程序的状态如何随时间变化。

        Vue Router 集成：查看路由列表及其详细信息。

        Pinia 集成：该工具将所有发出的事件收集到一个位置，允许您监控和跟踪应用程序的自定义事件，包括每个事件的源组件、名称、大小和有效负载。此功能可用于识别性能瓶颈和优化应用程序。

安装

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

        百度云盘：https://pan.baidu.com/s/1ZXldJTWhsEOCcHXRtwdqyg?pwd=vkz8

        如果时效7天，如果时间过了，请留言，我第一时间会回复最新地址。

使用

        打开浏览器右上角的设置–>更多工具–>扩展程序，打开开发者模式

        将vue-devtools.zip拖入浏览器拓展程序。

        拓展成功效果图

        按F12后在控制台最右侧有vue标识