F12谷歌开发者工具使用详解

对于许多前端开发者和网页设计师来说，浏览器的开发者工具是不可或缺的利器。通过这些工具，我们可以深入了解网页的内部结构、调试代码、测试设计以及优化性能。

不同的浏览器（如Chrome、Firefox、Safari）都有自己的开发者工具，虽然界面和功能略有差异，但基本功能都大同小异。本文将带你学习一些google开发者模式的妙用。

初识开发者工具

要打开浏览器开发者工具。你可以通过右键点击页面，选择“检查”或者F12快捷键打开，你将看到一个包含各种标签页的界面

• Elements（元素）面板：用于查看和编辑HTML结构。你可以通过这个面板直接修改页面元素的HTML代码，实时预览修改效果。
• Console（控制台）面板：用于输出调试信息、执行JavaScript代码等。这个面板在开发过程中非常有用，可以快速测试代码片段和查看错误信息。
• Sources（源代码）面板：用于查看和管理网页的JavaScript、CSS等资源文件。你可以在这里查看文件内容、设置断点以及单步执行代码。
• Network（网络）面板：用于监控网页加载过程中发送和接收的所有网络请求。你可以查看请求的详细信息、请求/响应头和内容等。
• Performance（性能）面板：用于分析网页性能瓶颈，通过记录和分析页面加载过程中的事件，找出影响性能的因素。
• Memory（内存）面板：用于分析内存使用情况，帮助查找内存泄漏和优化内存使用。

牛刀小试

几个小功能，让你知道开发者工具的强大

小鼠标点击可以让你快速定位到元素位置

• 复制文字

例如csdn，百度文库网络上的文本，复制的时候一般都会让你开通会员或者关注才能使用，看看大神都怎么做

通过elements中找到文本直接复制

• 找回密码

很多人在登录网站的时候选择记住密码，但是后来又忘记了

教你怎么找回密码

修改为type的类型为text,然后密码就变成了明文展示

使用开发者工具定位问题

作为运维人员的角度，可以使用开发者工具来协助进行问题定位

查看网站请求的基本信息

• ALL：显示所有请求
• XHR：显示AJAX异步请求
• JS：显示js文件
• CSS：显示css文件
• Img：显示图片
• Media：显示媒体文件，音频、视频等
• Font：显示Web字体
• Doc：显示html
• WS：显示websocket请求
• Other：显示其他请求

查看接口信息

• 左侧 Name 栏，选择自己要抓取的接口名称，点击后右侧会出现接口Headers、Response 等
• Headers 第一栏 General 获取服务器地址、接口地址、以及请求方法等
• 问号后面则是参数，key - value 形式，每个参数之间使用 & 相隔

可以通过network定位页面加载失败的问题，如图通过name可以看到具体记载失败的文件或者接口，status表示响应返回的状态码，200表示成功，如果是4xx或者5xx则表示请求失败，就需要好好定位了

size字段表示静态文件的大小

认识请求头和响应头

• General部分
  Request URL：请求的URL
  Request Method：请求使用的方法
  Status Code：响应状态码
  Remote Address：远程服务器的地址和端口
  Reffer Policy：Referrer判别策略
  
• 响应头
  Date：标识产生响应的时间
  Content-Encoding：指定响应内容编码
  Server：包含服务器信息，如名称，版本号等
  Content-Type：文档类型，指出返回的数据类型是什么。如此处的text/html代表返回的是HTML代码
  Set-Cookie：设置Cookies。响应头中的Set-Cookie告诉浏览器要将此内容放在Cookies中，下次请求携带Cookies请求
  Expires：指定响应过期时间，可以使代理服务器将加载的内容更新到缓存当中。如果再次访问，就可直接从缓存中加载，降低服务器的负载，缩短加载时间。

• 请求头
  Accept：请求报头域，用于指定客户端可接受哪些信息类型
  Accept-Encoding：指定客户端可接受的语言类型
  Accept-Language：指定客户端可接受的内容编码
  Host：指定请求资源的主机IP和端口号，其为请求URL的原始服务器或网关的位置
  Cookie：网站为了辨别用户进行会话跟踪而储存在用户本地的数据。主要功能是维持当前访问会话。（非常重要！！！）
  Referer：用来标识这个请求是从哪个网页过来的。服务器拿到这一信息并做相应的处理，如来源统计，防盗链等
  User-Agent:  浏览器型号和版本 ，可以使服务器识别客户使用的操作系统及版本等信息。
  Content-Type：互联网媒体类型，在HHTP协议消息中，用来表示具体请求中的媒体信息类型

 
补充：

query string parameters：
请求参数，get请求的请求参数在url中，用&隔开；
post请求的请求参数写在报文体中query string parameters
request header中的Content-Type:post请求的请求格式，如果是get，没有请求格式

判断静态文件是否压缩

content-Encoding为gzip表示开启了压缩

查看静态文件的大小和响应时间

问题场景：网站响应慢，文件没有开启静态压缩场景

关注console中的报错

场景:如图表示websocket协议不支持或者未配置的报错

application查看网站cookie

怎么获取入参和出参

post请求参数是json字符串格式