chrome F12开发者工具使用

最新推荐文章于 2024-05-16 16:38:02 发布

学习之路温故知新

最新推荐文章于 2024-05-16 16:38:02 发布

阅读量1.1k

点赞数

分类专栏：运维部署

本文链接：https://blog.youkuaiyun.com/weixin_43114377/article/details/92396583

版权

运维部署专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了Chrome开发者工具的四个核心模块：Elements用于查看和编辑DOM结构及CSS样式；Console用于查看错误信息、执行脚本及查看JS API；Sources用于调试JavaScript和查看源代码；Network则详细解析了请求记录、过滤、资源类型、发起者、请求详情等，帮助开发者深入理解网络请求过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

chrome开发者工具最常用的四个功能模块：

1：Elements：主要用来查看前面界面的html的Dom结构，和修改css的样式。css可以即时修改，即时显示。大大方便了开发者调试页面。

2：console：这个除了查看错误信息、打印调试信息(console.log())、写一些测试脚本以外，还可以当作Javascript API查看用。例如我想查看console都有哪些方法和属性，我可以直接在Console中输入"console"并执行~

3：Sources：主要用来调试js和查看源代码

4：Network：如下图

在这里插入图片描述
记录按钮：处于打开状态时会在此面板进行网络连接的信息记录，关闭后则不会记录。

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

捕获截屏：记录页面加载过程中一些时间点的页面渲染情况，截图根据可视窗口截取，如下图所示。

过滤器能够自定义筛选条件，找到自己想要资源信息，如下图所示。
在这里插入图片描述
也可以指定一些条件进行搜素，例如：

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栏的状态码看文件请求状态。

设置限速可以模拟处于各种网络环境下的不同用户访问本页面的情况。
在这里插入图片描述
Network主题内容介绍

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

Name/Pat：资源名称以及URL路径（main.css）
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链接点击

请求文件具体说明
点击某个具体请求后的界面，如下图所示：
在这里插入图片描述
Header面板列出资源的请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等等

Preview：预览面板，用于资源的预览。
Response：响应信息面板包含资源还未进行格式处理的内容
iming：资源请求的详细信息花费时间

在这里插入图片描述
Copy Request Headers：复制HTTP请求头到系统剪贴板

Copy Response Headers：复制HTTP响应头到系统剪贴板

Copy Response：复制HTTP响应内容到系统剪贴板

Copy as
cURL：将网络请求作为一个curl的命令字符复制到系统剪贴板(curl是一种开源的命令行工具和库，用于配合url语法进行数据传输)

Copy All as HAR：将网络请求记录信息以HAR格式复制到系统剪贴板(what is HAR file)

Save as HAR with Content：将资源的所有的网络信息保存到HAR文件中(.har文件)

Clear Browser Cache：清除浏览器缓存

Clear Browser Cookies：清除浏览器cookies

Open in Sources Panel：当前选中资源在Sources面板打开

Open Link in New Tab：在新tab打开资源链接

Copy Link Address：复制资源url到系统剪贴板