浏览器开发者工具（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代码，这里就不多做展开。