简述F12开发者工具

目录

?1、Elements（元素）

2、Console（控制台）?

?3、Source（源代码）

?4、Network（网络）

?1、Elements（元素）

• 查找网页源代码HTML中的任一元素，方便元素定位
• 手动修改任一元素和属性的样式，能在浏览器看到实时的反馈
• 给元素添加断点：添加后，当页面被修改时，页面加载会暂停
• 查看元素对应的监听事件，包括事件函数及其在js文件中的位置

?

2、Console（控制台）?

• 记录开发者开发过程中的日志信息
• 作为与JS进行交互的命令行Shell，支持执行一次性代码，查看JS对象、调试日志或异常信息

?3、Source（源代码）

• ?查看页面的HTML文件源代码、JS源代码、CSS源代码
• 断点调试JS：添加断点后，当JS代码运行到断点时会中断（对于添加了终端条件的断点在符合条件时中断）

? ? ? ? 我们可以通过这个方法复制网页上一些不能复制的文字或者下载一些网页上的图片

?4、Network（网络）

• 从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等）可以根据这个进行网络性能优化
• 用于模拟弱网测试，注意测试完要改回正常网速

?