dev-tool安装方法(手动安装版)

article/2025/9/29 2:04:51

记录一下vue调试神器dev-tool的安装过程,由于是在公司内网,也不方便挂梯子,所以手动安装——下载源码在本地编译,再添加扩展程序的方式安装。过程如下:


一、dev-tool源码获取

git地址:https://github.com/vuejs/devtools/tree/main

这里可以选择自己需要的版本,试了挺多版本,在安装的时候会遇到各种的文件缺失的问题,所以这里选择了一个v5.1.1版本,这个安装的过程基本比较顺畅,没什么大的问题。
版本切换
源码下载两种方式,第一种直接用git下载,git访问会出现连接失败的报错,有SSL验证和代理的问题,具体的问题遇到了可以自行搜索解决方法;这里为了方便直接点击Download ZIP下载压缩包就好。
源码获取

二、源码编译

这一步主要是安装依赖和编译源码,手动安装的过程官网教程也说得非常清楚,如果下载的版本一样的话直接执行以下指令就行

npm install//安装依赖,如果使用yarn进行包管理则yarn install
npm run build

完成后可以在文件夹里找到这个文件
chrome扩展文件

三、添加扩展程序

打开chrome浏览器,自定义及控制-更多工具-扩展程序,切换成开发者模式,点击加载已解压的扩展程序,选择第二步中的shells/chrome文件即可,
加载扩展程序
扩展程序的配置如下:
扩展程序配置

四、愉快地使用dev-tool

到此为止就可以使用dev-tool进行调试了,随便开一个vue项目,打开f12,切换到vue就ok了
dev-tool使用


http://chatgpt.dhexx.cn/article/S3LBIpUg.shtml

相关文章

一文彻底搞懂webpack devtool

为什么需要Source Map 首先根据谷歌开发者文档的介绍,Source Map一般与下列类型的预处理器搭配使用: 转译器(Babel)编译器(TypeScript)Minifiers(UglifyJS) 为什么呢?…

OpenBmc开发8:devtool简介与使用

1 简介 devtool是yocto中的一个工具,此命令行工具作为可扩展SDK(eSDK)的一部分,是基础组件。可以使用devtool来帮助构建,测试和打包eSDK中的软件。可以使用该工具有选择地将构建的内容集成到OpenEmbedded构建系统构建…

怎么在navicat(Navicat for MySQL)中运行SQL代码

1、首先在navicat中新建一个数据库(之前已经建好数据库,忽略本步) 2、点击上图中的“查询”命令 3、再点击“新建查询” 4、系统自动跳出如下图命令窗口 5、可以在命令行中敲代码或直接复制已有代码。如果代码是关于建表,执行成…

使用SQL语句创建数据表

