Vue 生产环境打开vue-devtools工具

最新推荐文章于 2023-11-07 16:04:53 发布

&活在当下&

最新推荐文章于 2023-11-07 16:04:53 发布

阅读量543

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_30193097/article/details/132475625

版权

在做 Vue 项目的过程中，有时候，生产环境抛出的 bug 本地或测试环境难以复现、排查，这个时候，就会想到 vue-devtools 这个工具，如下是生产或测试环境打开 vue-devtools 的方式：

__VUE_DEVTOOLS_GLOBAL_HOOK__.emit('init', (document.querySelector('#app').__vue__.__proto__.__proto__.constructor.config.devtools = true) && document.querySelector('#app').__vue__.__proto__.constructor)

我这里用的是谷歌浏览器，复制上面的代码粘贴放入 F12 控制台中，然后回车，即可打开 vue-devtools。（注意：前提是浏览器已经安装了 vue-devtools 插件）

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

&活在当下&

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 生产环境打开vue-devtools工具

生产环境打开vue-devtools工具
复制链接

扫一扫

Vue调试工具vue-devtools的安装

qq_35066582的博客

12-12

962

今天重新学习vue的时候，把之前没有安装的Vue调试工具vue-devtools给安装了一下，安装步骤如下： 1. 访问网址：https://chrome-extension-downloader.com/来到下面这个界面，找到Vue.js-devtools(v5.3.3)，点击下载到本地 2. 下载后的文价夹名为：Vue.js-devtools_v5.3.3.crx，后缀名为crx，那么如何解压这个文件呢？ 3. 解压Vue.js-devtools_v5.3.3.crx文件：将Vue.js-de

安装vue调试工具 vue-devtools

kivet 的博客

09-02

485

vue-devtools是一款基于chrome浏览器的插件，在调试过程中可以省去打console.log，他会自动把我们在data上定义的数据动态的显示出来（数据改变，它也跟随着改变）。用它来对vue应用进行调试可以极大地提高我们的调试效率。步骤是网上找的，留篇文章，供以后自己参考 1.下载vue-devtools项目到本地（网上找的资料有些是直接下载的，也有通过命令在GitHub上下载的，...

参与评论您还未登录，请先登录后发表或查看评论

Vue开发工具——Vue-devtools

hyabbhj的博客

12-09

376

Vue开发工具——Vue-devtoolsvue-devtools下载vue-devtools生产可用文件安装vue-devtools验证vue-devtools结束语 vue-devtools下载 1、找到vue-devtoolshttps://github.com/vuejs/vue-devtools/tree/master，选择master，下载Download ZIP。 vue-devtools生产可用文件 2、解压vue-devtools-master，并用V-Code打开依次运行 cnp

Vue环境搭建

LAin的博客

07-24

723

一些值得注意的地方

vue 线上环境开启 vue-devtools

赛朋博客 2077

12-07

2817

vue 项目打包正式环境时，是没有 vue-devtools 选项卡的，没法看 vue 内部的数据使用以下几步可以实现在不改代码的情况下开启 vue-devtools 选中 Source 选项卡，找到打包好的 app.js，并格式化 ctrl + f 搜索$mount并在new那里打断点，new后面的对象就是 Vue 对象，需要记住该变量名，下一步要用到 F5 刷新页面就就会进入断点，并在控制台输入d["default"].config.devtools = true（.config之前的

Vue 生产环境打开 devtools 的两种方法

如果有了可惜

11-11

3934

方案一 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-tools

初心

06-12

995

vue devtools扩展组件会在window全局注入__VUE_DEVTOOLS_GLOBAL_HOOK__变量，Vue就是根据这个变量判断是否需要调试的。或者有新标签页打开其他路由的需求，就需要重新走一遍上面的步骤。**1.**先说下vue如何判断devtools是否可用的。这个方法只是对当前标签页有效，如果你不小心刷新了一下页面，（1）vue2控制台使用方法。（2）vue3控制台使用方法。

如何在生产环境使用devtools？

weixin_46396391的博客

08-31

1474

一行代码在生产环境使用devtools

