Vuejs调试工具使用

一、使用环境 

  • 设备:Mac
  • 浏览器:Chrome
  • IDE: WebStorm

二、调试需求

  •     通过 Chrome 浏览器调试
  •     能够收集到页面错误信息
  •     查看Vue数据
  •     打印调试
  •     调试页面简洁且易操作

三、添加扩展插件

  •      插件:Vue.js devtools       
  •      安装:通过谷歌商店搜索安装

1.打开扩展程序

Vuejs调试工具使用

Vuejs调试工具使用                Vuejs调试工具使用

搜索 Vue.js devtools ,并且安装

Vuejs调试工具使用

四、页面调试设置

1.在扩展程序中找到Vue.js devtools插件,点击详细信息

Vuejs调试工具使用

把以下两项选择上

Vuejs调试工具使用

否则在要调试对页面上会出现以下信息 

Vuejs调试工具使用

2.刷新要调试的页面

Vuejs调试工具使用

出现 Vue 选项 即可点击选项,对页面进行调试了

Vuejs调试工具使用