Vue的调试工具安装【Vue学习笔记3】

一、Vue的调试工具

1.1. 安装与配置vue-devtools调试工具

1.1.1. 插件下载

访问极简插件官网搜索devtools

https://chrome.zzzmh.cn/#/index

image.png

1.1.2. 下载

image.png

1.1.3. 下载好以后，解压

1.1.4. 配置 Chrome 浏览器中的 vue-devtools

点击 Chrome 浏览器右上角的 按钮，选择 更多工具 -> 扩展程序

image.png

1.1.5. 打开开发者模式

image.png

1.1.6. 将插件拖动到谷歌的扩展程序页面就可以直接安装了

image.png

1.2. 使用vue-devtools调试Vue页面

注意：只有在含有Vue的网页中才有如下选项

1.2.1. 按F12打开调试工具

image.png

1.2.2. 组件页面查看（默认）

image.png

1.2.3.切换Vuex页面

image.png