vue 线上环境 开启 vue-devtools

最新推荐文章于 2023-11-28 10:42:05 发布
最新推荐文章于 2023-11-28 10:42:05 发布
阅读量2.6k 收藏 4
点赞数 7
文章标签： vue js web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44717473/article/details/110798112
版权

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

在这里插入图片描述

使用以下几步可以实现在不改代码的情况下开启 vue-devtools

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

王乔治威尔金斯玛格丽特汤姆森希尔德萨拉阳
关注
  • 7
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
Vue3.0-devtools-6.0.0-beta-7-Crx4Chrome.rar
04-12
Vue3.0 devtools 6.0.0 beta 7 ，Vue3.0 devtools调试工具
vue线上调试调出vue-devtools
weixin_44265800的博客
05-10 1048
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) { w
vue DevTool 不展示
fth1002853070的博客
11-14 753
我们 在chrome中安装了Vue devTool 以后，但是在控制台中不显示vue工具。 然后点击浏览器右上角的 Vue devTool 图标以后，会显示下面这句话 Vue.js Devtools inspection is not available because it’s in production mode or explicitly disabled 解决方案：简单一句话，不要...
vue-devtools-5.1.1.zip
04-23
在github链接上面直接下载的vue-devtools 不可用，我这里在分支里面下载的，5.1.1版本可用的。 使用方法 切换到根目录 cnpm install，然后 npm run build，再 修改shells\chrome 目录下的manifest.json 里面的 "persistent": true 。然后在扩展程序添加就Ok了
【vue2】Vue Cli脚手架与VueTools的安装详解
嗨，朋友你好！我是前端领域的工作者
01-09 4247
Vue Cli脚手架与VueTools的安装详解（看这一篇绝对够了！！！）
Vue开发者工具
热门推荐
weixin_45115479的博客
03-09 1万+
此篇文章帮助我记录，自己新手在使用Vue开发者工具遇到的问题 问题的大前提，要检查有无安装好Vue开发者工具 1、安装了 Vue.js devtools，也就是Vue开发者工具（Vue官网有详细介绍） https://cn.vuejs.org/ 2、在浏览器中安装，在扩展程序管理中添加 3、启动 Vue.js devetools 4、最重要一步！开启允许访问文件网址 5、基本能够在控制台中看到，并使用Vue开发者工具了 6、我会将Vue开发者工具固定在浏览器上，这样页面中使用了Vue，图标就变绿色，
发现一个好东西---线上的vue工具 Vue Devtools
luoteen的博客
10-09 591
强制开启Vue Devtools https://greasyfork.org/zh-CN/scripts/396985-force-enable-vue-devtools 如果遇上了这个问题，要安装油猴（Tampermonkey），或者是安装了没有开启
Vue项目上线后关闭chroma的vue-devtools调试工具
qq_24418107的博客
11-28 257
【代码】Vue项目上线后关闭chroma的vue-devtools调试工具。
Vue 生产环境打开 devtools 的两种方法
如果有了可惜
11-11 3564
方案一 F12 切换到源码 tab，找到 app.[hash].js，ctrl + F 当前文件内搜索 #app ，找到 new n["default"]({ router: ui, store: J, render: function(e) { return e($i) } }).$mount("#app"); 在 new 行打 debugger，然后刷新页面进入 debugger，n[“default”].config.devtools 修改为 tru
Vue 生产环境打开vue-devtools工具
qq_30193097的博客
08-24 412
生产环境打开vue-devtools工具
vue-devtools4.1.3-直接解压把chrome拖到浏览器.zip
05-13
这是4.1.3已编译过的版本，适用于Chrome浏览器。...成功返回出现在插件列表中，浏览器右上角有灰色vue标志，在打开适用vue开发的页面后该标志会变绿色，F12后可找到vue。 (如果没有的话，请重启浏览器)
Vue3.0-devtools-6.0.0-beta-7-Crx4Chrome.zip
03-28
（3）安装方法：打开Chrome浏览器，输入“chrome://extensions/”打开扩展程序，启用开发者模式，然后把下载下来的压缩包解压后的“ Vue3.0-devtools-6.0.0-beta-7-Crx4Chrome.crx ”拖到Chrome上去即可安装；...
Vue调试神器vue-devtools.zip
12-26
vue-devtools是一款专门用于vue应用调试的浏览器插件，可以大大地提高vue应用的调试效率。
node-v12.16.3-x86.msi
最新发布
04-25
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
云计算基础课件—架构dr.pptx
04-25
云计算基础课件—架构dr.pptx
067ssm-jsp-mysql艺诚美业管理系统.zip（可运行源码+数据库文件+文档）
04-25
L文主要是对艺诚美业管理系统进行了介绍，包括研究的现状，还有涉及的开发背景，然后还对系统的设计目标进行了论述，还有系统的需求，以及整个的设计方案，对系统的设计以及实现，也都论述的比较细致，最后对艺诚美业管理系统进行了一些具体测试。 本文以JSP为开发技术，实现了一个艺诚美业管理系统。艺诚美业管理系统的主要使用者分为管理员；个人中心、会员管理、员工管理、员工打卡管理、技师预约管理、发型美容师管理、技师类型管理、套餐信息管理、套餐类型管理、套餐购买管理、会员充值管理、系统管理，员工；个人中心、员工打卡管理、技师预约管理，会员；个人中心、技师预约管理、套餐购买管理、会员充值管理，前台首页；首页、发型美容师、套餐信息、我的、跳转到后台等功能。通过这些功能模块的设计，基本上实现了整个艺诚美业管理系统的过程。 具体在系统设计上，采用了B/S的结构，同时，也使用JSP技术在动态页面上进行了设计，后台上采用Mysql数据库，是一个非常优秀的艺诚美业管理系统。 关键词 ：艺诚美业管理系统；JSP技术；Mysql数据库；B/S结构
【微信小程序毕业设计】外卖点餐系统开发项目(源码+演示视频+说明).rar
04-25
【微信小程序毕业设计】外卖点餐系统开发项目(源码+演示视频+说明).rar 【项目技术】 微信小程序开发工具+java后端+mysql 【演示视频-编号：242】 https://pan.quark.cn/s/cb634e7c02b5 【实现功能】 有管理员，外卖员，餐厅，用户共四个角色。管理员功能有个人中心，外卖员管理，餐厅管理，用户管理，菜品分类管理，菜品信息管理，外卖订单管理，订单配送管理，订单评价管理，在线留言管理，系统管理等。外卖员，餐厅，用户都可以在微信小程序上面进行注册和登录操作。餐厅角色可以在微信小程序上面进行菜品的添加，修改，删除，查询操作，可以对用户的订单进行审核操作，查看订单配送状态和评价，可以查看投诉反馈和在线留言等。外卖员角色可以在微信小程序上面进行订单的抢单操作，查看订单配送和评价信息等。 用户角色可以在微信小程序上面进行菜品的查看和查询，对自己下的订单进行支付操作，查看订单配送和对订单评价，收藏菜品等操作。
oplog4j是java项目生成操作日志的工具，兼容spring（高分项目）.zip
04-25
Java SSM项目是一种使用Java语言和SSM框架（Spring + Spring MVC + MyBatis）开发的Web应用程序。SSM是一种常用的Java开发框架组合，它结合了Spring框架、Spring MVC框架和MyBatis框架的优点，能够快速构建可靠、高效的企业级应用。 1. Spring框架：Spring是一个轻量级的Java开发框架，提供了丰富的功能和模块，用于开发企业级应用。它包括IoC（Inverse of Control，控制反转）容器、AOP（Aspect-Oriented Programming，面向切面编程）等特性，可以简化开发过程、提高代码的可维护性和可测试性。 2. Spring MVC框架：Spring MVC是基于Spring框架的Web框架，用于开发Web应用程序。它采用MVC（Model-View-Controller，模型-视图-控制器）的架构模式，将应用程序分为模型层、视图层和控制器层，提供了处理请求、渲染视图和管理流程的功能。 3. MyBatis框架：MyBatis是一个持久层框架，用于与数据库进行交互。它提供了一种将数据库操作与Java对象映射起来的方式，避免了手动编写繁琐的SQL语句，并提供了事务管理和缓存等功能，简化了数据库访问的过程
数学规划模型讲义.pptx
04-25
数学模型算法
vue3 + electron 解决 vue-devtools无法安装
04-23
你可以尝试以下步骤来解决 vue-devtools 无法安装的问题： 1. 首先，确保你已经按照官方文档安装了 vue-cli-plugin-electron-builder 插件，这是构建 Electron 应用的必要插件。 2. 然后，安装 vue-devtools 的最新版本：npm install -D @vue/devtools。 3. 接下来，在 Vue 项目的入口文件中添加以下代码： ``` import { createApp } from 'vue' import App from './App.vue' if (process.env.NODE_ENV === 'development') { const { createRenderer } = require('@vue/runtime-dom') const renderer = createRenderer({ querySelector: selector => document.querySelector(selector), createElement: (tag, isSVG, is, props) => document.createElement(tag), insert: (child, parent, anchor) => { parent.insertBefore(child, anchor || null) }, patchProp: (el, key, prevValue, nextValue) => { el.setAttribute(key, nextValue) }, forcePatchProp: (_, key) => key === 'value' }) const root = renderer.createApp(App).mount('#app') // 开发环境下开启 Vue Devtools window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = root.constructor } else { createApp(App).mount('#app') } ``` 4. 最后，在浏览器中打开 vue-devtools，点击 Setting -> Connection，设置 Host 为 localhost，Port 为 Electron 应用监听的端口号，一般默认为 5858，点击 Apply 即可。 希望以上步骤能够帮到你解决问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值