小编在工作中，经常要用到浏览器F12开发者工具，可以说是对它又熟悉又陌生。今天就索性抽时间把摸排一遍，做个笔记。分享给大家，希望大家可以多多支持一下呀。小编这里所用的微软的浏览器。

浏览器F12开发者工具的微软官方文档：

https://learn.microsoft/zh-cn/microsoft-edge/devtools-guide-chromiu

高级用法--性能篇：浏览器F12开发者工具高效使用教程-CSDN博客

一、如何调出开发者工具

在浏览器页面上

• F12 键 (笔记本电脑 Fn + F12)
• 鼠标右键选择 检查(N)
• 快捷键 Ctrl + Shift + i

二、开发者工具初步介绍

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

元素（ELements）、控制台（Console）、源代码（Sources），网络（Network）。

1、元素（Elements）

❝ 查看网页页面的所有元素，修改元素的代码与属性。用于查看修改元素的属性、CSS 属性、监听事件以及断点等等。
❞

查看元素的代码

点击左上角的箭头图标（或按快捷键 Ctrl+Shift+C）进入选择元素模式，从页面中选择需要查看的元素，可以在开发者工具元素（Elements）一栏中定位到该元素源代码的具体位置。

查看元素的属性：定位到元素的源代码之后，可以从源代码中读出改元素的属性。

修改元素的代码与属性

点击元素，然查看右键菜单，可以看到 chrome 提供的可对元素进行的操作：包括编辑元素代码（Edit as HTML）、修改属性（Add attribute、Edit attribute）等。选择 Edit as HTML 选项时，元素进入编辑模式，可以对元素的代码进行任意的修改。

「注意：」

这个修改也仅对当前的页面渲染生效，不会修改服务器的源代码，故而这个功能也是作为调试页面效果而使用。

给元素添加断点

在元素的右键菜单中选择断点选项（Break on…），选中之后，当元素被修改（通常是被 JS 代码修改）时，页面加载会暂停，然后可以查看该元素的属性。元素断点添加之后，可以在右侧栏的 DOM Breakpoints 页面中看到，这个页面可以看到当前网页的所有元素断点。

查看元素的监听事件

元素的右边栏的 Event Listener 页面，可以查看到该元素的所有监听事件。在开发中，尤其是维护其他人的代码时，会出现不了解元素对应的监听事件，这个时候，可以在这个页面中找到。这个页面不仅能看到对应的事件函数，还可以定位该函数所在的 JS 文件以及在该文件中的具体位置（行数）。

2、Console（控制台）

查看 JS 对象的及其属性

执行 JS 语句

查看控制台日志

当网页的 JS 代码中使用了 console.log()函数时，该函数输出的日志信息会在控制台中显示。日志信息一般在开发调试时启用，而当正式上线后，一般会将该函数去掉

在测试界面时，如果出现 Bug 问题，一般情况下会在这栏展示，查看调试日志信息或者异常错误信息，然后前端开发工程师根据具体问题来调试，进行解决问题。

3、Sources（源代码）

查看源文件

在源代码（Source）页面可以查看到当前网页的所有源文件 包括：样式、css、图片、js 文件等。在左侧栏中可以看到源文件以树结构进行展示。

添加断点

在源代码左边有行号，点击对应行的行号，就好给改行添加上一个断点（再次点击可删除断点）。右键点击断点，在弹出的菜单中选择 Edit breakpoint 可以给该断的添加中断条件。

中断调试

添加断点后，当 JS 代码运行到断点时会中断（对于添加了中断条件的断点在符合条件时中断），此时可以将光标放在变量上查看变量的

也可以在右边的侧栏上查看：

在右侧变量上方，有继续运行、单步跳过等按钮，可以在当前断点后，逐行运行代码，或者直接让其继续运行。

4、Network（网络）

三、F12 的妙用

1、复制不可复制的文字

有些文章设置了不可复制，那么如果想复制文字时，

按下 F12，或者右击鼠标选择【审查元素】，点一下下边弹出框左上角鼠标，然后去点击页面你想要的文字，下面框代码中亮的部分，看不到文字就点击箭头展开，看到文字，双击或者右键 copy

2、下载不能保存的图片

例子（比如说某库网需要 vip 才能下载的图片）

首先我们打开不能直接下载图片的网站，然后使用快捷键 F12，或者右击鼠标选择【审查元素】-> 看到对应的 img 选择 src 右键点击 open in new web

或者选择【 network】，再选择【 Img】,刷新页面就看得到下面有图片资源了，大部分网页是这样结构，有些图片会在【 sources】那里打开左侧栏（请求回来的图片资源），总之能找到图片的资源所在位置就可以了。

3、截取整个网页

使用浏览器自带的截屏功能截取超过一个屏幕的网页

F12 或 Ctrl+ Shift+ I 打开开发者工具，在任意 tab 上按 Ctrl+ Shift+ P，在弹出的输入框里输入 Capture full size screenshot（其实不需要输入完整，可以自动补全），然后按回车即可

4、编辑页面上的任何文本

在控制台输入document.body.contentEditable="true"或者document.designMode = 'on'就可以实现对网页的编辑了。

四、使用开发者工具定位问题

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

1、查看网站请求的基本信息

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

2、查看接口信息

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

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

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

3、认识请求头和响应头

• 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表示开启了压缩

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

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

4、关注console中的报错

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

5、application查看网站cookie

6、怎么获取入参和出参

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

