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，修改persistent为true。

保存后，编译一下：

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

上一步已经把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 国际许可协议进行许可。

Vue DevTools可使用修正方法相关推荐

Vue生产环境调试的方法
Python微信订餐小程序课程视频 https://blog.csdn.net/m0_56069948/article/details/122285951 Python实战量化交易理财系统 https ...
【进阶篇】Vue Devtools——vue开发调试神器
工欲善其事,必先利其器,vue2.0进阶系列的知识更接近我们的实际开发所需,在开发过程中,有个好的调试工具是事半功倍的,Vue Devtools就是我们选择的调试工具,它是一款chrome浏览器的插件 ...
Vue Devtools不显示Components
Vue Devtools不显示Components 遇到的问题:红框处的组件未显示,清理浏览器缓存也未显示. 解决方法:往搜索框中输入关键字母即可搜索出,然后就都显示了浏览器:Google Chro ...
安装Vue Devtools调试工具插件
Vue Devtools是Vue官方推出的浏览器插件,可以算是Vue开发调试神器,它可以让你能够在浏览器实时的编辑数据并立即看到其反映出来的变化,让你告别console大法.非常好用,谁用谁知道,Vu ...
chrome插件Vue Devtools失效
vue开发神器Vue Devtools报错: Vue.js is detected on this page. Devtools inspection is not available because ...
vue 在浏览器控制台怎么调试谷歌插件vue Devtools
vue 在浏览器控制台怎么调试谷歌插件vue Devtools 问题: vuejs里面的变量,怎么用浏览器的console查看? 例如,想在chrome里用console.log查看变量$data, ...
pHp封装成vue,vue.js生成条形码的方法
本文主要和大家分享vue.js生成条形码的方法,主要以代码的形式和大家分享,希望能帮助到大家. 1.下载插件npm install @xkeshi/vue-barcode //下载条形码插件 2.在m ...
vue如何封装请求接口方法
vue如何封装请求接口方法方法一首先创建一个server.js文件引入axios和qs //引入axios和qs插件 import axios from 'axios' import qs fr ...
Vue2.x源码学习笔记-Vue实例的属性和方法整理
还是先从浏览器直观的感受下实例属性和方法. 实例属性: 对应解释如下: vm._uid // 自增的id vm._isVue // 标示是vue对象,避免被observe vm._renderProx ...

Vue DevTools可使用修正方法

修正Vue DevTools

关键步骤一.修改`persistent`

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

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

效果

下载

Vue DevTools可使用修正方法相关推荐

最新文章

热门文章

Vue DevTools可使用修正方法

修正Vue DevTools

关键步骤一.修改persistent

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

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

效果

下载

Vue DevTools可使用修正方法相关推荐

最新文章

热门文章

关键步骤一.修改`persistent`

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

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