首页 > 其他分享 >vue 线上环境 开启 vue-devtools

vue 线上环境 开启 vue-devtools

时间:2023-08-08 11:12:53浏览次数:32  
标签:vue 选项卡 线上 new devtools 断点 控制台

 

 

vue 项目打包正式环境时,是没有 vue-devtools 选项卡的,没法看 vue 内部的数据

 

选中 Source 选项卡,找到打包好的 app.js,并格式化

 

ctrl + f 搜索$mount并在new那里打断点,new后面的对象就是 Vue 对象,需要记住该变量名,下一步要用到

F5 刷新页面就就会进入断点,并在控制台输入d["default"].config.devtools = true.config之前的对象就是上一步new后面的对象)

F8 结束断点,关闭控制台,再次打开控制台就可以看到 vue-devtools 了

标签:vue,选项卡,线上,new,devtools,断点,控制台
From: https://www.cnblogs.com/yeminglong/p/17613631.html

相关文章

  • uniapp vuex用法详细讲解
    uni-app小程序项目三1.商品列表、过滤器、封装商品item组件、上拉加载、节流阀、下拉刷新、2.商品详情、轮播图、商品价格闪烁问题3.加入购物车、vuex、持久化存储、mixiins_小程序商品列表加载_Hyman-ya的博客-CSDN博客......
  • 实现vue图片放大镜效果
    最近想要实现图片放大镜的效果,-首先使用的是原生js+css的方法:参考https://blog.csdn.net/sinat_34849421/article/details/106074482这个方法功能倒是可行,但是这个方式在跳出这个页面时会报 UncaughtTypeError:Cannotreadpropertiesofundefined(reading‘getBoundingCl......
  • 批量删除功能(VUE3语法)
    使用elementui-el-table方式编写功能点:点击全选/单选可以进行删除 <el-table:data="date"ref="grayscaleTableRef"min-height="288"max-height="510"style="width:1......
  • Vue3 路由优化,使页面初次渲染效率翻倍
    3996条路由?addRoute函数用了大约1s才执行完毕。通过观察,发现居然有3996条路由记录。可是项目并没有这么多的页面啊~重复路由letroutes:Array<RouteRecordRaw>=[{path:'/promotion/ticket-list-jegotrip',component:()=>import(/*webp......
  • 面试官:竟然用广度优先搜索实现Vue的watch?有意思...
    1.#两种watch的基本用法1.1#通过函数回调监听数据最基本的用法是给watch指定一个回调函数并返回你想要监听的响应式数据。conststate1=reactive({name:'前端胖头鱼',age:100})watch(()=>state1.age,()=>{console.log('state1的age发生变化了',state1.age)......
  • vue3 'alex' is defined but never used
    解决方法在package.json中的rules下加入"no-unused-vars":"off"即可......
  • You are using the runtime-only build of Vue where the template compiler is not a
    使用vue-cli搭建的项目,页面自定义带template内容的组件无法渲染,控制台报错,页面不展示组件内容,代码如下:<template><divclass="hello">my-component:<my-component></my-component></div></template><script>importVuefrom"vue"......
  • Vue中Router笔记学习整理
    1:摘要:  Vue中的Router是Vue.js框架中的一个核心插件,用于实现单页应用(SPA)的前端路由管理。它允许你在应用中定义不同的URL路径与对应的组件之间的映射,以便在不刷新整个页面的情况下,实现页面间的切换和数据加载。主要功能包括以下几个方面:声明式路由:你可以通过定义路由......
  • Vue学习笔记:路由开发 Part 03
    在Part1中提到了router-link。本文档使用一个标签栏来演示其功能在之前的例子中引入一个新的组件TabBartabbar.vue<template><divclass="tabbar"><ul><li><router-linkto="/center"active-class="tabbar-active">Cent......
  • Arthas线上排障
    Arthas线上排障场景1.NacosClient访问不到配置中心Nacos-Server/Nacos-Client:v2.0.4背景Nacos-Server因安全需要需要开启鉴权,所有Client访问配置中心都需要提供控制台账户和密码.Server配置nacos.core.auth.enabled=truenacos.core.auth.enable.userAgentAuthWhi......