生产环境调用vue devtool的脚本

简介: 前端开发中大多常用技术栈都是简单易上手的vue。平时项目开发中配合使用vue-devtools如鱼得水。但是现网环境出现状况,如何快速定位问题呢?下面的操作让你调试现网环境就像开发时一样。

前端开发中大多常用技术栈都是简单易上手的vue。平时项目开发中配合使用vue-devtools如鱼得水。但是现网环境出现状况,如何快速定位问题呢?下面的操作让你调试现网环境就像开发时一样。

var Vue, walker, node;
walker = document.createTreeWalker(document.body,1);
while ((node = walker.nextNode())) {
  if (node.__vue__) {
    Vue = node.__vue__.$options._base;
    if (!Vue.config.devtools) {
      Vue.config.devtools = true;
      if (window.__VUE_DEVTOOLS_GLOBAL_HOOK__) {
        window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit("init", Vue);
        console.log("==> vue devtools now is enabled");
      }
    }
    break;
  }
}

12打开控制台,Console下复制粘贴上面代码,敲下回车,关闭控制台,再次打开就看到熟悉的vue tab了

image.png

目录
相关文章
|
3天前
|
资源调度 JavaScript 前端开发
Vue的路由管理:VueRouter的配置和使用
【4月更文挑战第24天】VueRouter是Vue.js的官方路由管理器,用于在单页面应用中管理URL路径与组件的映射。通过安装并引入VueRouter,设置路由规则和创建router实例,可以实现不同路径下显示不同组件。主要组件包括:`<router-link>`用于创建导航链接,`<router-view>`负责渲染当前路由对应的组件。此外,VueRouter还支持编程式导航和各种高级特性,如嵌套路由、路由参数和守卫,以应对复杂路由场景。
|
1天前
|
JavaScript 前端开发
【vue】iview如何把input输入框和点击输入框之后的边框去掉
【vue】iview如何把input输入框和点击输入框之后的边框去掉
7 0
|
1天前
|
JavaScript
【vue实战】父子组件互相传值
【vue实战】父子组件互相传值
6 1
|
1天前
|
JavaScript
vue2_引入Ant design vue
vue2_引入Ant design vue
6 0
|
2天前
|
JavaScript
vue知识点
vue知识点
10 4
|
2天前
|
存储 JavaScript 前端开发
【Vue】绝了!这生命周期流程真...
【Vue】绝了!这生命周期流程真...
|
2天前
|
JavaScript 索引
【vue】框架搭建
【vue】框架搭建
7 1
|
2天前
|
JavaScript 前端开发 容器
< 每日小技巧: 基于Vue状态的过渡动画 - Transition 和 TransitionGroup>
Vue 的 `Transition` 和 `TransitionGroup` 是用于状态变化过渡和动画的组件。`Transition` 适用于单一元素或组件的进入和离开动画,而 `TransitionGroup` 用于 v-for 列表元素的增删改动画,支持 CSS 过渡和 JS 钩子。
< 每日小技巧: 基于Vue状态的过渡动画 - Transition 和 TransitionGroup>
|
2天前
|
JavaScript
【vue】setInterval的嵌套实例
【vue】setInterval的嵌套实例
8 1
|
2天前
|
JavaScript 前端开发 安全
【Vue】内置指令真的很常用!
【Vue】内置指令真的很常用!