什么,你还不会调试线上 vue 组件?

前言

彦祖们,在日常开发中,不知道你们是否遇到过这样的场景

在本地测试开发 vue 组件的时候非常顺畅

一上生产环境,客户说数据展示错误,样式不对...

但是你在本地测试了几次,都难以复现

定位方向

这时候作为老 vuer,自然就想到了 vue devtools

但是新问题又来了,线上环境我们如何开启 vue devtools 呢?

案例演示

让我们以 element-ui 官网为例

先看下此时的 chrome devtools 是没有 Vue 的选项卡的

一段神奇的代码

其实很简单,我们只需要打开控制台,运行一下以下代码

js 复制代码
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;
  }
}

显示 vue devtools now is enabled

证明我们已经成功开启了 vue devtools

功能验证

然后再重启一下 chrome devtool 看下效果

我们会发现此时多了一个 Vue 选项卡,功能也和我们本地调试一样使用

对于遇到 vue 线上问题调试,真的非常好用!

写在最后

本次分享虽然没有什么技术代码,重在白嫖

感谢彦祖们的阅读

个人能力有限

如有不对,欢迎指正 🌟 如有帮助,建议小心心大拇指三连🌟

相关推荐
^小桃冰茶5 分钟前
HTML 从标签到动态效果的基础
前端·html
火柴盒zhang7 分钟前
基于HTML CANVAS和EXCEL的xlsx文件展示工具websheet
前端·javascript·html·spreadsheet·websheet
一城烟雨_5 小时前
vue3 实现将html内容导出为图片、pdf和word
前端·javascript·vue.js·pdf
树懒的梦想5 小时前
调整vscode的插件安装位置
前端·cursor
低代码布道师6 小时前
第二部分:网页的妆容 —— CSS(下)
前端·css
一纸忘忧6 小时前
成立一周年!开源的本土化中文文档知识库
前端·javascript·github
涵信7 小时前
第九节:性能优化高频题-首屏加载优化策略
前端·vue.js·性能优化
前端小巷子7 小时前
CSS单位完全指南
前端·css
SunTecTec8 小时前
Flink Docker Application Mode 命令解析 - 修改命令以启用 Web UI
大数据·前端·docker·flink
涵信8 小时前
第十一节:性能优化高频题-响应式数据深度监听问题
javascript·vue.js·性能优化