当前位置： 首页 > news >正文

Chrome开发者工具介绍

news 2025/11/4 9:03:32

Chrome开发者工具介绍

  • 前言
  • 1 打开DevTools
  • 2 命令菜单
  • 3 Elements面板
  • Console
  • JavaScript调试
  • Network

前言

Chrome开发者工具是谷歌浏览器自带的一款开发者工具，它可以给开发者带来很大的便利。常用的开发者工具面板主要包含Elements面板、Console面板、Sources面板、Network面板、Performance面板、Memory面板、Application面板。

名称说明
Elements查找网页源代码HTML中的任一元素，手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈
Console记录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行Shell
Sources用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码，可以调试JavaScript源代码，可以给JS代码添加断点等
Network从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化。
Performance评估实时网页性能以及相关的数据
Memory堆栈快照、JavaScript函数内存分配、隔离内存泄漏
Application记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据等

1 打开DevTools

路径1：菜单——>更多工具——>开发者工具
在这里插入图片描述
路径2：快捷键F12
路径3：右键——>检查
在这里插入图片描述

2 命令菜单

在控制台中输入以下命令，可以打开命令菜单：
mac：command+shift+p
window：ctrl+shift+p

切换主题命令：dark theme
截屏：screenshot

capture area screenshot 截部分屏

full size 截全屏

node screenshot 选择一个节点截图
image.png

dock 切换调试工具的位置

3 Elements面板

ctrl+F 查找

//section/p 查找section下面的p标签

Console输入 inspect(dom节点) 查找dom节点

auto-complete添加样式 输入属性名称或者属性值，自动补充

user agent stylesheet 浏览器内置样式
image.png

inherited from div… 从…继承来的样式A
image.png

Pseudo 定义的伪类
image.png

image.png

:hov 查看hover
:cls 可以去掉类名，也可以更改某个元素的类名
image.png

复制样式：选中某个元素，右键，选择copy——>copy styles
image.png

Conputed列出了所有生效的样式，Show all可以看到从父元素继承来的样式，Group：对样式进行功能上的区分
image.png

Layout分成了grid和flexbox，列出了所有用到弹性布局和网格布局的容器
image.png

show line numbers 展示列数行数
show line labels 展示名称
show track size 网格所在空间大小
show area names 每个网格名称
extend grid lines 延长辅助线
image.png
image.png

image.png

image.png

列出页面中所有的绑定的事件，remove去掉事件监听
image.png

DOM Breakpoints
subtree modifications：以当前节点为根节点，子节点修改了会暂停运行
attribute modifications：当前节点属性被修改了，会暂停
node removal：当前节点被删除了，会暂停
image.png
image.png

节点属性
image.png

构建无障碍页面
image.png

Console

快捷键：Ctrl+shift+J
image.png

$_返回上一条语句执行结果
$0返回上一个选择的节点
image.png
查看代码执行时间
image.png

image.png
image.png

JavaScript调试

debugger 调试命令
一步一步
image.png
打断点

image.png
断点位置
image.png
跳到下一个断点
image.png
将代码折叠起来
image.png
当在页面中点击就会暂停
image.png
如果进入源码不想调试，call stack，忽略当前文件
image.png

Network

Name
Status
Type
Initiator：什么东西发起的请求
Size：资源的大小
Time：发起请求的时间
WaterFall：瀑布流信息
image.png
WS：Websocket
保留历史请求
image.png
模拟用户设备
image.png
请求数量 多少字节数据被传输 传输来的文件大小（压缩） 请求完成时间 DOM节点渲染完毕　加载时间
image.png

相关文章：

Chrome开发者工具介绍

Chrome开发者工具介绍 前言1 打开DevTools2 命令菜单3 Elements面板ConsoleJavaScript调试Network 前言 Chrome开发者工具是谷歌浏览器自带的一款开发者工具，它可以给开发者带来很大的便利。常用的开发者工具面板主要包含Elements面板、Console面板、Sources面板、…...

编程日记 2023/8/7 18:56:28

利用MMPose进行姿态估计（训练、测试全流程）

前言 MMPose是一款基于PyTorch的姿态分析开源工具箱，是OpenMMLab项目成员之一，主要特性： 支持多种人体姿态分析相关任务：2D多人姿态估计、2D手部姿态估计、动物关键点检测等等更高的精度和更快的速度：包括“自顶向下”…...

编程日记 2023/8/7 18:55:27

ROS2 编译含有自定义消息项目报错：msg/detail/header__struct.h: 没有那个文件或目录

