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

Chrome开发者工具介绍

news 2025/7/7 19:24:05

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

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

编程新知 2025/7/6 15:11:34

深入剖析AI大模型：大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

编程新知 2025/7/1 6:09:18

TDengine 快速体验（Docker 镜像方式）

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

编程新知 2025/7/7 11:03:19

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

编程新知 2025/7/7 16:25:39

江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

编程新知 2025/7/6 1:19:36

Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

编程新知 2025/7/6 14:07:16

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

编程新知 2025/7/6 21:24:58

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂度…...

编程新知 2025/7/6 15:59:45

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

编程新知 2025/7/7 9:33:58

学习STC51单片机32（芯片为STC89C52RCRC）OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

编程新知 2025/7/4 14:58:44