Vue调试工具vue-devtools安装详解

Vue3开发必备:vue-devtools调试工具从安装到实战详解 本文详细介绍了Vue3开发中必备的调试工具vue-devtools,从安装到实战应用全面解析。通过组件树透视、状态时间旅行等核心功能,帮助开发者高效调试Vue应用,提升开发效率。特别针对国内开发者提供了安装优化方案,并分享了高级调试技巧和常见问题解决方案。 阅读详情

介绍:

vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以地提高我们的调试效率。


一:chrome商店直接安装:

    vue-devtools可以从chrome商店直接下载安装。不过要注意的一点就是,需要翻墙。

     下载地址:https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd


二:手动安装:

第一步:找到vue-devtools的github项目,并将其clone到本地. vue-devtools


       git clone https://github.com/vuejs/vue-devtools.git


第二步:安装项目所需要的npm包

    cd vue-devtools    npm install

第三步:编译项目文件

    npm run build   //非常关键的一步,目的是为了解压vue-devtools工具包,否则无法添加进浏览器

第四步:添加至chrome游览器

    

            进入chrome扩展程序:

            进入已经编译好的vue-devtools文件夹,选择:


.

.

.

大功告成:




Vue.js DevTools 安装与调试全指南:三种方法详解与实战技巧 前端开发中,高效的调试工具是提升工程效率的关键。Vue.js DevTools 作为一款专为 Vue.js 应用设计的浏览器扩展,其核心原理是通过注入脚本,与 Vue 应用的运行时实例建立通信,从而实现对组件树、响应式状态、事件流和性能指标的深度洞察。这一技术价值在于将应用内部的黑盒状态可视化,使开发者能够以数据驱动的方式进行问题定位,极大缩短了调试周期。在应用场景上,它覆盖了从本地开发、复杂状态管理追踪到远程移动端调试等多种需求。本文聚焦于 Vue.js DevTools 的安装与配置,详细拆解了通过官方 阅读详情

相关推荐

Vue Devtools 安装与调试全攻略:从入门到精通

在 Vue.js 开发中,调试是理解应用状态和数据流的关键环节。其核心原理在于通过浏览器扩展或开发依赖集成,实现对 Vue 应用组件树、响应式数据和状态变更的深度可视化监控。这项技术的价值在于极大提升了开发效率,使开发者能够直观地审查组件层级、实时编辑数据、追踪事件流并分析性能瓶颈,从而快速定位问题。典型的应用场景包括单文件组件开发、Vuex 状态管理调试、路由行为分析以及复杂交互逻辑的梳理。本文聚焦于 **Vue Devtools** 这一核心调试工具,详细解析其在不同网络环境和项目配置下的三种主流安装方

397

vue - devtools 安装

vue是现在比较火的一个框架,加上去年vue3的发布,更推动了vue一个层级vue开发项目,自然少不了他的调试工具,这个非常好用,对vue开发者来说,这简直是福音,下面我们一起来看一下他的安装使用吧。方式一:通过 Chrome 应用商店安装简单方便但是需要梯子方式二:通过离线安装包安装方式三:下载源码编译安装。

mon_star°的博客 2743

Vue开发者必备:5分钟搞定Chrome浏览器安装vue-devtools调试工具(2023最新版)

本文为Vue开发者提供了2023年最新版Chrome浏览器安装vue-devtools调试工具的极速指南。详细介绍了三种安装方案,包括商店直装、源码编译和CRX手动安装,并提供了常见问题排错指南和高阶调试技巧,帮助开发者快速提升调试效率。

weixin_42522167的博客 469

vue devtools调试工具安装(详细)

下载完成后,进入该文件下的node_modules 文件,找到 vue-devtools 文件,进入此文件夹,将其中vender 文件夹下的 manifest.json文件 进行编辑,修改persistent 为 true,保存文件。最后将vender 文件拖至浏览器的扩展程序中,重启浏览器就可以使用了。打开浏览器找到扩展程序(以谷歌为例),并勾选开发者模式,点击出现的“创建一个空的文件夹,命名最好可以见名知意,复制目录后打开命令行。

weixin_46911985的博客 2651

Vue Devtools 安装避坑指南:为什么你的Chrome插件总是不显示?

本文详细解析了Vue Devtools在Chrome浏览器中安装后不显示的常见问题及解决方案。从插件版本选择、运行时配置到网络环境排查,提供全面的避坑指南,帮助开发者快速启用Vue调试工具,提升开发效率。特别针对Vue 2.x和3.x的不同配置要求进行了对比说明。

keras9composer的博客 292

