Chrome(谷歌浏览器)安装Vue插件vue-devtools(图文详细教程)

Chrome 浏览器安装Vue Devtools调试工具 (详细教程) Chrome 浏览器安装Vue Devtools调试工具 1. 首先下载Vue Devtools调试工具 2. 复制网址,在浏览器打开按照图示操作 3. 下载成功后解压即可,如下图所示 4. 解压后打开cmd命令切换到G:Vue Devtools工具 ue-devtools-5.1.1路径下(你们安装的路径自己切换) 5. 切换命令成功后使用淘宝命令cnpm install下载(尽量用淘宝镜像下载快速些),下载成功如下图所示 6. 然后在cnpm run build 如下图所示 7. 然后在打开shell 阅读详情
AI摘要

本文介绍了一种通过源代码安装Vue DevTools的方法,并提供了详细的步骤。此外,还提到了可以直接通过浏览器扩展商店安装的简便方式。

使用Vue开发项目时,常会用到一款谷歌浏览器插件,vue-devtools
安装成功后,运行本地Vue项目,打开浏览器控制台就如下:
其中可以便捷的查看vueX的数据以及组件结构等,非常方便,
在这里插入图片描述
安装步骤如下:
1、首先给大家提供一个git地址,虽然官网也有地址(https://github.com/vuejs/vue-devtools.git),我认为不太好用
给大家提供另一个git地址:

https://gitee.com/zhang_banglong/vue-devtools.git

打开里面就如下:
在这里插入图片描述

2、打开控制面板,进入到vue-devtools文件夹下,输入命令npm install或者cnpm install
在这里插入图片描述
3、上一步成功后,紧接着输入命令npm run build
在这里插入图片描述
4、打卡文件夹,找到shell文件夹,
在这里插入图片描述
5、打开shell文件夹,会找到一个chrome文件夹,就是它了!!!
在这里插入图片描述
6、打开谷歌浏览器(Chrome),找到扩展程序打开
在这里插入图片描述
7、选择“加载已解压的扩展程序”
在这里插入图片描述
8、选中刚才找到的chrome文件夹
在这里插入图片描述
9、选中后,“扩展程序”界面就如下,就完成了
在这里插入图片描述
10、本地运行一个Vue项目,F12打开控制台,如果没有,要刷新一下页面,或关闭浏览器重新打开
在这里插入图片描述其实同样的方法,找到其他浏览器的扩展程序,选择chrome文件夹,其他浏览器也可以同样出现vue-devtools

如果你比较着急,一时之间又弄不好拉下来的代码,可以考虑先安装个火狐浏览器,直接去扩展界面里搜索vue,点击添加即可
在这里插入图片描述

在这里插入图片描述

一步步指导:在Chrome中安装Vue插件vue-devtools Vue.js是现代Web开发中最流行的前端框架之一,它以其轻量级、高性能和易于理解的设计理念受到开发者的喜爱。为了更高效地开发和调试Vue应用,Vue.js官方提供了一个强大的开发工具——vue-devtools。 阅读详情

相关推荐

谷歌浏览器安装 Vue.js devtools 插件

Vue.js devtools 插件的安装及常见问题分析。

m0_52861684的博客 2729

chrome安装Vue Devtools开发者工具

chrome安装Vue Devtools开发者工具

泡橘子的博客 4107

Chrome安装Vue插件vue-devtools

除了作为 Chrome 扩展程序运行外,Vue Devtools 还提供了一个独立的桌面应用,支持更多的功能和更丰富的界面。通过在开发者工具中启用性能记录,并在 Vue Devtools 中查看分析,你可以了解组件渲染的耗时,找出性能瓶颈。现在,你应该能在开发者工具中看到一个名为 "Vue" 的新标签页,这就是 Vue Devtools 的主界面。如果你的应用使用了 Vuex 作为状态管理库,Vue Devtools 会提供一个专门的 Vuex 标签页,用于查看和调试 Vuex store 的状态变化。

分享likeshop开发知识 3300

# 谷歌 chrome 浏览器中的 vuejs devtools 插件工具的安装方法

github 下载地址:https://github.com/vuejs/vue-devtools如下载:vue.js-devtools-4.1.3.zippage=9。

段子手168的博客 1万+

树莓派4B网线直连Windows全流程:从IP查询到SSH登录避坑指南

本文提供了一份详细的树莓派4B通过网线直连Windows电脑的实战指南。核心步骤包括配置Windows网络共享、查询树莓派IP地址以及通过SSH进行安全登录与初始配置。文章深入解析了直连的网络原理,并重点分享了使用CMD命令和工具定位IP、避免常见错误的避坑技巧,帮助用户在没有显示器或路由器的环境下快速完成树莓派初始化。

grape的博客 1081

避坑指南:CST粒子工作室Track Solver常见的5个参数设置错误

本文深入剖析了CST粒子工作室中Track Solver在电子枪仿真时常见的5个关键参数设置错误,包括空间电荷模型选择、发射源定义、材料边界处理、监视器配置及求解器稳定性设置。通过对比错误与正确做法,帮助用户避开陷阱,确保粒子追踪仿真的物理准确性与数值稳定性,从而获得更精准的电子枪仿真结果。

dapp9builder的博客 489

chrome安装vue-devtool插件

安装vue-devtools在chrome浏览器上的插件,版本号6.6.4

feng43878的博客 3893

Linux内核同步原语之队列自旋锁(Queued Spin Lock)深度解析

本文深度解析了Linux内核中的队列自旋锁(Queued Spin Lock)机制。通过对比传统自旋锁的瓶颈,详细阐述了队列自旋锁如何利用紧凑的4字节结构、每CPU节点数组和pending位优化,有效解决多核(SMP)系统中的缓存行乒乓和惊群效应,实现公平、高效的锁等待队列,从而显著提升内核在高并发场景下的可扩展性与性能。

weixin_29205061的博客 305

vue-devtools安装教程 (Chrome浏览器)

2024年最新安装vue-devtools方法

Odyssey_kd的博客 3945

WSL2 + Open3D点云可视化踩坑全记录:从GLFW报错到VcXsrv配置,一篇讲清所有‘坑’

本文详细解析了在WSL2环境中使用Open3D进行点云可视化时遇到的常见问题,特别是GLFW报错和VcXsrv配置问题。通过系统性的解决方案和高级配置技巧,帮助开发者彻底解决图形显示、驱动加载和库版本冲突等难题,实现高效的点云可视化。

weixin_30627341的博客 101

Python、Selenium实现问卷星自动填写(内含适配个人问卷的方法)

使用Python、Selenium实现问卷星自动填写,内含适配个人问卷的方法。

DaenCode的博客 3838

Chrome(谷歌浏览器)安装Vue插件vue-devtools(最新版+图文详解附带免费下载地址)

链接: https://pan.baidu.com/s/1L21kNwu8rp2fHkpz5Fwu-w?pwd=n5uu 提取码: n5uu。因为Chrome浏览器的扩展商城的一些问题,需要进行一些特殊操作,咱们废话少说。在浏览器地址栏输入chrome://extensions/然后把刚刚下载文件夹中的xxx.crx,拖入浏览器当中。不会拖可以看一下文件中的视频。实现去下载百度网盘下载。...

m0_56245036的博客 8574

《备考系统分析师》 - 专栏介绍和目录

本专栏提供软考高级系统分析师全套备考资料,包含四大核心内容:1.详细考点梳理(覆盖基础知识、关键技术、案例实践三大模块16个章节);2.历年真题及解析(2009-2022年所有真题含综合知识、案例分析和论文);3.100+篇高质量论文范文;4.预测模拟题。早鸟价仅需9.9元,可节约80%资料搜集时间,帮助考生高效备考、顺利通过考试。专栏持续更新,有问题可随时联系作者。

数据知道的博客 1万+

Chrome浏览器 安装Vue插件vue-devtools

vue-devtools 是一个为 Vue.js 开发者设计的 Chrome 插件。它可以让你更轻松地审查和调试 Vue 应用程序。与普通的浏览器控制台工具不同,Vue.js devtools 专为 Vue 的响应性数据和组件结构量身定做。

A_aspectJ的博客 8493

基于YOLO26的实时目标追踪实战:从训练到视频追踪(附完整可视化代码)

核心组合:YOLO26(高精度检测)+ ByteTrack(稳定追踪)是实时目标追踪的最优工业组合,Ultralytics内置集成无需额外开发;训练优化:追踪场景需优先提升检测框精度(增加box损失权重),保证ID稳定性;可视化核心:为每个ID分配唯一颜色、绘制运动轨迹、显示FPS,是落地场景的必备功能;性能调优:轻量化模型+降分辨率+OpenVINO导出,可在边缘设备(如研华工控机)实现实时追踪。这套代码可直接复用到智慧园区、停车场、工业产线等场景,仅需修改park.yaml中的类别和。

专注于Python爬虫开发,分享爬虫技巧、项目实战与反爬经验,使用Scrapy、BeautifulSoup等工具,解决数据抓取难题。 573

YOLO11涨点优化:注意力魔改 | 引入Deformable Attention (可变形注意力),灵活感受野自适应复杂形变目标

Deformable Attention为YOLO11带来的不仅是2.6个百分点的mAP提升,更是一种全新的“形变感知”范式。标准卷积的固定感受野在非刚性目标、多尺度变化和遮挡场景下力不从心——Deformable Attention恰好填补了这一空白。从架构设计到代码实现,从竞品对比到部署方案,从生态工具到安全风险,本文覆盖了将Deformable Attention引入YOLO11所需的全部知识链路。

2601_95807009的博客 286

谷歌浏览器chrome安装vuejs devtools 插件

(推荐方法二) 方法一 需正常打开chrome商店,搜索vuejs devtools 安装。chrome://extensions/ 开发者工具-扩展程序下启用; 方法二 github下载插件,npm包安装依赖,拖入浏览器扩展程序 具体操作: 1 .下载chrome扩展插件。 在github上下载压缩包并解压到本地,github下载地址:https://github.com/v...

皮一下很开心的猴头 1万+

深度学习工具包 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")

谷歌浏览器Vue devtools安装教程

谷歌浏览器Vue devtools安装教程 第一步:在github上下载工具,网址: https://github.com/vuejs/vue-devtools 第二步:安装工具依赖(使用npm安装) 在vue-devtools-dev文件夹(下载的文件根目录)下,打开命令提示行或在文件夹下shift+鼠标右键打开powershell; 输入命令npm install 安装依赖,命令默认去...

qindayong 7480

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。,新界面,新视觉,

lwip-2.0.3

lwip是瑞典计算机科学院(SICS)的Adam Dunkels 开发的一个小型开源的TCP/IP协议栈。实现的重点是在保持TCP协议主要功能的基础上减少对RAM 的占用。

谷歌浏览器chrome的vuejs devtools 插件的安装

曾经用过AngularJs、ReactJs开发过项目,现在想学习学习VueJS来开发。正所谓工欲善其事必先利其器。现在我们先来安转chrome的vuejs devtools插件。安装方法1: 需正常打开chrome商店,搜索vuejs devtools 安装。chrome://extensions/ 开发者工具-扩展程序下启用;方法2: github下载插件,npm包安装依赖,拖入浏览器扩展程序(...

相约9.28,幸福那一刻 9645

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

Chrome(谷歌浏览器)安装Vue插件vue-devtools

一、vue.js插件下载这绝对是最详细的Vue开发工具vuejs-devtools安装教程,相信你只需要5分钟即可解决所有问题vue-devtools是什么?vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率。一、vue.js插件下载根据下图打开谷歌浏览器中的【拓展程序】:勾选【开发者模式】——点击【加载已解压的拓展程序】——选择刚刚解压的vuejs-devtools插件整个文件夹导入即可。

qq_40835779的博客 2716

谷歌浏览器安装 vue 调试工具 vue devtools

谷歌浏览器安装 vue 调试插件 vue devtools,对于调试 vue 项目非常方便,本文介绍如何安装 1、在 github 下载vue devtools 这里可以使用 git 克隆 git clone https://github.com/vuejs/vue-devtools 或者直接到网站下载 vue devtools 插件地址:https://github.com...

悟世君子的博客 1558

谷歌 Chrome 浏览器离线安装 vue devtools 插件

由于某些原因,Chrome 应用商店访问不了,所以只能离线安装 vue devtools 插件,离线安装也有两种方法。

sinat_28005185的博客 2339
上一篇: Vue使用Element的表单Form必填项太多,导致代码冗余
下一篇: 前端请求参数拼接在URL上变为乱码
江湖儿女快意恩仇
博客等级 码龄7年 61粉丝 52原创
评论 20
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值