前言
浏览器是对服务器返回的数据进行解析与渲染，通过浏览器的开发者工具可以对源码进行分析，有一句老话叫可见即可爬，博主以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代码，这里就不多做展开。