Chrome开发者工具介绍

已于 2023-08-08 22:55:36 修改
阅读量2.7k 收藏 5
点赞数
分类专栏： 工具 文章标签： chrome 前端
于 2023-08-07 16:15:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46612221/article/details/132144942
版权

Chrome开发者工具介绍

前言

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

橘猫吃不胖～
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
chrome开发者工具入门
lelemom的博客
12-30 295
Chrome旧版本8个功能子集（旧版本，但是讲解比较详细） 参考文档：https://www.cnblogs.com/daishuguang/p/3972721.html 现在版本 断点设置 断点的设置，只是方式不太一样。前面说过断点的作用就是将函数挂起，DOM Breakpoints的作用就是在DOM被修改时，在修改的代码前挂起。XHR Breakpoints就是在出现了XHR请求的...
chrome开发者工具初探
机智的皮卡丘的博客
01-17 274
chrome和ff一直都是web开发者最后青睐的浏览器，作为先进浏览器在兼容性和html5的支持都非常的不错，比IE要好多了，头好痛，今天来研究下chrome开发者工具 在window中按F12就可以调出来了，中间有几个选项卡，Elements、console、sources、network、timeline，profiles，application，Security，audits
你不知道的，F12开发者工具调试技巧
热门推荐
marendu的博客
10-26 2万+
你不知道的，F12开发者工具调试技巧 1. 调试伪类 (点击styles 选择：hov 在下方选择元素的状态即可) 方式二 （在elments中选中节点然后右键选中元素前状态，点击后 节点前就会出现一个橘色小球，然后在右侧就可以查看样式了） 2.筛选选中节点上的class名（点击.cls后可在下面的勾选框中筛选） add new class 可为改节点添加一个新的class类名 .cl...
Chrome 开发者调试常用工具
q515656712的博客
06-21 3224
Chrome调试工具介绍①②③④⑤⑥⑦⑧⑨⑩。
Java最全阿里程序员喜欢用的 15 款开发者工具，你都用过哪些？(1)，java基础笔试面试题以及答案
最新发布
2401_83977605的博客
05-11 1030
学习技术是一条慢长而艰苦的道路，不能靠一时激情，也不是熬几天几夜就能学好的，必须养成平时努力学习的习惯。所以：贵在坚持！最后再分享的一些BATJ等大厂20、21年的面试题，把这些技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节，由于篇幅有限，上面只是以图片的形式给大家展示一部分。Mybatis面试专题MySQL面试专题并发编程面试专题本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录。
js监听浏览器关闭_Chrome浏览器F12开发者工具简单使用
weixin_39816260的博客
12-03 2112
1.如何调出开发者工具按F12调出右键检查(或快捷键Ctrl+Shift+i)调出2.开发者工具初步介绍chrome开发者工具最常用的四个功能模块：元素(ELements)、控制台(Console)、源代码(Sources)，网络(Network)。元素(Elements)：用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。css可以即时修改，即时显示。大大方便了开发者...
chromeF12 谷歌开发者工具详解（转载）
weixin_44765650的博客
03-01 4360
chromeF12 谷歌开发者工具详解
Chrome开发者工具详解（一）
philosophy
04-20 6537
Chrome开发者工具详解前言一、打开开发者工具方法二、面板常用方法1.Elements面板3、Network 面板2.读入数据总结 前言 Chrome浏览器中内置了一套强大的开发者工具，学会使用Chrome开发者工具对web网站进行静态分析和HTTP数据抓包，才能有效地分析网站的反爬技术，突破各种网络爬虫难题。下面将总结chrome开发者工具的常见用法。 一、打开开发者工具方法 （1）在对应网页页面，右键网站----选择“检查”选项 （2）按“F12”按钮 （3）按Ctrl+Shift+I 组合键 二
Chrome开发者工具调试小技巧
菜鸟记录
09-21 3757
⏹Chrome开发者工具调试小技巧
Chrome 开发者工具中文手册
04-13
Chrome开发者工具是Google Chrome浏览器内置的一套强大的网页开发和调试工具，它为前端开发者提供了丰富的功能，包括元素检查、网络监控、源代码编辑、性能分析等。这份“Chrome开发者工具中文手册”旨在帮助用户...
chrome开发者工具-timeline的详细介绍
09-24
Chrome开发者工具中的Timeline功能是优化Web应用性能的关键工具，它帮助开发者深入了解页面的渲染过程，以便进行有效的性能优化。Timeline提供了详细的性能数据，包括JavaScript执行、样式计算、布局、绘制和渲染层...
Chrome开发者工具官方使用文档
03-24
Chrome开发者工具的功能很强大，要了解其所有功能最好是查看官方文档，但我们访问官方文档并不是很方便，因此这里将官方的英文文档打包成了CHM格式，可以下载到本机方便查阅，为了在CHM阅读器中接近原文显示效果和不...
用Chrome开发者工具做JavaScript性能分析
03-02
这篇文章告诉你如何通过用Chrome开发者工具（ChromeDeveloperTools）找到这几行关键的代码。我们来看一个简单的“颜色排序器”应用，这个应用展示了一个由各种颜色构成的网格，你可以拖拽这些颜色进行混合。每一个点...
web爬虫第二弹 chrome开发者工具
CSDN_Xying的博客
10-27 866
爬虫 chrome开发者工具的使用
谷歌开发者工具详解（看这一篇就够了）
浮游的博客
05-26 8093
目录如何打开Element面板1 元素选择2 设备选择模式3 主菜单4 元素面板5 样式调整的CSS预处理器Console面板Sources面板Network面板 简单介绍一下chrome的控制台，它的作用在于，帮助开发人员对网页进行布局，比如HTML+CSS，帮助前端工程师更好的调试脚本（JavaScript、jQuery）之类的，还可以使用工具查看网页加载过程，获取网页请求（这个过程也叫做抓包）。 如何打开 按F12或右键点击‘检查’可打开此工具。 Element面板 该标签使用来查看页面的HTML标
21-Chrome开发者工具：利用网络面板做性能分析
LIJIWEI0611的博客
04-21 1254
浏览器中的页面循环系统”模块我们已经介绍完了，循环系统是页面的基础，理解了循环系统能让我们从本质上更好地理解页面的工作方式，加深我们对一些前端概念的理解。 　　 接下来我们就要进入新的模块了，也就是“浏览器中的页面”模块，正如专栏简介中所言，页面是浏览器的核心，浏览器中的所有功能点都是服务于页面的，而 Chrome 开发者工具又是工程师调试页面的核心工具，所以在这个模块的开篇，我想先带你来深入了解下 Chrome 开发者工具。 　　Chrome 开发者工具（简称 DevTools）是一组...
Chrome浏览器开发者工具
等待就是浪费青春
11-07 3105
Elements：用来调试网页的HTML源码和CSS代码。 Resources：查看网页加载的各种资源文件（比如代码文件、字体文件、css文件等），以及在硬盘上创建的各种内容（比如本地缓存、Cookie、Local Storage等）。 Network：查看网页的HTTP通信情况。 Sources：调试JavaScript代码。 Timeline：查看各种网
chrome开发者工具
08-05
Chrome开发者工具是一款由Google开发的强大的Web开发调试工具。它内置于Chrome浏览器中，并提供了一系列功能，帮助开发人员在浏览器中进行调试、分析和优化网页。 使用Chrome开发者工具，你可以查看和编辑网页的HTML、CSS和JavaScript代码，检查元素属性和样式，调试JavaScript代码，模拟移动设备和网络条件，分析网页性能，查看网络请求和响应以及执行其他许多有用的任务。 你可以通过按下F12键或右键点击页面并选择"检查"来打开Chrome开发者工具。一旦打开，你将看到一个面板，其中包含多个选项卡，例如Elements、Console、Sources、Network等，每个选项卡都提供了不同的功能和工具。 总之，Chrome开发者工具是一个强大且必不可少的工具，可帮助开发人员调试和优化网页。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值