小编在工作中，经常要用到浏览器F12开发者工具，可以说是对它又熟悉又陌生。今天就索性抽时间把摸排一遍，做个笔记。分享给大家，希望大家可以多多支持一下呀。小编这里所用的微软的浏览器。

浏览器F12开发者工具的微软官方文档：

https://learn.microsoft/zh-cn/microsoft-edge/devtools-guide-chromiu

高级用法--性能篇：浏览器F12开发者工具高效使用教程-CSDN博客

一、如何调出开发者工具

在浏览器页面上

• F12 键 (笔记本电脑 Fn + F12)
• 鼠标右键选择 检查(N)
• 快捷键 Ctrl + Shift + i

二、开发者工具初步介绍

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

元素（ELements）、控制台（Console）、源代码（Sources），网络（Network）。

1、元素（Elements）

❝ 查看网页页面的所有元素，修改元素的代码与属性。用于查看修改元素的属性、CSS 属性、监听事件以及断点等等。
❞

查看元素的代码

点击左上角的箭头图标（或按快捷键 Ctrl+Shift+C）进入选择元素模式，从页面中选择需要查看的元素，可以在开发者工具元素（Elements）一栏中定位到该元素源代码的具体位置。

查看元素的属性：定位到元素的源代码之后，可以从源代码中读出改元素的属性。

修改元素的代码与属性

点击元素，然查看右键菜单，可以看到 chrome 提供的可对元素进行的操作：包括编辑元素代码（Edit as HTML）、修改属性（Add attribute、Edit attribute）等。选择 Edit as HTML 选项时，元素进入编辑模式，可以对元素的代码进行任意的修改。

「注意：」

这个修改也仅对当前的页面渲染生效，不会修改服务器的源代码，故而这个功能也是作为调试页面效果而使用。

给元素添加断点

在元素的右键菜单中选择断点选项（Break on…），选中之后，当元素被修改（通常是被 JS 代码修改）时，页面加载会暂停，然后可以查看该元素的属性。元素断点添加之后，可以在右侧栏的 DOM Breakpoints 页面中看到，这个页面可以看到当前网页的所有元素断点。

查看元素的监听事件

元素的右边栏的 Event Listener 页面，可以查看到该元素的所有监听事件。在开发中，尤其是维护其他人的代码时，会出现不了解元素对应的监听事件，这个时候，可以在这个页面中找到。这个页面不仅能看到对应的事件函数，还可以定位该函数所在的 JS 文件以及在该文件中的具体位置（行数）。

2、Console（控制台）

查看 JS 对象的及其属性

执行 JS 语句

查看控制台日志

当网页的 JS 代码中使用了 console.log()函数时，该函数输出的日志信息会在控制台中显示。日志信息一般在开发调试时启用，而当正式上线后，一般会将该函数去掉

在测试界面时，如果出现 Bug 问题，一般情况下会在这栏展示，查看调试日志信息或者异常错误信息，然后前端开发工程师根据具体问题来调试，进行解决问题。

3、Sources（源代码）

查看源文件

在源代码（Source）页面可以查看到当前网页的所有源文件 包括：样式、css、图片、js 文件等。在左侧栏中可以看到源文件以树结构进行展示。

添加断点

在源代码左边有行号，点击对应行的行号，就好给改行添加上一个断点（再次点击可删除断点）。右键点击断点，在弹出的菜单中选择 Edit breakpoint 可以给该断的添加中断条件。

中断调试

添加断点后，当 JS 代码运行到断点时会中断（对于添加了中断条件的断点在符合条件时中断），此时可以将光标放在变量上查看变量的

也可以在右边的侧栏上查看：

在右侧变量上方，有继续运行、单步跳过等按钮，可以在当前断点后，逐行运行代码，或者直接让其继续运行。

4、Network（网络）

三、F12 的妙用

1、复制不可复制的文字

有些文章设置了不可复制，那么如果想复制文字时，

按下 F12，或者右击鼠标选择【审查元素】，点一下下边弹出框左上角鼠标，然后去点击页面你想要的文字，下面框代码中亮的部分，看不到文字就点击箭头展开，看到文字，双击或者右键 copy

2、下载不能保存的图片

例子（比如说某库网需要 vip 才能下载的图片）

首先我们打开不能直接下载图片的网站，然后使用快捷键 F12，或者右击鼠标选择【审查元素】-> 看到对应的 img 选择 src 右键点击 open in new web

或者选择【 network】，再选择【 Img】,刷新页面就看得到下面有图片资源了，大部分网页是这样结构，有些图片会在【 sources】那里打开左侧栏（请求回来的图片资源），总之能找到图片的资源所在位置就可以了。

3、截取整个网页

使用浏览器自带的截屏功能截取超过一个屏幕的网页

F12 或 Ctrl+ Shift+ I 打开开发者工具，在任意 tab 上按 Ctrl+ Shift+ P，在弹出的输入框里输入 Capture full size screenshot（其实不需要输入完整，可以自动补全），然后按回车即可

4、编辑页面上的任何文本

在控制台输入document.body.contentEditable="true"或者document.designMode = 'on'就可以实现对网页的编辑了。

四、使用开发者工具定位问题

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

1、查看网站请求的基本信息

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

2、查看接口信息

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

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

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

3、认识请求头和响应头

• 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表示开启了压缩

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

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

4、关注console中的报错

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

5、application查看网站cookie

6、怎么获取入参和出参

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