告别F12盲点:手把手教你用vue-devtools插件调试Vue 3项目(含Chrome/Firefox安装)

本文详细介绍了如何使用vue-devtools插件调试Vue 3项目,包括Chrome和Firefox的安装方法。通过组件树透视、响应式溯源、时间旅行和性能诊断等核心功能,帮助开发者高效解决Composition API的调试挑战,提升开发效率。

weixin_30872337的博客 662

vue的调试工具 vue-devtools 的安装和使用

安装 1.到github下载: git clone https://github.com/vuejs/vue-devtools 2.安装依赖 cd vue-devtools && npm install 3.打包 npm run build 4.扩展Chrome插件 Chrome浏览器 > 更多程序 > 拓展程序 点击“加载已解压的拓...

Beamon__的博客 1693

Edge浏览器高效集成Vue DevTools开发工具指南

本文详细指导如何在Edge浏览器中高效集成Vue DevTools开发工具。通过从源码获取、构建环境准备到手动加载扩展的完整流程,解决Edge浏览器中直接安装可能遇到的兼容性问题,帮助Vue.js开发者获得稳定、顶级的调试体验,从而显著提升开发效率。

weixin_29231263的博客 100

vue.js devtolls插件下载

vue-devtools是一款基于Chrome浏览器的扩展,用于调试Vue应用。

小恶魔的博客 9720

Simulink中为Scope模块添加图例的方法

比如我要在Scope模块输出三轴加速度的数据,但三轴数据波形混杂在一起不太好看,此时就需要在Scope模块中添加图例来使波形看起来更加清晰明了。 注:我这里使用的Matlab版本为2019a 1.首先在simulink中打开,需要添加图例的Scope,如图示: 2.在Matlab,command窗口输入: >> set(0,'ShowHiddenHandles','On'); >> set(gcf,'menubar','figure'); 此时你会发现Scope窗口菜单栏多了好几

Kunfly的博客 1万+

手把手教你用SAM模型实现精准图像分割:从环境配置到实战应用

本文详细介绍了如何使用Meta推出的Segment Anything Model(SAM)实现精准图像分割,从环境配置到实战应用的全流程。特别针对电商场景中的商品分割需求,提供了硬件配置、模型下载、API使用及优化策略等实用指南,帮助开发者快速掌握这一强大的深度学习工具。

pepsi的博客 1061

vue-devtools的安装与使用

vue-devtools的安装与使用

weixin_43843572的博客 8万+

千兆以太网的接收和crc校验

解析该以太网帧,包括统计该以太网帧长度+过滤功能(端口号对不对,是否为udp协议)+CRC校验,将解析结果存入状态fifo,一旦状态fifo开始有数,就开始开启读过程,读过程开始时,首先读状态fifo,根据从状态fifo里面读出的以太网帧长度,来读数据fifo(这样能够防止跨帧读),然后在根据状态fifo里面读出的crc校验正确标志和过滤标志,来确定是否将数据fifo读出来的数据送给下一个模块。改掉之后在抓一下,可以看到抓出来的数据完全正确,从最后开始看,除去4个crc校验的尾巴,数据是到255结束的。

weixin_45284871的博客 2738

谷歌vue调试工具devtools安装的傻瓜教程(图文详解)

1.去Chrome的插件网下载Vue.js devtools插件,链接如下 https://www.cnplugins.com/devtool/vuejs-devtools/ 2.下载完成之后会得到以下文件 我们点击重命名,将文件后缀改为.rar,把文件修改为以下形式 3.点击鼠标右键,选择解压到“…” 得到以下解压过后的文件夹 4.进入谷歌浏览器界面,点击右上角竖着的三点,点击‘“更多工具—拓展程序” 5.点击加载已解压的拓展程序,把我们刚刚解压的文件夹拖进来 5.安装成功 6.进行测试,

darabiuz的博客 2183

伺服驱动器启用后对传感器线信号干扰的解决方案

在一些Arduino项目中,研究者发现,当伺服电机启动时,传感器信号会出现显著噪声。例如,在一个假肢项目中,研究者使用光电隔离器成功隔离了伺服驱动器对EMG传感器的干扰。然而,当启用伺服驱动器时,传感器线信号常常受到干扰,导致系统性能下降。传感器线信号是传感器输出的电信号,用于测量物理量,如温度、光线或位置。例如,在一些案例中,伺服驱动器的开关操作可能导致传感器信号出现尖峰或波动,特别是在模拟传感器上更为明显。描述: 使用光电隔离或其他隔离技术,分离伺服驱动器和传感器的电气路径,防止直接干扰。

