掌握秘诀！轻松玩转浏览器F12开发者工具

最新推荐文章于 2025-04-28 20:46:09 发布

菜鸟教程*…*

最新推荐文章于 2025-04-28 20:46:09 发布

阅读量1.1k

点赞数 7

文章标签：开发语言

本文链接：https://blog.csdn.net/fanfangyu/article/details/145577132

版权

一、引言

在当今的数字化时代，浏览器已成为我们日常工作和生活中不可或缺的一部分。无论是浏览网页、在线学习、远程办公，还是进行网页开发与设计，浏览器都扮演着至关重要的角色。而在浏览器的众多功能中，F12开发者工具无疑是开发者们最为珍视的宝藏之一。它如同一把万能钥匙，解锁了网页背后的神秘面纱，让开发者们能够深入探索、调试和优化网页。

对于初学者而言，F12开发者工具可能显得既神秘又复杂。然而，一旦掌握了其使用秘诀，你将能够轻松玩转这个强大的工具，从而在工作中事半功倍。本文将带你走进F12开发者工具的精彩世界，从基本介绍到启动方法，再到常规设置和主要标签页的使用，最后深入探讨Elements（查看器）和Network（网络）这两个核心功能。通过本文的学习，你将能够更加高效地利用F12开发者工具，提升你的网页开发和调试能力。

二、F12开发者工具的基本介绍

1.什么是F12？

是浏览器自带的一个开发调试工具，因为可以用F12快捷键直接启动，所以简称为F12工具。

2.特点

简单轻量级，是浏览器内置的开发者工具来提供捕获浏览器的数据报文的功能；
F12 作为浏览器的一部分，是数据收发的一端，抓取到的HTTPs报文是可以得到明文数据的;--Fiddler Charles

三、如何启动F12

键盘按F12启动
鼠标右键选检查页面启动
菜单里更多工具里-->开发者工具
ctrl+shift+i快捷键启动

四、F12常规设置

1.显示的位置调整:靠右靠左靠下独立窗口

2.设置颜色和语言(chrome) 3.手机版本的切换，适合测试H5页面小程序测试，可以方便在电脑操作和调试;也可以选择尺寸和不同的手机型号

五、F12的主要标签页

Elements	Console	Source	Network	Performance	Memory
查看器	控制台	源代码/调试器	网络	性能	存储

1.火狐浏览器

2.谷歌浏览器

六、Elements/查看器

1.用途

可用于页面结构分析，也可用于自动化脚本的元素定位;或者页面元素分析(元素大小，元素布局等)。

前端页面-html页面，标签语言。

1、查看元素的代码:

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

2.查看元素的属性:

定位到元素的源代码之后，可以从源代码中读出该元素的属性。如class、src、width等属性的值。

3、修改元素的代码与属性:

点击元素，然后查看右键菜单，可以看到chrome提供的可对元素进行的操作:选择Edit as HTML选项时，元素进入编辑模式，可以对元素的代码进行任意的修改。

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

2.使用场景

UI自动化的元素定位

案例:找到页面的"请选择二级部门"输入框。

selenium工具--UI自动化测试工具- webdriver--八大元素定位方法--id name XPath

相对路径: //input[@placeholder="请选择二级部门"]==推荐标签+属性定位/层级文本轴定位

相应代码

from selenium import webdriver
from selenium.webdriver.common.by import By

import time
from selenium import webdriver
from selenium.webdriver.common.by import By
class TestWait:
    def setup(self):
        self.driver = webdriver.Chrome()
        self.driver.get('http://www.baidu.com/')
 
    def test_wait(self):
        self.driver.find_element(By.XPATH, '//input[@placeholder="请选择二级部门"]').send_keys("供应链技术部")
        time.sleep(1)

七、Network/网络

用途

这是测试用的最多一个模块，主要用于进行测试问题的分析和定位，这个部分记录了前后端的交互，是我们学习F12工具的重点内容。

前端和后端信息通过接口传输，Network记录了接口信息:(接口封装http协议--定义头部)

http请求消息:请求行(请求方法)、请求头、请求体--客户端发送

http响应消息:响应行(响应状态码)，响应头，响应体--服务器回应

抓到的报文分析:

状态: http的响应状态码:200 404 500 503 302 304(重定向)

方法: http请求方法-get post put patch

域名:服务器的域名或者IP+端口文件和类型:html、cssjs png

发起者:请求怎么发起的，比如script:页面是由script脚本处理的时候发送的;

传输和大小:传输的文件及大小

详细报文内容:消息头，cookies，请求，响应，耗时

请求抓取

保留日志/持续记录:开启后，重新加载url，或者跳转了页面之后，之前的请求显示资源信息依然会保留下来，不会清空;

停用缓存:开启后，页面资源不会存入缓存，可以在status栏的状态码看文件请求状态。

请求过滤

Content type: HTML, CSS, JS
XHR requests:XMLHttpRequests
WS:WebSocket 连接

报文过滤

url: 域名或者文件部分包含这个URL status-code:404 method:post
测试
domain:8.129.91.152:8765 remote-ip:124.237.176.160 mime-type:image/png
语法:https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/request_list/#filtering-by-properties

接口测试(数据篡改)

用途

1)右键后点击编辑并重发 2)可以修改捕获到的请求的数据(参数)--接口

3)发送接口请求 4)检查响应结果--接口服务器处理结果

火狐浏览器支持数据篡改功能

弱网测试

2G、3G、离线、4G、wifi等

用途

模拟用户网络不佳的场景(web应用手机模式)，保证软件可以正常处理并给出友好的反应和提示信息。

APP专项测试：模拟用户在使用手机地铁车库电梯等信号不好场景，出现网络情况--弱网情况

APP运行状态正常，提示友好信息;不会出现数据重复提交，APp crash ANR不应该出现。

录制按钮

录制脚本的用途(导入和导出):

测试的时候一些重复性的工作可以录制下来进行回放;也可以保存后导入进行repaly(重放)。

1、录制并进行replay

2、导出给开发进行replay复现bug

3、导入进行replay

4、还可以进入分析性能页面

注意:功能还是试用性功能，还在完善中，大家选择进行使用!

八、总结

通过本文的介绍，我们不难发现，F12开发者工具是网页开发和调试过程中不可或缺的强大助手。它不仅提供了丰富的功能和选项，还能够帮助开发者们深入了解网页的结构、样式、性能和网络请求等信息。从基本的启动和设置，到Elements（查看器）中对DOM和CSS的实时编辑，再到Network（网络）标签页中对网络请求的详细分析，F12开发者工具无疑为开发者们打开了一扇通往网页内部世界的大门。

掌握F12开发者工具的使用秘诀，不仅能够提升你的工作效率，还能够让你在网页开发和调试过程中更加游刃有余。无论是初学者还是经验丰富的开发者，都能够从F12开发者工具中受益匪浅。因此，我们鼓励每一位网页开发者都深入学习和掌握这个强大的工具，让它成为你工作中的得力助手。相信在不久的将来，你将能够利用F12开发者工具创造出更加精彩、高效的网页作品。