首页 > 其他分享 >vue3 devtool

vue3 devtool

时间:2023-11-07 11:26:25浏览次数:27  
标签:__ .__ VUE app GLOBAL devtool vue vue3

打开控制台,输入下面代码:var vue = app.__vue_app__
    const hook = window['__VUE_DEVTOOLS_GLOBAL_HOOK__']
    hook.emit('app:init',vue,vue.version,{
    Fragment: 'Fragment',
    Text: 'Text',
    Comment: 'Comment',
    Static: 'Static'
})
然后重新打开调试器就行。缺点是关闭标签页会失效,需要重新配置。
var Vue, walker, node
walker = document.createTreeWalker(document.body, 1)
while ((node = walker.nextNode())) {
  if (node.__vue_app__) {
    var vue = node.__vue_app__
    const hook = window['__VUE_DEVTOOLS_GLOBAL_HOOK__']
    hook.emit('app:init', vue, vue.version, {
      Fragment: 'Fragment',
      Text: 'Text',
      Comment: 'Comment',
      Static: 'Static'
    })
  }
}


部署后 vue nuxt 开启 vue devtool 
const VueObj = document.querySelector('#__nuxt').__vue__.__proto__.__proto__.constructor

//VueObj.config.devtools = true
window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit('init', VueObj)

vue3
window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit('init', document.querySelector('#app').__vue_app__.__proto__.constructor)

标签:__,.__,VUE,app,GLOBAL,devtool,vue,vue3
From: https://www.cnblogs.com/7c89/p/17814585.html

相关文章

  • vscode快捷输入vue2,vue3,模板
    { //Placeyoursnippetsforvuehere.Eachsnippetisdefinedunderasnippetnameandhasaprefix,bodyand //description.Theprefixiswhatisusedtotriggerthesnippetandthebodywillbeexpandedandinserted.Possiblevariablesare: //$1,......
  • 数据可视化 - 使用swiper制作滚动表格[vue3]
    html部分1<divclass="scroll-table">2<divclass="scroll-table-header">3<tableclass="scroll-table-header__table">4<colgroup>5<col......
  • vue 2 升级vue3 前端老白
    vue2升级vue3前端老白原文链接:Vue3已经发布,而Vue2到Vue3的升级需要一些注意点。本文将介绍Vue2升级到Vue3的具体步骤,让您在升级中无后顾之忧。首先,我们需要升级VueCLI到4.x。在升级前,我们需要备份项目代码,以防出现意外情况。接着,我们需要在命令行中输入以下命令:npminst......
  • 记录--Vue3基于Grid布局简单实现一个瀑布流组件
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助前言在学习Grid布局之时,我发现其是CSS中的一种强大的布局方案,它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局,在刷某书和某宝首页时,我们发现其展示方式就是一种瀑布流,是一种流行的网站页面布局......
  • uniApp:使用vue3+Vite4+pinia+sass技术栈构建(02)-封装api请求
    前言在纯vue3开发的时候,使用axios进行api请求,但在uniapp中还需要安装axios的适配器uniapp-axios-adapter,否则小程序或者app请求不兼容。文档地址uniapp-axios-adapter-DCloud插件市场但在这里我们不使用axios,而是使用uniapp提供的请求方法uni.request进行封装。uni.request方......
  • 基于[email protected]的Vue3 PDF在线预览
    目录认识vue3-pdf-app安装vue3-pdf-app代码子组件封装:PdfView.vue父组件调用:index.vue中文配置文件viewer.properties本文参考来自于CSDN作者theMuseCatcher《Vue3PDF预览(vue3-pdf-app)》认识vue3-pdf-appvue3-pdf-app的npm官方链接点我访问vue3-pdf-app的github仓......
  • vue3.0 + ts 实现上传工厂(oss与cos)
    概述将上传基类命名为MOS(MineObjectStorage)mos.ts代码import{MosType}from'./mosConfig'import{Loading}from'../loading'import{typeBinaryFile,typeMosFile}from'./fileUtil'importtype{PathTemplate}from'./pathTempla......
  • Vue3 中的hook函数和 toRef(toRefs)
    一、自定义hook函数  1、什么是hook?      本质是一个函数,把setup函数中使用的CompositionAPI进行了封装  2、类似于vue2.x中的mixin  3、自定义hook的优势:复用代码,让setup中的逻辑更清楚易懂。二、toRef  1、作用:创建一个ref对象,其valu......
  • Vue3的生命周期
    1、setup():开始创建组件之前,在beforeCreate和created之前执行,创建的是data和method2、onBeforeMount():组件挂载到节点上之前执行的函数;3、onMounted():组件挂载完成后执行的函数;4、onBeforeUpdate():组件更新之前执行的函数;5、onUpdated():组件更新完成之后......
  • Vue3 echarts 组件化使用 resizeObserver
    点击查看代码constresizeObserver=ref(null);//进行初始化和监听窗口变化onMounted(async()=>{awaitnextTick(()=>{initChart();setOptions(options.value,opts.value??true);});window.addEventListener('resize',handleResize);resizeO......