写法一 create table student (sno char(10) primary key,sname varchar(20) not null,ssex char(2),sage smallint,sdept varchar(20),sid char(18) unique)写法二 create table student (sno char(10), sname varchar(20) not null, ssex char(2), sage smallint, sdept v…

SQL代码自动生成器

SQL代码自动生成器,效果图如下: 实现原理很简单: 通过数据库名,获取到数据表名,进而获取到数据字段。通过可视化的选择自定义的添加修改,一步一步完成SQL语句的编写。 其中对于常用的存储过程参数列表的书…

sql语句智能提示插件

1.下载安装 SqlPrompt10 及SQL.Prompt.Keygen注册码生成工具 链接: https://pan.baidu.com/s/1Oa3Ci6o2JjHZMjTXHdCkQg?pwdghew 提取码: ghew 2.修改hosts文件(如若跳过此步骤,虽然可以成功,但是重启电脑之后,又得重新操作&a…

sql server代码创建数据库详细过程

1.先打开sql server 2.点击新建查询 3.创建 数据库 主数据文件的大小为5MB,文件【按兆字节】的方式增长,一次增长2MB,最大容量20MB; 事务日志文件大小为4MB,文件【按百分比】的方式增长,一次增长25%&#…

vue实现codemirror代码编辑器中的SQL代码格式化功能

vue实现codemirror代码编辑器中的SQL代码格式化功能 1、首先使用npm安装sql-formatter插件 npm install --save sql-formatter2、然后引入该sql-formatter.js文件 import sqlFormatter from "sql-formatter";3、接下来就是针对需要格式化的代码调用该方法就OK啦 /…

SQL Server 代码颜色

今天初识SQL Server 随便敲了点代码、发现这代码真是五颜六色、既然有颜色就有寓意! 原来有这么多颜色、真是学习了! _____________________________chenchen

IDEA格式化SQL代码

IDEA格式化SQL代码 写在前面1.1、建立连接,数据库服务器地址,账号,密码等..1.2、基本操作,很多,增删改查,控制台SQl编写等等 写在前面 IntelliJ IDEA集成了很多我们开发中常用的工具,Linux连接…

SQL除法怎么用代码表示

SQL除法代码详解 前言一、除运算(关系代数)二、第一题:2.1导入数据到SQL Server:2.2理解:2.2.1代码:2.2.2↑代码理解和答案: 三、第二题:求使用了同“供应商S1所供应的全部零件”相同…

VUE实现SQL在线编辑器,SQL分析器,SQL代码关键字提示

1、首先使用npm安装CodeMirror插件,sql-formatter格式化插件 npm install --save codemirror npm install --save sql-formatter2、然后引入该文件 import codemirror/theme/ambiance.css import codemirror/lib/codemirror.css import codemirror/addon/hint/show-hint.cssc…

数据库SQL(基础代码)

启动、连接、断开和停止MySQL服务器 通过系统服务器和命令提示符(DOS)都可以启动、连接断开和停击MySQL,操作非常简单。 1.启动、停止MySQL服务器   启动、停止MySQL服务器,的方法有两种:系统服务器和命令提示符(DOS)。 (1)通过系统服务器启动、停止MySQL服务器   …

html640设计稿,移动设备分辨率(终于弄懂了为什么移动端设计稿总是640px和750px)...

在我开始写移动端页面至今,一直有2个疑问困扰着我,我只知道结果但不知道为什么 问题1:为什么设计师给的设计稿总是640px或750px(现在一般以Phone6为基准,给的750px) 问题2:为什么我们拿到640px和750px的设计稿&#xf…

1px像素问题

为什么会存在1px问题?怎么解决? - 掘金 作为前端,你应该了解的分辨率/逻辑像素/物理像素/retina屏知识🧐 - 掘金 解决移动端1px边框问题的几种方法 - AhuntSun - 博客园 1、分辨率 分辨率x像素(水平) * …

px和分辨率的关系总结

在相同的屏幕宽高下:如:15.6英寸(396.24毫米)的笔记本电脑: 每单位1920*xxx的分辨率1366*xxx的分辨率一毫米1920/396.244.8个px1366/396.243.4个px 高分辨率意味着大约每一毫米5像素点,像素点越多&#x…

uni-app之响应式单位upx和rpx

一、upx uni-app 使用 upx 作为默认尺寸单位, upx 是相对于基准宽度的单位,可以根据屏幕宽度进行自适应。 uni-app 规定屏幕基准宽度750upx。 开发者可以通过设计稿基准宽度计算页面元素 upx 值,设计稿 1px 与框架样式 1upx 转换公式如下&…

HTML5 实现本地图片裁剪

HTML5 实现本地图片裁剪 文章目录 HTML5 实现本地图片裁剪1.知识点1.HTML 结构与 CSS 样式2.初始化3 实现 handleFiles,获取文件,读取文件并生成 url4.实现 paintImage 方法5 实现 cutImage 方法6 编写 drag 方法7 保存截图8 js部分 代码 这次小的案例是…

css像素px,物理像素(pt),设备像素比(dpr),1px边框问题,viewport自适应

关于 css像素px,物理像素(pt),设备像素比(dpr),1px边框问题,viewport自适应等问题。 目录 **关于 css像素px,物理像素(pt),设备像素比…

html怎么设置页面最小像素,html px像素单位

html长度尺寸单位px像素 设置字体大小以像素单位 笼统设置装备摆设宽度width、高度height、border边框等花式数字单位px。 一、px引见 px是html长度单元像素。譬如咱们电脑、手机显示屏均使用因而像素为单元,也即是px为单位。透露表现屏区分率1200*800其实便是指120…