项目场景： 当迁移ROS 1 项目到 ROS 2 时，有时候会遇到消息类型的变化和更新，消息类型可能需要进行一些调整以适应新的ROS 2要求。本文将介绍如何处理自定义消息中的Header字段，以确保项目能够顺利地适应ROS 2的消息类型定义。 问…...

编程日记 2023/8/7 18:54:26

线段树思想拆解（下篇）

线段树思想拆解（下篇） 上篇回顾 到这里我们已经处理好了初始化以及添加方法，接下来实现范围的 query 方法 public int query(int queryL, int queryR) {return query(queryL, queryR, 1, orgLength - 1, 1);}到此为止通过借助 sum 数组&…...

编程日记 2023/8/7 18:53:23

Containerd容器镜像管理

1. 轻量级容器管理工具 Containerd 2. Containerd的两种安装方式 3. Containerd容器镜像管理 4. Containerd数据持久化和网络管理 1、Containerd镜像管理 1.1 Containerd容器镜像管理命令 docker使用docker images命令管理镜像单机containerd使用ctr images命令管理镜像,con…...

编程日记 2023/8/7 18:52:21

Baumer工业相机堡盟工业相机如何通过BGAPI SDK获取相机当前数据吞吐量（C#）

Baumer工业相机堡盟工业相机如何通过BGAPISDK里函数来获取相机当前数据吞吐量（C#） Baumer工业相机Baumer工业相机的数据吞吐量的技术背景CameraExplorer如何查看相机吞吐量信息在BGAPI SDK里通过函数获取相机接口吞吐量 Baumer工业相机通过BGAPI SDK获取…...

编程日记 2023/8/7 18:51:19

Ubuntu服务器版配置wifi

最近把曾经不用的上网本安装了一个Ubuntu-Server版，当成服务器来用，因为家庭网络布线问题，只好用自带的WIFI来连接网络，Server版也没有什么图形化的管理工具，之后手动编辑配置文件了。 Server下面配置起来还是很方便的…...

编程日记 2023/8/7 18:50:18

Windows 主机的VMware 虚拟机访问 wsl-ubuntu 的 API 服务

Windows 主机的VMware 虚拟机访问 wsl-ubuntu 的 API 服务 0. 背景1. 设置2. 删除 0. 背景 需要从Windows 主机的VMware 虚拟机访问 wsl-ubuntu 的 API 服务。 1. 设置 Windows 主机的IP：192.168.31.20 wsl-ubuntu Ubuntu-22.04 的IP：172.29.211.52 &…...

编程日记 2023/8/7 18:49:16

【Spring】（一）Spring设计核心思想

文章目录 一、初识 Spring1.1 什么是 Spring1.2 什么是 容器1.3 什么是 IoC 二、对 IoC 的深入理解2.1 传统程序开发方式存在的问题2.2 控制反转式程序的开发2.3 对比总结 三、对 Spring IoC 的理解四、DI 的概念4.1 什么是 DI4.2 DI 与 IoC的关系 一、初识 Spring 1.1 什么是…...

编程日记 2023/8/7 18:48:10

chrome插件开发实例04-智能收藏夹

目录 功能说明 演示 源码下载 源代码 manifest.json popup.html popup.js background.js 功能说明 基于chrome插件࿰...

编程日记 2023/8/7 18:47:08

iOS技术之 手机系统15.0之后 的 UITableView section header多22像素问题

iOS 15 的 UITableView又新增了一个新属性：sectionHeaderTopPadding 会给每一个section header 增加一个默认高度，当我们 使用 UITableViewStylePlain 初始化 UITableView的时候，就会发现，系统给section header增高了22像素。 解…...

编程日记 2023/8/7 18:46:07

Windows下安装Kafka（图文记录详细步骤）

Windows下安装Kafka Kafka简介一、Kafka安装前提安装Kafka之前，需要安装JDK、Zookeeper、Scala。1.1、JDK安装（version：1.8）1.1.1、JDK官网下载1.1.2、JDK网盘下载1.1.3、JDK安装 1.2、Zookeeper安装1.2.1、Zookeeper官网下载1.2.…...

编程日记 2023/8/7 18:45:06

linuxARM裸机学习笔记（3）----主频和时钟配置实验

引言：本文主要学习当前linux该如何去配置时钟频率，这也是重中之重。 系统时钟来源： 32.768KHz 晶振是 I.MX6U 的 RTC 时钟源， 24MHz 晶振是 I.MX6U 内核 和其它外设的时钟源 1. 7路PLL时钟源【都是从24MHZ的晶振PLL而来…...

