谷歌浏览器安装 Vue.js devtools 插件
文章目录
- 1. 安装
- 2. 使用
- 3. 注意
1. 安装
① 搜索极简插件：https://chrome.zzzmh.cn/index
② 搜索框输入 Vue，选择 Vue.js devtools
③ 从历史版本里面选择并下载，选择 6.4 版本的就行
④ 打开浏览器，右上角三个点 → 扩展程序 → 管理扩展程序，打开右上角的开发者模式，然后将解压好的 Vue.js devtools 拖拽到拓展程序的空白区域
⑤ 点击详情，打开允许访问文件地址
2. 使用
在 VSCode 写好 Vue 代码，然后按住 Alt+B 快捷键直接打开浏览器，F12 → Vue → Root，即可在右侧看到具体的 data，我们可以直接在此处进行修改并调试。
3. 注意
① 版本不要太高，否则浏览器 Vue 插件可能无法正常显示；
② 一定要打开开发者模式；
③ 一定要打开允许访问文件地址；
④ 安装好插件后，要重启浏览器才可以生效；
⑤ Vue.js devtools 对中文的兼容性不是很友好，所以当文本是纯中文时，点击 Root 可能会没有反应，至少要掺杂几个英文字母进去。