浏览器开发者工具（超全，所有浏览器都通用）

大家好，欢迎来到IT知识分享网。

浏览器开发者工具的基本介绍

1、什么是F12?

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

特点:

2.如何启动F122

3、F12常规设置

4.F12的主要标签页

1.Elements  查看器

用途:

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

1、查看元素的代码:

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

2.查看元素的属性:

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

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

Xpath

2.Console  控制台

控制台用于调试网页源代码中的JavaScript。控制台窗口充当我们的调试窗口，允许我们处理没有按预期工作的JavaScript。

它允许对当前加载在浏览器中的页面运行代码块或单行JavaScript。

控制台报告浏览器在试图执行代码时遇到的错误。

• 控制台识别了正确的语法，并生成了与JavaScript代码对应的警报消息。

• 它还可以识别类型错误，并为错误的语法提供错误消息。

3.Sources   源代码

1.查看文件：在源代码（Source）页面可以查看到当前网页的所有源文件

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

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

4.Network    网络

用途:这是测试用的最多一个模块，主要用于进行测试问题的分析和定位，这个部分记录了前后端的交互

1.前端和后端信息通过接口传输，网络记录了接口信息:

2.抓到的报文分析:

3.详细报文内容:

消息头，cookie，请求，响应，耗时

5.Memory/存储(应用)

用途:主要存储一些cookie和前端数据等。

本地存储和会话存储主要是前端开发人员在前端设置，一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递。                (提高浏览器访问的速度)
本地存储和会话存储的操作代码完全相同，它们的区别仅在于数据的寿命。

本地存储

保存不受时间限制，用于长期保存网站的数据，除非用户自己删除，否则不会消失，并且站内任何页面都可以访问该数据;主要用来保存访客将来还能看到的数据。

会话存储:

Cookies: 是下载到计算机上的小文件。比如访问过的链接，单击的按钮，登录信息或过去访问过的页面，当我们下次访问该网站时，该网站将使用该信息来跟踪我们先前在其网站上的活动。它还可以记住以前输入到表单字段中的信息，例如姓名，日期，出生详细信息，信用卡号等。