Vue DevTools可使用修正方法

因为工作要求,目前主要在用Vue.js技术栈做开发,调试是必不可少的,这里会用的Vue DevTools的调试工具,问题就出在这里,当用Vue DevTools做调试时,很多时候都不能用,提示没有监测到Vue,这让工作效率瞬间拉低了。


修正Vue DevTools

好了,开始正题,下面来说一下修正的方法。

先从官网把Vue DevTools下载下来(https: //github.com/vuejs/vue-devtools)。

关键步骤一.修改persistent

找到文件vue-devtools/shells/chrome/manifest.json,修改persistenttrue

保存后,编译一下:

关键步骤二.勾选允许访问文件网址

上一步已经把Vue DevTools写好了,接下来是安装这个扩展。

打开Chrome,在地址栏输入chrome://extensions/,直接进入Chrome的扩展。

勾选最上方的开发者模式,再点击“加载已解压的扩展程序…”,路径为:vue-devtools-master/shells/chrome

勾选允许访问文件网址

关键步骤三.加入Vue文件中加入Vue.config.devtools

Vue.config.devtools = true; //这步很重要
new Vue({el: '#app',data: {a: 123,}
}); 

搞定!


效果


下载

  • 已修正版的Vue DevTools下载:vueDevTools(可监测修正版).zip

博客名称:王乐平博客

CSDN博客地址:http://blog.csdn.net/lecepin

知识共享许可协议
本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/401668.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ZRender实现粒子网格动画实战

注:本博文代码基于ZRender 3.4.3版本开发,对应版本库地址:ZRender 库。 效果 实现分析 通过上面显示的效果图,可以看出,这种效果就是在Canvas中生成多个可移动的点,然后根据点之间的距离来确定是否连线&am…

CSS动画实战:创建一个太极Loading图

这里主要是使用CSS的animation和伪类来构建,分析设定关键帧的执行顺序和时间段。 效果 动画分析 首先通过效果对动画执行进行一下分析: 边框的四条边进行按顺序动画加载 。矩形边框变为圆行边框。太极图内部图案渐渐出现。太极图旋转。整个动画逆序执…

PWA(Progressive Web App)入门系列:(二)相关准备

前言 在上一章中,对PWA的相关概念做了基本介绍,了解了PWA的组成及优势。为了能够更快的进入PWA的世界,这一章主要对在PWA开发中,需要注意的问题,运行的环境及调试工具做介绍说明。 浏览器要求 因为目前各浏览器对于…

PWA(Progressive Web App)入门系列:(三)PWA关键技术Manifest

前言 前面说过,让Web App能够达到Native App外观体验的主要实现技术就是PWA中的manifest技术,本章会详细说明manifest的实现,及各个参数的具体含义,还将了解如何定义Web App的启动图标、启动样式等。 简介 manifest是一种简单的…

利用百度LBS做一个小Demo

为什么80%的码农都做不了架构师?>>> 申请ak(即获取密钥)http://lbsyun.baidu.com/apiconsole/key?applicationkey 去这儿注册一个开发者账号即可拼写发送http请求的url譬如这样的调用http://api.map.baidu.com/geocoder/v2/?ad…

PWA(Progressive Web App)入门系列:(四)Promise

前言 这一章说一下ES6的Promise对象。为什么要在PWA系列的文章中讲Promise呢?因为PWA中的许多技术API中都是以Promise返回的方式返回的,为了对后续章节中PWA技术API更好的理解,这里就来说一个Promise对象。 Promise出现的背景 在JavaScrip…

图文详解如何搭建Windows的Android C++开发环境

原地址:http://www.apkbus.com/android-18595-1-1.html ////TITLE:// 图文详解如何搭建Windows的Android C开发环境(一)//AUTHOR:// norains//DATE:// Thursday 14-April-2011//Environment:// Cygwin 1.7.9// Android NDK r5//1. 下载A…

PWA(Progressive Web App)入门系列:(五)Web Worker

前言 在说Service Worker前有必要说一下Web Worker,因为Service Worker本身就属于Web Worker的延伸,大部分功能也是基于Web Worker进行的扩展。 背景 众所周知,JavaScript引擎是以单线程调度的方式进行,我们无法同时运行多个Ja…

Glob Patterns匹配模式使用

前段时间在用workbox时,在做precache时,匹配模式基于的是Glob Pattern模式,于是就看了下相关文档。 下面翻译一下node-glob的使用,原文:https://github.com/isaacs/node-glob#glob-primer Glob 像在shell里面&#x…

Workbox CLI v3.x 中文版

在写PWA应用时,用到WorkBox工具,使用过程中发现没有中文的帮助文档,为了体验好一些,也为了方便自己和他人查看,在这里翻译了一下workbox-cli。 Workbox CLI 是什么? Workbox命令行(在workbox-cli包内&…

Workbox.routing v3.x 中文版

NAMESPACE STATIC VERSION V3.6.1 类 NavigationRoute NavigationRoute可以轻松创建匹配浏览器navigation requests的Route。 它仅匹配mode设置为navigate的请求。 您可以只使用blacklist和whitelist参数中的一个或两个,将此路由应用于导航请求中。 RegExpRout…

Workbox.strategies v3.x 中文版

NAMESPACE STATIC VERSION V3.6.1 该模块提供了大多数serviceworker常用的缓存策略的简单实现。 类 CacheFirst cache-first请求策略的实现。 缓存优先策略对于带版本号的资源是非常有用的,像这种URLstyles/example.a8f5f1.css,因为它们可以长时间缓存…

集算器访问HTTP数据的代码示例

使用集算器(esProc)可以很方便的从http数据源读取数据进行处理。本例子中有一个servlet,对外提供json格式的雇员信息查询。Servlet访问数据库的员工表,保存了员工的信息,如下:EID NAME SURNAME …

PWA(Progressive Web App)入门系列:Cache Storage Cache

前言 目前浏览器的存储机制有很多,如:indexedDB、localStorage、sessionStorage、File System API、applicationCache 等等,那为什么又制定了一套 Cache API 呢?对比其他存储机制有什么优势? 简介 Cache API 是一套…

「浏览器插件」无广告国内视频平台直接播放插件

前段时间发现一些比较不错的解析国内视频平台的一些 API 接口,很早之前基于这些接口做过一个 Android 端的播放软件,但为了更方便使用吧,于是做了一个 Chrome 的浏览器插件,解析接口也是在线更新的,所以用起来会比较方…

kafka性能测试(转)KAFKA 0.8 PRODUCER PERFORMANCE

来自:http://blog.liveramp.com/2013/04/08/kafka-0-8-producer-performance-2/ At LiveRamp, we constantly face scaling challenges as the volume of data that our infrastructure must deal with continues to grow. One such challenge involves the logging system. At…

Workbox-Window v4.x 中文版

Workbox 目前发了一个大版本,从 v3.x 到了 v4.x,变化有挺大的,下面是在 window 环境下的模块。 什么是 workbox-window? workbox-window 包是一组模块,用于在 window 上下文中运行,也就是说,在你的网页内…

媒体播放器三大底层架构

2019独角兽企业重金招聘Python工程师标准>>> 媒体播放工具,这里主要指视频播放,因为要面临庞大的兼容性和纷繁复杂的算法,从架构上看,能脱颖而出的体系屈指可数。大体来说业界主要有3大架构:MPC、MPlayer和…

PWA 可用性检测工具

针对移动端或者 PC 端浏览器是否对 PWA 可用的问题上,做了一个简单的站点,来实现上述问题的方便检测。让开发者较快的了解终端浏览器的特性支持度。 使用 工具地址:https://lecepin.gitee.io/detect-sw/ 地址二维码: 检测 可…

PWA 应用列表及常用工具

引言 在做 PWA 的过程中自己写了一些相关的应用和工具,在这里整合下,方便记录及查找使用。 应用列表 PWA 支持检测工具番茄钟二维码生成新闻应用身体数据统计应用支付宝集福应用田英章书法字典应用抖音无水印下载应用很好用的备忘录精神氮泵 PWA 支持检…