有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

vue-devtools插件(下载安装步骤)使用方式

vue 炮渣日记 1个月前 (11-07) 43次浏览 已收录 0个评论 扫描二维码

vue-devtools的安装

vue-devtools是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展,可以在浏览器开发者工具下调试代码。前端开发工程师应该比较熟悉这款工具,可以边看侧边栏窗格中的页面,边检查代码。由于vue是数据驱动的,所以就会存在在开发调试中查看DOM结构并不能看到我们想看到的内容,那么借助vue-devtools插件,我们就可以很容易的对数据结构进行解析和调试。

本文重点介绍vue-devtools安装方法,提供chrome插件直接安装方法。接下来我们就介绍一下vue-devtools的安装。

1.下载好vue-devtools压缩包(crx类型的压缩包),直接解压到本地目录中。如下图:

vue-devtools插件(下载安装步骤)使用方式

2.打开Chrome浏览器,选择“自定义及控制”单击,在下拉菜单中选择“更多工具”->“扩展程序”,如下图:

vue-devtools插件(下载安装步骤)使用方式

3.将右上角的开发者模式打开,如下图:

vue-devtools插件(下载安装步骤)使用方式

4.点击”加载已解压的扩展程序”按钮,选择第一步中保存vue-devtools的目录,点击”选择文件夹”按钮即可。自动回到浏览器后出现如下图所示:

vue-devtools插件(下载安装步骤)使用方式

5.在Chrome浏览器中访问vue项目,并打开调试模式(F12),可以看到Vue选项卡,如下图:

vue-devtools插件(下载安装步骤)使用方式
喜欢 (1)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址