Chrome开发者工具介绍

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
win：ctrl+shift+p
在这里插入图片描述
一些实用的命令：

说明命令
切换主题颜色switch to dark theme切换黑色主题
switch to light theme切换白色主题
在这里插入图片描述
截屏Capture area screenshot截取网页上任意区域的屏幕，不包括控制台
Capture full size screenshot截取全屏，包括滚动条的区域
Capture node screenshot截取某个元素的屏幕（选择该命令后，使用左上角的箭头选中页面上某个元素，再打开命令菜单输入该命令）
Capture screenshot截取网页当前的屏幕
在这里插入图片描述
切换调试工具的位置Dock to bottom底部显示调试工具
Dock to right右边显示调试工具
Dock to left左边显示调试工具
在这里插入图片描述

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/35297.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

数据结构——时间复杂度和空间复杂度

数据结构——时间复杂度和空间复杂度

1.算法效率 2.时间复杂度 3.空间复杂度 4. 常见时间复杂度以及复杂度oj练习 1.算法效率 1.1 如何衡量一个算法的好坏 如何衡量一个算法的好坏呢&#xff1f;比如对于以下斐波那契数的计算 long long Fib(int N) { if(N < 3) return 1; return Fib(N-1) Fib(N-2); }我们看到…
阅读更多...
2023 互联网大厂薪资大比拼

2023 互联网大厂薪资大比拼

最近整理了33家互联网大厂的薪资情况。可以看出来&#xff0c;大部分互联网大厂薪资还是很不错的&#xff0c;腾讯、阿里、美团、百度等大厂平均月薪超过30k&#xff0c;其他互联网大厂平均月薪也都在25k以上。01020304050607080910111213141516171819202122232425262728293031…
阅读更多...
yo！这里是STL::list类简单模拟实现

yo！这里是STL::list类简单模拟实现

目录 前言 重要接口实现 框架 默认成员函数 迭代器&#xff08;重点&#xff09; 1.引言 2.list迭代器类实现 3.list类中调用实现 增删查改 后记 前言 我们知道&#xff0c;stl中的vector对应数据结构中的顺序表&#xff0c;string类对应字符串&#xff0c;而今天要…
阅读更多...
Unity C# 之 Http 获取网页的 html 数据，并去掉 html 格式等相关信息

Unity C# 之 Http 获取网页的 html 数据，并去掉 html 格式等相关信息

Unity C# 之 Http 获取网页的 html 数据&#xff0c;并去掉 html 格式等相关信息 目录 Unity C# 之 Http 获取网页的 html 数据&#xff0c;并去掉 html 格式等相关信息 一、简单介绍 二、实现原理 三、注意事项 四、效果预览 五、关键代码 一、简单介绍 Unity中的一些知…
阅读更多...
Linux网络基础（中）

Linux网络基础（中）

目录&#xff1a; 再谈“协议” HTTP协议 认识URL&#xff1a; urlnecode和urldecode HTTP协议格式&#xff1a; HTTP的方法&#xff1a; 简易HTTP服务器&#xff1a; 传输层 再谈端口号&#xff1a; 端口号范围划分&#xff1a; netstat&#xff1a; pidof&…
阅读更多...
Ubantu安装Docker(完整详细)

Ubantu安装Docker(完整详细)

先在官网上查看对应的版本:官网 然后根据官方文档一步一步跟着操作即可 必要准备 要成功安装Docker Desktop&#xff0c;必须&#xff1a; 满足系统要求 拥有64位版本的Ubuntu Jammy Jellyfish 22.04&#xff08;LTS&#xff09;或Ubuntu Impish Indri 21.10。 Docker Deskto…
阅读更多...
Redis基础命令大全

Redis基础命令大全

这里写目录标题 第一章、Redis 命令大全1.1&#xff09;通用命令语法&#xff1a;ping语法&#xff1a;dbsize语法&#xff1a;select db语法&#xff1a;flushdb语法&#xff1a;exit 或 quit语法&#xff1a;redis-cli 1.2&#xff09;Redis 的 Key 的操作命令语法&#xff1…
阅读更多...
Elasticsearch之kibana相关命令

Elasticsearch之kibana相关命令

1.中文分词器相关命令 2.拼音分词器相关命令
阅读更多...
服务器之LNMP

服务器之LNMP

lnmp的构成 L&#xff1a;linux系统,操作系统。 N&#xff1a;nginx网站服务&#xff0c;前端,提供前端的静态页面服务。同时具有代理,转发的作用。 转发&#xff1a;主要是转发后端请求。转发到PHP。nginx没有处理动态资源的功能,他有可以支持转发动态请求的模块。 M&…
阅读更多...
REDIS主从配置

REDIS主从配置

