你不知道的，F12开发者工具调试技巧1111

偏执的太偏执、 2023-06-11 03:17 17阅读 0赞

你不知道的，F12开发者工具调试技巧  
1. 调试伪类 (点击styles 选择：hov 在下方选择元素的状态即可)

方式二 （在elments中选中节点然后右键选中元素前状态，点击后 节点前就会出现一个橘色小球，然后在右侧就可以查看样式了）

2.筛选选中节点上的class名（点击.cls后可在下面的勾选框中筛选）

add new class 可为改节点添加一个新的class类名

.cls旁的+号可以在下方添加一个如上的空类名css对象，用于调试

filter中类似 ctrl +F的功能筛选的是下方内容

3. 节点断点调试  
很多时候，我们需要查看元素的节点状态发生改变的时候，（通常是js修改）同样选择后，节点前会有蓝色小球标示

这里可以看见当前页面所有断点

5. js断点调试  
选择源代码模式 点击创建断点，断点可以创建多个

条件中断断点 （很多时候，并不需要查看所有）

也可以在这里查看信息

6.NetWork 详细介绍

从红色的按钮开始从左到右

记录按钮 处于打开状态时会在此面板进行网络连接的信息记录，关闭后则不会记录。

清除按钮 清除当前的网络连接记录信息。（点击一下就能清空）

捕获截屏 记录页面加载过程中一些时间点的页面渲染情况，截图根据可视窗口截取，执行一次刷新 （ctrl +R）如下图所示

过滤按钮 过滤器 能够自定义筛选条件，找到自己想要资源信息

可以筛选的内容

domain：资源所在的域，即url中的域名部分。如 domain:api.github.com

has-response-header：资源是否存在响应头，无论其值是什么。如 has-response-header：Access-Control-Allow-Origin

is：当前时间点在执行的请求。当前可用值：running

larger-than：显示大于指定值大小规格的资源。单位是字节(B),但是K(kB)和M(MB)也是可以的~ 如larger-than:150K

method：使用何种HTTP请求方式。如 GET

mime-type：也写作content-type，是资源类型的标识符。如 text/html

scheme：协议规定。如 HTTPS

set-cookie-name：服务器设置的cookies名称

set-cookie-value：服务器设置的cookies的值

set-cookie-domain：服务器设置的cookies的域

status-code：HTTP响应头的状态码

关键字查询，查找所有包含此信息的内容

是否显示详细信息

显示时间轴（能够根据时间，查看对应时间下 浏览器请求的资源信息 ）

Preserve log :是否保留日志

当选择保留日志，重新加载url当前界面时，之前请求显示的资源信息，会保留下来，

Disable cache :是否进行缓存

当打开开发者工具时生效，打开这个开关，则页面资源不会存入缓存，可以从Status栏的状态码看文件请求状态。

Offline :设置模拟限速（用于模拟网速对页面的印象）

请求主体内容介绍

下列介绍中，前者为名词解释，后者为举例

Name/Pat：资源名称以及URL路径 （main.css）

Method：Http请求方法 (GET或者POST)

status/Text：Http状态码/文字解释 （200，ok）

Type ：请求资源的MIME类型，MIME是Multipurpose Internet Mail Extensions (html,css,js等)

Initiator：解释请求是怎么发起的，有四种可能的值

1.Parser  ：请求是由页面的html解析时发送  
       2.Redirect：请求是由页面重定向发送  
       3.script  ：请求是由script脚本处理发送  
       4.other   ：请求是由其他过程发送的，比如页面里的Link链接点击  
1  
2  
3  
4  
页面的html解析时发送  
2.Redirect：请求是由页面重定向发送  
3.script ：请求是由script脚本处理发送  
4.other ：请求是由其他过程发送的，比如页面里的Link链接点击

\- size/content：size是响应头部和响应体结合的大小，content是请求解码后的大小  
————————————————  
版权声明：本文为CSDN博主「MmM豆」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。  
原文链接：https://blog.csdn.net/marendu/article/details/102752904

发表评论取消回复

表情：

评论列表（有 0 条评论，17人围观）

还没有评论，来说两句吧...

相关阅读

相关《你不知道的 Chrome 调试技巧》-- 学习笔记

截全屏 ctrl + shift + p ：调出command 然后输入screen ![987cb8f4598745789e95eff2f29fcdaa.png][

桃扇骨/ 2024年03月22日 23:31/ 0 赞/ 119 阅读

相关作为前端开发者，这些CSS技巧你还不知道吗！！！

背景混合模式在CSS中可以使用 `background-blend-mode` 来实现元素背景的混合： .box1{ background-i

墨蓝/ 2024年03月17日 14:35/ 0 赞/ 134 阅读

相关你不知道的，F12开发者工具调试技巧1111

你不知道的，F12开发者工具调试技巧 1. 调试伪类 (点击styles 选择：hov 在下方选择元素的状态即可) 方式二（在elments中选中节点然后右键选中

偏执的太偏执、/ 2023年06月11日 03:17/ 0 赞/ 18 阅读

相关使用F12开发人员工具调试JavaScript错误

使用F12工具中的调试程序，Web开发人员能够无需离开浏览器的情况下快速调试JavaScript代码，方便快速的定位到JavaScript文件的错误代码，来提高开发效率。开

╰半夏微凉°/ 2022年09月18日 14:47/ 0 赞/ 424 阅读

相关 IE11 全新的F12开发者工具

我讨厌debug，相信也没多少开发者会喜欢。但是当代码出错之后肯定是要找出问题出在哪里的。不过网页开发的时候遇到 BUG 是一件再正常不过的事情了，我们不能保证自己的代码万无一

╰+攻爆jí腚メ/ 2022年09月18日 14:47/ 0 赞/ 23 阅读

相关你所不知道的Android Studio调试技巧

原文链接：简书@涅槃1992 [http://www.jianshu.com/p/011eb88f4e0d][http_www.jianshu.com_p_011eb88f4e

今天药忘吃喽~/ 2022年07月10日 05:58/ 0 赞/ 364 阅读

相关你可能不知道的javascript调试技巧

了解你的工具可以极大的帮助你完成任务。尽管 JavaScript 的调试非常麻烦，但在掌握了技巧 (tricks) 的情况下，你依然可以用尽量少的的时间解决这些错误 (erro

男娘i/ 2022年06月06日 14:15/ 0 赞/ 288 阅读

相关你所不知道的Chrome调试技巧（下）

7、格式化代码我们在使用webpack打包的时候，一般会将代码压缩混淆。好处是可以减少代码体积，但坏处是如果打包后报错（比如在测试环境），通过点击console的堆

逃离我推掉我的手/ 2022年06月05日 10:27/ 0 赞/ 339 阅读

相关你所不知道的Chrome调试技巧（上）

0、前注 [英文原文][Link 1] 本文基于[译文][Link 2]，在原有基础上进行增强，根据我个人了解，额外加了很多内容。默认是基于chrome来进行调试的

我不是女神ヾ/ 2022年06月05日 07:06/ 0 赞/ 690 阅读

相关你不知道的Chrome开发者工具新功能

本文转自：　[https://news.cnblogs.com/n/573595/][https_news.cnblogs.com_n_573595] 相信对本文感兴趣的读者

阳光穿透心脏的1/2处/ 2022年06月05日 03:08/ 0 赞/ 505 阅读