浏览器开发者工具简述

2021-07-24 11

以谷歌浏览器为例,F12或者右键点击“检查”、“审查元素”可以打开 “开发者工具”

浏览器开发者工具简述

以谷歌浏览器为例

F12或者右键点击“检查”、“审查元素”可以打开 “开发者工具”

1、开发者工具位置

  • 独立窗口
  • 浏览器窗口左侧
  • 底部
  • 右侧

 

 

2、设备图标

点击它可以切换到不同的终端、不同的尺寸比例进行调试布局

3、Elements (元素)

用于查看和编辑当前页面中的 HTML(结构) 和 CSS (样式)

3.1、选择元素

1)先点击左上角的“选择元素”箭头图标

2)再把鼠标移到页面中,选择一个要分析的元素(比如一个按钮),可以查看它的选择器、样式等属性

3.2、用户交互事件

可以查看、去除页面元素绑定的事件

4、Console (控制台)

用于显示脚本中所输出的调试信息,或运行测试脚本等。

黄色 warning

红色 error

5、Network (网络)

用于查看 HTTP 请求的详细信息,如请求头、响应头及返回内容等。

切换到XHR可以查看ajax请求(请求api)

Request URL:  请求地址

Request Method: 请求方法,RESTful  GET查询,POST添加,PUT修改,DELETE删除

Status Code: HTTP状态码

 

Request Headers:请求头

Authorization:Api接口鉴权

 

请求参数

Query String Parameters:GET请求,参数会以url string的形式进行传递。即?后的字符串则为其请求参数,并以&作为分隔符。

Form Data:content-type为application/x-www-form-urlencoded。即参数会以Form Data的形式进行传递

Request Payload:content-type为application/json,则参数会以Request Payload的形式进行传递

 

Preview可以查看请求响应的内容

Timing可以查看请求的耗时

网络节流设置,可用于复现不同网络状况下的问题

6、Performance (性能)

分析页面加载的过程,进而提供减少页面加载时间、提升响应速度的方案,用于优化前端页面,加速网页加载速度等

7、Application (应用)

主要作用是检查 web 应用加载的所有资源,Cookies、Local Storage本地存储等等

 

评论(0)

0/500

还没有评论,快来抢第一吧