Vue浏览器调试工具VueTools安装以及使用

摘要:
ue-devtools是一款基于chrome浏览器的插件,用于vue应用的调试,这款vue调试神器可以极大地提高我们的调试效率。vue-devtools使用起来还是比较简单的,上手非常的容易,这里就细讲其使用说明了。安装方法二:这里以chrome浏览器为例:1、打开chrome网上应用店,搜索vue.js注:如果打不开页面需要代理选择第一个,点击添加至chrome点击添加扩展程序安装完成
ue-devtools是一款基于chrome浏览器的插件,用于vue应用的调试,这款vue调试神器可以极大地提高我们的调试效率。帮助我们快速的调试开发vue应用。
vue-devtools如何使用

当我们添加完vue-devtools扩展程序之后,我们在调试vue应用的时候,chrome开发者工具中会看一个vue的一栏,点击之后就可以看见当前页面vue对象的一些信息。vue-devtools使用起来还是比较简单的,上手非常的容易,这里就细讲其使用说明了。

注意:如果使用的在线引用vue.js,不能引用vue.min.js版本,需要使用vue.js版本
Vue浏览器调试工具VueTools安装以及使用第1张

安装方法

浏览器添加插件

1.将提前下载好的组件插件减压

2.浏览器地址栏输入chrome://extensions转到扩展程序,启用“开发者模式”,点击“加载已解压的扩展程序”按钮,选择目录vue-devtools-5.1.1shells下的chrome文件夹,插件添加成功!

安装方法

这里以 chrome 浏览器为例:

1、打开 chrome 网上应用店,搜索 vue.js

注:如果打不开页面需要 代理

Vue浏览器调试工具VueTools安装以及使用第2张

选择第一个,点击 添加至chrome

Vue浏览器调试工具VueTools安装以及使用第3张

点击添加扩展程序Vue浏览器调试工具VueTools安装以及使用第4张

安装完成

免责声明:文章转载自《Vue浏览器调试工具VueTools安装以及使用》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Crontab详细用法-定时任务详解使用 supervisor 管理进程下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

vue-创建组件的5种方法

Vue组件分为全局组件和局部组件以及Vue 构造器创建组件,统计为5种创建组件的方式 一、效果截图 创建的h1-h5五个组件 组件名称和结构 二、具体的写法如下: 1、全局-直接创建 Vue.component('first', { template: '<h1>第一种创建组件的方法</h1>' }) 2、全局-定义再...

初次使用BAT,请检查Chrome浏览器和ChromeDriver兼容性

ChromeDriver可以理解为Chrome驱动,它是架在BAT程序和Chrome之间的桥梁。但是ChromeDriver的问题是,每个版本的兼容范围很窄,通常只能兼容3个Chrome版本。 因此,需要检查BAT文件夹内的ChromeDriver版本是否能兼容本机的Chrome 步骤: 1. 查看Chrome版本 2. 查看ChromeDriver版本...

vue 手指长按触发事件

按钮 <span @touchstart="gtouchstart()" @touchmove="gtouchmove()" @touchend="gtouchend()">按住说话</span> data数据定义一个定时器 timeOutEvent:0,//定时器 方法         gtouchstart(){...

前端框架Vue自学之Vue CLI(五)

终极目标:掌握和使用Vue(全家桶:Core+Vue-router+Vuex) 本博客目的:记录Vue学习的进度和心得(Vue CLI) 内容:学习和使用Vue CLI2 和 Vue CLI3。如果了解webpack如何一步步配置的,建议可以先看我的前一个博客:前端框架Vue自学之webpack(四)。 正文: Vue CLI 一、Vue CLI 1、前言...

VUE内使用RSA加解密

说明:为防止私钥泄漏,由服务端生成两对密钥,分别是(前端公钥+私钥,后端公钥加私钥),采用加解密模式为:前端使用后台公钥加密,使用前端私钥解密;后端使用前端公钥加密,使用后端私钥解密。前后端统一使用公钥加密,私钥解密 一、现在vue项目中安装依赖包jsencrypt   npm install jsencrypt --save-dev 二、在项目中新建js...

Chrome 扩展crx开发

Chrome扩展提供的入口 左键 crx,popup 右键 crx,homelink + option 右键上下文菜单 Chrome扩展的文件结构 Chrome扩展就是一个文件夹下包括一堆符合规范的文件。首先是清单文件manifest.json,指定了该扩展的整体布局和结构。实例: { // 清单文件的版本,这个必须写,而且必须是2 "mani...