Vue.js调试神器vue-devtools的安装

一、前言

在使用 Vue 时，官方推荐我们在浏览器上安装 Vue Devtools。它允许我们在一个更友好的界面中审查和调试 Vue 应用。

image-20230302174613276

二、教程

下载

• vue.js插件下载：https://777nx.lanzoue.com/ib5lm0p1nn0d

安装

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

image-20230302180452899

1. 完成安装点击详情，将允许访问文件网址打开

image-20230302180656415

image-20230302180725782

使用

安装完成之后运行你的vue开发项目，F12就可以看到这个vue-devtools插件了，可以快速调试了

image-20230302181129729

三、最后

日日夜夜的劳作只为你可以更快乐

嘛咪嘛咪哄~bug通通不见了!