- Vue.js 3.0从入门到精通(视频教学版)
- 李小威编著
- 402字
- 2025-02-18 02:07:02
2.3 安装vue-devtools
vue-devtools是一款调试Vue.js应用的开发者浏览器扩展,可以在浏览器开发者工具下调试代码。不同的浏览器有不同的安装方法,以浏览器为例,其具体安装步骤如下:
(1)打开浏览器,单击“自定义和控制”按钮,在打开的下拉菜单中选择“更多工具”菜单选项,然后在弹出的子菜单中选择“扩展程序”菜单项,如图2-16所示。

图2-16 选择“扩展程序”菜单项
(2)在“扩展程序”界面中单击“Chrome网上应用店”链接,如图2-17所示。

图2-17 “扩展程序”界面
(3)在“chrome网上应用店”搜索“vue-devtools”,如图2-18所示。

图2-18 chrome网上应用店
(4)添加搜索到的扩展程序Vue.js devtools,如图2-19所示。

图2-19 添加扩展程序
(5)在弹出的窗口中单击“添加扩展程序”按钮,如图2-20所示。

图2-20 单击“添加扩展程序”按钮
(6)添加完成后,回到扩展程序界面,可以发现已经显示了Vue devtools调试程序,如图2-21所示。

图2-21 扩展程序界面
(7)单击“详细信息”按钮,在展开的页面中选择“允许访问文件网址”选项,如图2-22所示。

图2-22 详细信息页面