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

最新推荐文章于 2024-07-24 15:04:09 发布

「已注销」

最新推荐文章于 2024-07-24 15:04:09 发布

阅读量2.9k

点赞数 6

分类专栏： Vue 文章标签： javascript vue.js chrome devtools

本文链接：https://blog.csdn.net/xxcmyh/article/details/121498959

版权

本文介绍了在生产环境中如何开启Vue2和Vue3项目的devtools进行调试。在Vue2项目中，通过修改Vue实例的config.devtools并利用__VUE_DEVTOOLS_GLOBAL_HOOK__.emit初始化；在Vue3项目中，直接修改实例的config.devtools并触发初始化。

摘要由CSDN通过智能技术生成

生产环境如何开启 devtools 本地开发环境中，devtools 是默认开启的，而生产环境中默认关闭。打包时不建议手动开启该配置。遇到生产环境需要调试的，可通过开发者工具更改配置项临时开启。

一、Vue2 项目中开启

1、打开控制台，输入下列代码，回车执行

let Vue, walker, node; 
walker = document.createTreeWalker(document.body, 1); 
while ((node = walker.nextNode())) {
    
	if (node

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

「已注销」

关注关注

6
点赞
踩
7

收藏

觉得还不错? 一键收藏
3
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

【Vue3 知识第二讲】Vue3新特性、vue-devtools 调试工具、脚手架搭建

前端知识分享喵

09-01

2685

Vue3新特性、vue-devtools 调试工具、脚手架搭建

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

qq_30193097的博客

08-24

685

生产环境打开vue-devtools工具

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

Vue---vue3+vite项目内使用devtools，快速开发！

最新发布

COCOLI_BK的博客

07-24

610

我们在前期开发时，一般使用chrome或者edge浏览器，会使用vue-devtools或react-devtools（此插件个人未使用，可百度下是否可内嵌入项目！）来审查vue项目；这个需要安转浏览器插件才可支持！故此本博客的目的是，如果已经开发或者维护阶段的vue+vite项目如何临时插入该插件使用!创建vue3项目时，会提示是否安装devtools的插件！

vue 生产环境 开启 vue-devtools 浏览器调试

m0_37725927的博客

08-05

1705

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

如何启动一个vue3的项目

L念安dd的博客

01-16

2750

关于如何启动一个vue3的项目的还算保姆级文档

vue3 devtools 版本6.5.0

05-04

Vue3 DevTools 版本6.5.0是一款强大的开发者工具，专为Vue.js 3.x框架设计，用于帮助前端开发者在Chrome浏览器中调试Vue应用。这个版本的更新旨在优化用户体验，提供更精确的组件检测和性能分析功能。在Chrome浏览器...

vue-devtools/shells/chrome

12-08

Vue DevTools 包含多个“shell”，每个对应不同的浏览器环境。"shells"在这里指的是适用于不同浏览器的实现，而"chrome"表示这是为Chrome定制的版本。 Vue DevTools 提供的功能包括： 1. **组件树**：显示当前Vue...

vue 开发者工具devtools(谷歌浏览器插件)，包括vue2和vue3

01-08

Vue Devtools 分为两个版本，分别支持Vue 2.x和Vue 3.x。Vue 2.x 版本的开发者工具是5.3.4，而Vue 3.x 版本的工具是6.0.0.18 beta。这两个版本的插件需要分别安装，因为它们针对的是Vue框架的不同版本，Vue 2和Vue 3...

vueDevTools

07-04

4. 在开发模式下启动Vue应用，打开浏览器的开发者工具（F12或右键单击页面选择检查），VueDevTools就会出现在“应用”或“元素”面板旁边。 VueDevTools对于Vue和UniApp开发者来说是必不可少的工具，它极大地提高了...

vue开发调试神器vue-devtools使用详解

12-12

前言：由于vue是数据驱动的，所以这就存在在开发调试中查看DOM结构并不能解析出什么。但是借助vue-devtools插件，我们就可以很容易的对数据结构进行解析和调试。一、下载chrome扩展插件 GitHub下载地址： https://github.com/vuejs/vue-devtools 建议使用npm淘宝镜像按照依赖包地址：http://npm.taobao.org/ 命令行安装npm淘宝镜像： $ npm install -g cnpm –registry=https://registry.npm.taobao.org 之后我们就可以使用cnpm代替npm按照依赖包了，np

创建vue3项目、打开

m0_68685654的博客

01-22

601

项目构建完成，会提示3个命令：要立即执行的话，输入npm run dev；这里显示的是在D盘下创建："D:\VueProject"（也就是说不一定要在哪个固定的盘）-接下来的选择可以按需进行是否的选择，一开始可以都默认否，后面的开发中可以再修改的。-可以选择镜像cnpm，也可以用原来的命令npm install。如果要从命令行打开，可以从命令行打开，也可以直接在idea中运行。-成功后点击上方栏的运行三角形就可以运行了。前提是前期的准备均已完善，现在进行第一个vue项目的创建。-在创建的目录下打开。

Vue开发工具——Vue-devtools

hyabbhj的博客

12-09

395

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

vue3使用入门

qq_41391628的博客

05-30

1072

一些资料 [vue3中文文档][https://vue3js.cn/docs/zh/guide/installation.html] [vue-cli][https://cli.vuejs.org/zh/config/#全局-cli-配置] [vuex][https://vuex.vuejs.org/zh/guide/] [vue-router][https://router.vuejs.org/zh/] [ant Design Vue][https://2x.antdv.com/docs/.

Vue2入门(安装Vue、devtools,创建Vue)以及MVVM分层思想

y516369的博客

06-08

903

Vue2入门(安装/创建Vue，安装devtools)

如何在生产环境使用devtools？

weixin_46396391的博客

08-31

1561

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

devtools无法显示

weixin_42979149的博客

11-01

2105

devtoolls无法显示

vue调试神器vue-devtools安装

前端漫步人的博客

03-29

1143

最近在玩Vue，欲先攻其事必先利其器，就先来弄弄这个工具（vue-devtools）。vue-devtools安装vue-devtools是一款用来调试Vue应用的Chrome插件,可极大提高开发者调试项目效率,接着我们说一下如何下载安装这个插件;一、从chrome商店直接下载安装国内无法访问,你懂得,有条件的可以自己处理 : https://chrome.google.com/webstore...