生产环境如何开启 devtools vue2/vue3

m0_53679031的博客

03-04

1323

vue生产模式如何调出开发者工具

vue测试环境 devtools 查看

Luzhangfeng的博客

11-07

306

在控制台中 $() 相当于 document.querySelector()

vue-devtools

最新发布

03-27

Vue Devtools 是一个专为Vue.js开发者设计的强大浏览器扩展，它提供了深入的应用程序状态检查、实时编辑、性能分析等工具，极大地提升了开发效率。在Chrome、Firefox等主流浏览器上安装Vue Devtools后，开发者可以...

vue-devtools安装工具包.zip

03-23

内附已用npm处理过的vue-devtools工具包，已配置过源码文件，直接拿来用即可。利用vue-devtools工具包安装vue-devtools的具体操作过程可查看博主主页文档，操作简单，便于上手。

vue-devtools-5.1.1

12-29

在开发者模式下加载解压后的`vue-devtools-5.1.1`文件夹，然后在开发Vue应用时启用该扩展，即可在浏览器的开发者工具中看到Vue DevTools的界面。在实际开发中，Vue DevTools极大地提高了Vue开发者的工作效率，使得...

vue-devtools-5.1.1.zip

04-23

在github链接上面直接下载的vue-devtools 不可用，我这里在分支里面下载的，5.1.1版本可用的。使用方法切换到根目录 cnpm install，然后 npm run build，再修改shells\chrome 目录下的manifest.json 里面的 ...

Vue项目调试工具：vue-devtools安装包

02-03

- 手动方式：从给定的压缩包文件`vue-devtools-master`中，解压并按照官方文档指引，使用npm或yarn安装并打包，然后将生成的扩展程序加载到浏览器的开发者模式下。 2. 使用Vue-devtools： - 开启Vue项目：确保你...

【electron】手把手教你在 electron 环境下使用 vue-devtools，附详细报错解决办法

kinghzking的专栏

10-12

2609

Vue Devtools 是一款由 Vue.js 官方开发的开发工具，旨在帮助开发者更轻松地调试和开发 Vue.js 应用程序。这个问题半年前就发现了，当时没有解决掉，后来经常想到该问题，最近想到通过Edge浏览器可以下载最新的插件，省去了各种可能遇到的坑，最终解决问题。总之，Vue Devtools 是 Vue.js 开发者必备的工具之一，可以帮助开发者更高效地开发和调试 Vue.js 应用程序。遇到问题，多搜索，多思考，结合现有知识，找到合适的方案。这个就不说了，简单方便，但是获取的不一定是最新的。

vue线上调试调出vue-devtools

weixin_44265800的博客

05-10

1093

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 生产环境 开启 vue-devtools 浏览器调试

m0_37725927的博客

08-05

1664

vue 项目打包正式环境时，是没有 vue-devtools 选项卡的，没法看 vue 内部的数据使用以下几步可以实现在不改代码的情况下开启 vue-devtools 选中 Source 选项卡，找到打包好的 app.js，并格式化 ctrl + f 搜索$mount...

vue3调试工具是vue-devtools如何安装

05-11

要安装Vue.js 3的调试工具vue-devtools，您需要执行以下步骤： 1. 首先，您需要在浏览器中安装Vue.js 3的开发版本。您可以在Vue.js的官方GitHub存储库中找到开发版本的源代码。 2. 接下来，您需要将Vue.js 3的开发版本添加到您的项目中。您可以使用npm或yarn来安装Vue.js 3的开发版本，例如： ``` npm install vue@next ``` 3. 安装完成后，您需要在浏览器中安装Vue.js 3的调试工具vue-devtools。您可以在Chrome Web Store中找到该工具，或者您可以从Vue.js的官方GitHub存储库中下载源代码并手动安装。 4. 安装完成后，您可以在Chrome浏览器中打开vue-devtools，并在Vue.js 3应用程序中进行调试。请注意，Vue.js 3的调试工具vue-devtools目前仍处于beta版本，可能存在一些问题。但是，该工具已经可以用于Vue.js 3的调试和开发。

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

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交