二、浏览器调试
1. 什么是浏览器调试？
“浏览器调试”又称为“开发者工具”，其主要功能包含：
- 查看当前网页的源码、DOM（文档对象模型）；
- 查看CSS属性；
- 调试javascript代码；
- 查看http请求与响应情况。
本文重点关注的是“查看http请求与响应情况”，调试模式的其它3个功能大家可以参考互联网上的相关资料。
2. 为什么要掌握浏览器调试？
其实，浏览器调试是“前端攻城狮”必备的技能，是否能熟练使用调试模式，决定了“IT攻城狮”资深的程度。这是要掌握浏览器调试的最重要的理由。
其次，当面对以下两种情况时，也需要使用浏览器调试来帮助你分析http交互的过程：
- 当质疑服务器端提供的数据有问题、而前端没问题时，需要举证；
- 当爬取一个别人家的网页数据、且你得不到技术支持时，需要分析。
3. 如何使用浏览器调试？
现在流行的大多数浏览器，如谷歌的chrome、微软的ie、火狐等都支持按F12键来打开调试模式。不同浏览器的调试功能都大同小异，在本文中使用chrome浏览器为例来讲解。
3.1 基于get请求方法的调试
打开chrome浏览器，按下F12键，调出“开发者工具”。然后，在浏览器地址栏中输入“baidu.com”，打开百度网站，看到如下的界面。
- 点击“Network”菜单，就可以看到http交互的概要信息，如：页面总下载时长、下载资源清单、每个资源的下载时长等。如果是首次看到这样的界面，你可能会惊讶于仅仅访问一个最简单的页面，实际上也进行了这么多次的http交互，因为一个网页中还包含对图片、css、js等其它文件的引用，这些都需要依次从服务器上下载。
- 点击“www.baidu.com”，可以进一步看到http请求及响应信息，如下图。
观看上图，结合前面章节“一、http协议”的知识，你一定会注意到两行熟悉的内容：
- Request Method: GET，表示“请求方式是get”；
- Status Code: 200 OK，表示“状态码是200，成功访问了指定网页”。
我们向下滚动，可以看到更多的http信息，如下分别是“请求头参数”、“响应头参数”，并用红色对熟悉的参数进行了标注。
通常情况下，我们在浏览器地址栏输入网址后访问网站、以及在网页上点击超链接访问另一个网页，浏览器都使用get请求方法与服务器交互，这个过程中http的常用头参数与上图的内容基本相似。
3.2 基于post请求方法的调试
当我们需要提交登录信息、注册用户信息等情况时，浏览器就用使用post请求方法与服务器交互。仍旧以百度网站为例，我们观察一下用户登录的过程与头部参数。
- 打开chrome浏览器，在地址栏输入“baidu.com”，回车打开网页；
- 点击页面右上角的“登录”链接，看到登录对话框；
- 点击“用户名登录”链接，从默认的“扫码登录”切换到“输入用户名、密码”登录的界面。
- 按下F12键，调出“开发者工具”，并点击“Network”切换到http交互界面；
- 输入用户名、密码（无所谓是否输入真实帐号），输入完成后，先不要点击“登录”按钮；
- 在你输入用户名、秘密的同时，就可以观察到资源列表有变动，这是因为百度页面在对你的输入进行事前验证，但并不是所有网页都这样做的；
- 为了避免资源列表过多，干扰我们的观察、分析，建议点击“chear”工具清除已有的资源列表，然后再点击页面上的“登录”按钮。
- 点击资源列表中的“login”，可以看到该请求的详细信息；
- 我们注意到，Request Method是post。
注意：并不是所有的登录界面，都查看“login”资源。我之所以知道百度的登录交互要查看该资源，只是因为我分析了上图中所有的资源，并选择出来的。
- 继续往下滚动，除了在前文已经熟悉的“Request Headers”、“Response Headers”块之外，还可以看到新的“Form Data”块，里面列出了点击“登录”按钮后，提交给服务器的所有数据；
- 这里可以看到当时提交的用户名、密码。处于安全考虑，百度对明文密码进行了加密，这是值得学习的。
4. 浏览器调试小结
利用浏览器调试（开发者工具），我们可以分析浏览器与服务器的交互过程，找出关键交互（如登录、展示数据），进而得到交互参数。收集到这些信息后，我们就可以编写爬虫程序或者构建压力测试环境了。
当然，对浏览器交互过程的分析需要丰富的经验，但你已经踏出了第一步，不是吗？这里有几点小提示：
- 怎么模拟登录？实际上服务器端在登录成功后，会返回cookie给浏览器，截获该cookie是关键。所谓的模拟登录，就是在后续发送请求给服务器时，同是把cookie发送过去。
- 上例中，百度对密码加密了，那怎么破？实际上你不需要知道百度的加密算法，直接截取并利用它加密后的数据，发送给服务器端即可。
- 编写爬虫程序或者构建压力测试环境，重点需要关注url、端口、请求方法、cookie、form data等参数。
想更全面、更深入地学习浏览器调试（开发者工具），请参考权威的资源，比如：Google的Chrome 开发者工具。
网友评论