浏览器开发者工具的基本介绍
1、什么是F12?
是浏览器自带的一个开发调试工具,因为可以用F12快捷键直接启动,所以简称为F12工具
特点:
1、简单轻量级,是浏览器内置的开发者工具来提供捕获浏览器的数据报文的功能。
2、F12 作为浏览器的一部分,是数据收发的一端,抓取到的 HTTPs 报文是可以得到明文数据的:
2.如何启动F122
1)键盘按F12启动
2)鼠标右键选检查页面启动
3)菜单里更多工具里-->开发者工具
4) ctrl+shift+i 快捷键启动
3、F12常规设置
1)显示的位置调整:靠右 靠左 靠下 独立窗口
2) 设置颜色和语言 (chrome)
3)手机版本的切换,适合测试H5页面 小程序测试,可以方便在电脑操作和调试,也可以选择尺寸和不同的手机型号
4.F12的主要标签页
1.Elements 查看器
用途:
可用于页面结构分析,也可用于自动化脚本的元素定位;或者页面元素分析(元素大小,元素布局等)前端页面-html页面,标签语言。
1、查看元素的代码:
点击左上角的箭头图标(或按快捷键Ctrl+Shift+)进入选择元素模式,然后从页面中选择需要查看的元素,然后可以在开发者工具元素 (Elements) 一栏中定位到该元素源代码的具体位置。
2.查看元素的属性:
定位到元素的源代码之后,可以从源代码中读出该元素的属性。如class、src、 width等属性的值。
3、修改元素的代码与属性:
点击元素,然查看右键菜单,可以看到chrome提供的可对元素进行的操作: 选择Edit as HTML选项时,元素进入编辑模式,可以对元素的代码进行任意的修改。
当然,这个修改也仅对当前的页面渲染生效,不会修改服务器的源代码,所以这个功能也是作为调试页面效果而使用。
Xpath
2.Console 控制台
控制台用于调试网页源代码中的JavaScript。控制台窗口充当我们的调试窗口,允许我们处理没有按预期工作的JavaScript。
它允许对当前加载在浏览器中的页面运行代码块或单行JavaScript。
控制台报告浏览器在试图执行代码时遇到的错误。
-
控制台识别了正确的语法,并生成了与JavaScript代码对应的警报消息。
-
它还可以识别类型错误,并为错误的语法提供错误消息。
3.Sources 源代码
1.查看文件:在源代码(Source)页面可以查看到当前网页的所有源文件
2.添加断点:在源代码左边有行号,点击对应行的行号,就好给改行添加上一个断点(再次点击可删除断点)。右键点击断点,在弹出的菜单中选择Edit breakpoint可以给该断的添加中断条件。
中断调试:添加断点后,当JS代码运行到断点时会中断(对于添加了中断条件的断点在符合条件时中断),此时可以将光标放在变量上查看变量的
4.Network 网络
用途:这是测试用的最多一个模块,主要用于进行测试问题的分析和定位,这个部分记录了前后端的交互
1.前端和后端信息通过接口传输,网络记录了接口信息:
请求消息:请求行、请求头、请求体
响应消息:响应行,响应头,响应体
2.抓到的报文分析:
状态:网站的响应状态码
方法:请求方法
域名:服务器的域名或者IP+端口
文件和类型:
发起者:请求怎么发起的,比如脚本:页面是由脚本脚本处理的时候发送的;传输和代销:传输的文件及大小
3.详细报文内容:
消息头,cookie,请求,响应,耗时
5.Memory/存储(应用)
用途:主要存储一些cookie和前端数据等。
本地存储和会话存储主要是前端开发人员在前端设置,一旦数据保存在本地后,就可以避免再向服务器请求数据,因此减少不必要的数据请求,减少数据在浏览器和服务器间不必要地来回传递。 (提高浏览器访问的速度)
本地存储和会话存储的操作代码完全相同,它们的区别仅在于数据的寿命。
本地存储
保存不受时间限制,用于长期保存网站的数据,除非用户自己删除,否则不会消失,并且站内任何页面都可以访问该数据;主要用来保存访客将来还能看到的数据。
会话存储:
用于临时保存针对一个窗口(或标签页)的数据,保存受时间限制,当前窗口一旦关闭,内容就会被测览器删除。会话存储则用于保存那些需要从一个页面传递给下一个页面的数据
Cookies: 是下载到计算机上的小文件。比如访问过的链接,单击的按钮,登录信息或过去访问过的页面,当我们下次访问该网站时,该网站将使用该信息来跟踪我们先前在其网站上的活动。它还可以记住以前输入到表单字段中的信息,例如姓名,日期,出生详细信息,信用卡号等。