编程日记 2023/8/7 18:44:05

防勒索病毒

随着勒索软件攻击在2023年的激增，网络安全已成为当今最重要的议题之一。根据区块链分析公司Chainaanalysis的最新报告，勒索软件攻击已成为唯一呈增长趋势的基于加密货币的犯罪行为，勒索金额更是比一年前增加了近1.758亿美元，达到4…...

编程日记 2023/8/7 18:43:04

剑指 Offer 53 - II. 0～n-1 中缺失的数字

力扣 一个长度为n-1的递增排序数组中的所有数字都是唯一的，并且每个数字都在范围0～n-1之内。在范围0～n-1内的n个数字中有且只有一个数字不在该数组中，请找出这个数字。 示例 1: 输入: [0,1,3] 输出: 2 示例 2: 输入: [0,1,2,3,4,5…...

编程日记 2023/8/7 18:42:03

vue2和vue3区别

vue2和vue3的区别有以下8点： 1、双向数据绑定原理不同； 2、是否支持碎片； 3、API类型不同； 4、定义数据变量和方法不同； 5、生命周期钩子函数不同； 6、父子传参不同； 7、指令与插槽不同&#x…...

编程日记 2023/8/7 18:41:01

IMV3.0

经历了两个版本，基础内容在前面，可以使用之前的基础环境： v1： https://blog.csdn.net/wtt234/article/details/132139454 v2： https://blog.csdn.net/wtt234/article/details/132144907 一、代码组织结构 二、代码 2.…...

编程日记 2023/8/7 18:40:00

怎么在树莓派环境上搭建web网站，并发布到外网可访问，今天教给大家

怎么在树莓派上搭建web网站，并发布到外网可访问？ 文章目录 怎么在树莓派上搭建web网站，并发布到外网可访问？概述使用 Raspberry Pi Imager 安装 Raspberry Pi OS测试 web 站点安装静态样例站点 将web站点发布到公网安装 Cpolarcpo…...

编程日记 2023/8/7 18:38:59

大文件传输软件| 生命科学中的关键因素

在2023年，生命科学领域以及其先进的科学技术吸引了人们的目光。这些研究背后，很少有人知道的是，其中涉及了大量的研究数据需要实时进行文件传输，以便于研究，合作，分享，分析，临床试验…...

编程日记 2023/8/7 18:37:58

varint编码实现原理

简言 1. varint即 variable int，也就是变长整型，在mysql，levelDB，protobuf中都有使用 2. varint编码的优点是对数值较小的数进行编码后占用字节较少，比如[0-127]只占用1个字节，[128~16383]只占用2个字节。…...

编程日记 2023/8/7 18:36:57

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造，完美适配AGV和无人叉车。同时，集成以太网与语音合成技术，为各类高级系统（如MES、调度系统、库位管理、立库等）提供高效便捷的语音交互体验。 L…...

编程新知 2025/11/3 20:10:05

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/8/3 11:17:37

P3 QT项目----记事本（3.8）

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

编程新知 2025/10/27 2:41:32

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

编程新知 2025/11/3 2:11:24

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

编程新知 2025/9/12 15:10:44

C# SqlSugar：依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

编程新知 2025/8/29 10:53:38

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...

编程新知 2025/10/28 14:25:12

【Linux】Linux 系统默认的目录及作用说明

博主介绍&#xff1a;✌全网粉丝23W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

编程新知 2025/10/29 23:03:35

从面试角度回答Android中ContentProvider启动原理

Android中ContentProvider原理的面试角度解析&#xff0c;分为​​已启动​​和​​未启动​​两种场景&#xff1a; 一、ContentProvider已启动的情况 1. ​​核心流程​​ ​​触发条件​​&#xff1a;当其他组件&#xff08;如Activity、Service&#xff09;通过ContentR…...

编程新知 2025/10/2 19:46:59

Python常用模块：time、os、shutil与flask初探

一、Flask初探 & PyCharm终端配置 目的： 快速搭建小型Web服务器以提供数据。 工具： 第三方Web框架 Flask (需 pip install flask 安装)。 安装 Flask： 建议： 使用 PyCharm 内置的 Terminal (模拟命令行) 进行安装，避免频繁切换。 PyCharm Terminal 配置建议： 打开 Py…...

编程新知 2025/10/15 8:34:59