浏览器开发者工具(F12)
前言
浏览器是对服务器返回的数据进行解析与渲染,通过浏览器的开发者工具可以对源码进行分析,有一句老话叫可见即可爬,博主以Chrome为列,把学习的过程记录下来,如果有问题,欢迎留言纠正
开发者工具栏简介
浏览器打开百度的地址,通过F12调出开发者工具,这里简介下工具栏
- 元素(Elements):用于查看或修改HTML元素的属性、CSS属性、监听事件、断点
- 控制台(Console):控制台一般用于执行一次性代码,查看JavaScript对象、查看调试日志与异常的信息
- 源代码(Sources):该面板用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码,此外最重要的是可以调试JavaScript源代码,可以给JS代码添加断点等
- 网络(Network):网络页面主要用于查看header等于网络连接相关的信息(HTTP HTTPS)
- 性能检测(Performance):用于记录与分析页面在运行时的所有活动,从而进行页面性能检测
- 内存(Memory):用于查看页面内存的占用情况(记录内存列表)
- 应用(Application):主要是记录页面加载是的所有资源信息(缓存、Cookies、脚本、样式表)
- 安全(Security):该面板用于调试HTTPS中的认证相关的安全问题
- 审查(Audits):查看当前页面网络利用情况、网页性能方面的诊断,并给出一些优化建议
常用工具详解
元素(Elements)
通过选中箭头进入元素选择模式,可以在页面中去选择需要查看的元素,在Elements面板下面定位该元素源代码的具体位置与相关属性
-
如下图,选中百度输入框后定位的部分源码
-
定位的源码可进行双击后修改,确认后当前页面渲染会生效(仅本地,服务器不会被更改),如图
控制台(Console)
Console用于JavaScript调试,Console对象常用的两个用途
- 显示代码运行时的错误信息
- 提供了一个命令接口,用来与网页代码互动
Console常用的对象方法
方法 | 描述 | 实例 |
---|---|---|
clear() | 清除控制台的输出信息 | console.clear() |
error() | 错误信息,同时显示错误发生的堆栈 | console.error(‘错误’) |
log() | 输出日志信息 | console.log(array) |
time() | 计时开始 | console.time(‘计时1’) |
timeEnd() | 计时结束 | console.timeEnd(‘计时2’) |
warn | 输出警告信息 | console.warn(“警告”) |
源代码(Source)
Sources面板里面调试JS代码
- 设置断点进行裆部调试
- 增加调试代码进行信息的打印与跟踪
网络(Network)
查看当前网页的一些网络请求包,进行分析HTTPS请求后的一些资源信息,主要包含五个模块
- Header:资源的请求Url、Http方法(POST/GET)、请求以及响应等
- Preview:可进行资源的预览
- Response:响应信息面板
- Timing:请求资源的花费的时间
-
Cookies:请求资源过程中的身份信息
左侧为网络请求后返回的列表,点击可查看具体返回的数据,一般调试时经常会用到
HTTP请求头
- Resquest URL:请求的路径,也就是百度的域名
- Request Method:GET请求,从服务器获取数据
-
Status Code:请求应答状态码,200 OK成功返回
常见的错误码有 404页面不存在 503服务器超时
- Remote Address:服务器的IP地址,百度有很多备用的公网IP,所以请求测试时地址偶尔会变动
在Response栏中就是百度服务器返回的html代码,通过浏览器渲染展现的就是一张静态页面,这在Preview栏可查看,在Timing栏中其实就是请求加载的时间
由于百度首页会有自定义的导航栏、图标还有用户的信息,所以还会加载css js代码,这里就不多做展开。