目录 前言 一、概述 二、作用 三、缺点 四、redis主从复制的流程 五、搭建redis主从复制 总结 前言 Redis的主从配置是指在Redis集群中&#xff0c;将一个Redis节点配置为主节点&#xff08;master&#xff09;&#xff0c;其他节点配置为从节点&#xff08;slave&#xff09;…
阅读更多...
【数据结构•堆】堆排序（理论基础）

【数据结构•堆】堆排序（理论基础）

堆的定义 　• 堆是一个完全二叉树 　　–所有叶子在同一层或者两个连续层 　　–最后一层的结点占据尽量左的位置 　• 堆性质 　　–为空, 或者最小元素在根上 　　–两棵子树也是堆 存储方式 　• 最小堆的元素保存在heap[1..hs]内 　　– 根在heap[1] 　　–K的左儿子是2k,…
阅读更多...
细胞——求细胞数量 C++详解

细胞——求细胞数量 C++详解

细胞——求细胞数量 C详解 求细胞数量题目描述输入格式输出格式样例样例输入样例输出 提示数据规模与约定 解法代码 求细胞数量 题目描述 一矩形阵列由数字 0 0 0 到 9 9 9 组成&#xff0c;数字 1 1 1 到 9 9 9 代表细胞&#xff0c;细胞的定义为沿细胞数字上下左右若还…
阅读更多...
vue3中使用component动态组件常见问题

vue3中使用component动态组件常见问题

一. 在vue3中使用动态组件问题警告处理 1. 代码如下 <template><div v-for"(item, index) in navItems" :key"index"><component :is"item.component" :key"item.gameId"></component></div> </te…
阅读更多...
Leetcode-每日一题【剑指 Offer 26. 树的子结构】

Leetcode-每日一题【剑指 Offer 26. 树的子结构】

题目 输入两棵二叉树A和B&#xff0c;判断B是不是A的子结构。(约定空树不是任意一个树的子结构) B是A的子结构&#xff0c; 即 A中有出现和B相同的结构和节点值。 例如: 给定的树 A: 3 / \ 4 5 / \ 1 2 给定的树 B&#xff1a; 4 / 1 返回 true&#xff0…
阅读更多...
Vue + MapBox快速搭建

Vue + MapBox快速搭建

一、说明&#xff1a; 1.mapbox-gl自2.0版本开始不再开源&#xff0c;需要用户在官网申请key使用。 2.maplibre GL JS是一个开源库&#xff0c;它起源于 mapbox-gl-js 的开源分支。该库的初始版本&#xff08;1.x&#xff09;旨在替代Mapbox的OSS版本。简单来说maplibre是mapb…
阅读更多...
C++——缺省参数

C++——缺省参数

缺省参数的定义 缺省参数是声明或定义函数时为函数的参数指定一个缺省值。在调用该函数的时候&#xff0c;如果没有指定实参&#xff0c;则采用该形参的缺省值&#xff0c;否则使用指定的实参。 void Func(int a 0) {cout << a << endl; } int main() { Func()…
阅读更多...
【Kubernetes】Kubernetes之Pod详解

【Kubernetes】Kubernetes之Pod详解

Pod 一、 Pod1. Pod 基础概念2. 在 Kubrenetes 集群中 Pod 使用方式2.1 pasue 容器2.2 kubernetes 中的 pause 容器提供的功能 3. Pod 的概念和结构组成4. Pod 的分类5. Pod 容器的分类5.1 基础容器&#xff08;infrastructure container&#xff09;5.2 初始化容器&#xff08…
阅读更多...
【大数据】Flink 详解（二）：核心篇 Ⅲ

【大数据】Flink 详解（二）：核心篇 Ⅲ

Flink 详解&#xff08;二&#xff09;&#xff1a;核心篇 Ⅲ 29、Flink 通过什么实现可靠的容错机制&#xff1f; Flink 使用 轻量级分布式快照&#xff0c;设计检查点&#xff08;checkpoint&#xff09;实现可靠容错。 30、什么是 Checkpoin 检查点&#xff1f; Checkpoint …
阅读更多...
如何进行游戏平台搭建？

如何进行游戏平台搭建？

游戏平台搭建涉及多个步骤和技术&#xff0c;下面是一个大致的指南&#xff1a; 市场调研和定位&#xff1a;首先&#xff0c;要了解游戏市场和受众的需求&#xff0c;选择适合的游戏类型和定位。 选择平台类型&#xff1a;决定是要搭建网页平台、移动应用平台还是其他类型的…
阅读更多...
群晖6.X便捷的安装cpolar内网穿透

群晖6.X便捷的安装cpolar内网穿透

群晖6.X便捷的安装cpolar内网穿透 文章目录 群晖6.X便捷的安装cpolar内网穿透前言1. 下载cpolar的群晖套件1.1 打开群晖套件中心1.2 选择“手动安装”1.3 选择下载cpolar套件位置 2. 打开cpolar的Web-UI界面3. 注册会员 前言 随着硬件设备和软件技术的发展&#xff0c;以及数据…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023