有用好玩有趣的“电”知识 1466

用STM32F103单片机控制电调制动无刷电机

用电调控制无刷电机制作遥控飞艇 蓝牙控制 调控电调 无刷电机 用电调控制无刷电机制作遥控飞艇 代码区 mian.c #include "delay.h" #include "sys.h" #include "usart.h" #include "usart3.h" #include "timer.h" #include "led.h" #include "key.h" int main(v...

子非鱼 的博客 2万+

Vue DevTools 速通-掌握开发调试器

VueDevTools是Vue.js专用的浏览器调试工具,支持Chrome、Firefox和Edge。安装后可在开发者工具的Vue标签页中调试组件树、Vuex状态、路由和事件。主要功能包括:查看组件层级与数据、调试Vuex状态变更、监控路由跳转、追踪组件事件,并支持时间旅行调试和自定义组件检查。该工具仅开发环境可用,能显著提升Vue应用调试效率。

qq_53911056的博客 1833

EWF写保护功能详解:从安装到实战操作指南

本文详细介绍了EWF写保护功能的安装与实战操作指南。EWF(Enhanced Write Filter)通过重定向写入操作保护硬盘分区,特别适合需要长期稳定运行的系统场景。文章涵盖从安装准备、图形界面操作到命令行高级管理的全流程,并提供了常见问题的解决方案,帮助用户轻松掌握这一实用工具。

weixin_28710999的博客 446

express-vue开发调试技巧:Vue DevTools配置与错误排查

express-vue是一个专为Express.js打造的Vue渲染引擎,它允许开发者使用.vue文件作为模板并通过流的方式进行渲染。本文将分享实用的开发调试技巧,帮助你快速配置Vue DevTools并高效排查开发过程中的常见错误。 ## 一、Vue DevTools配置指南 ### 1.1 安装Vue DevTools浏览器扩展 首先确保你的浏览器已安装Vue DevTools扩展。这是调

gitblog_00394的博客 822

Qt软件开发: 开发MQTT客户端软件,模拟硬件登录各大主流MQTT平台完成通信

此软件是使用QT编写MQTT客户端(根据mqtt官方文档3.1.1,自己实现过程代码,没有使用其他库,稳定,方便移植),模拟硬件登录各大主流的MQTT物联网服务器,完成主题订阅、发布等操作,实现数据通信交互。 已经测试OneNET、阿里云IOT、华为云IOT、百度IOT、电信IOT、原子云IOT等等常用的物联网云平台,都可以正常实现数据通信,只要云平台支持标准MQTT协议都可以使用此软件进行登录测试。 特别是大家没有硬件,想测试与MQTT物联网云服务器通信的,此软件是非常的方便。使用简单,比官方的软件操作

1万+

4、海洋哺乳动物运动能量学:潜水与生存的奥秘

本文深入探讨了海洋哺乳动物在潜水与运动中的能量消耗机制,涵盖其生理反应、代谢成本、节能行为策略及测量方法。通过分析不同物种的能量利用特点,揭示了它们如何在极端水下环境中维持能量平衡,并讨论了该研究在保护生物学、生态系统动态和动物健康管理中的实际意义。文章还展望了未来多学科交叉、长期监测及应对环境变化的研究方向,为理解海洋哺乳动物的生存奥秘提供了系统性视角。

p5l2m9n4o6q的博客 116

Vue()安装调试插件vue-devtools

安装Vue调试插件vue-devtool

Good Luck 584

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

谷歌浏览器安装vue-devtools

准备工作 在github上下载vue-devtools压缩包,地址:https://github.com/vuejs/vue-devtools 将下载好的压缩包解压到本地 进入解压文件的根目录,执行yarn,安装依赖包 依赖包安装完成以后,执行yarn build build完成后会在packages > shell-chrome > build 目录下看到上图所示的几个javascript文件 找到 packages > shell-chrome下的mani

weixin_41269811的博客 300

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

Vue开发者必备:手把手教你安装和配置vue-devtools调试工具

本文为Vue开发者提供了vue-devtools调试工具的完整安装与配置指南。详细介绍了从环境准备、获取源码、编译构建到在谷歌浏览器中加载扩展的全过程,并阐述了该工具在组件树查看、数据实时调试、时间旅行及Vuex状态管理中的核心应用,能极大提升Vue项目的开发与调试效率。

weixin_29011993的博客 412
上一篇: Charles(查尔斯)抓包工具MAC配置说明
下一篇: 禁用h5在微信里面长按图片弹出提示信息的问题
大叔0o0
博客等级 码龄10年 31粉丝 52原创
评论 8
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值