python爬虫入门之http协议和 Chrome 浏览器抓包工具

在浏览器中发送一个http请求的过程:

1.当用户在浏览器的地址栏中输入一个URL并按回车键之后，浏览器会向HTTP服务器发送HTTP请求。HTTP请求主要分为“Get"和“Post"两种方法。
⒉当我们在浏览器输入URLhttps://www.baidu.com/的时候，浏览器发送一个Request请求去获取https://www.baidu.com/的html文件，服务器把Response文件对象发送回给浏览器。
3.浏览器分析Response中的HTML，发现其中引用了很多其他文件，比如加mages文件，cSS文件，JS文件。浏览器会自动再次发送Request去获取图片，CSS文件，或者JS文件。
4.当所有的文件都下载成功后，网页会根据HTML语法结构，完整的显示出来了。

理解网页请求过程

从浏览器输入网址、回车后，到用户看到网页内容，经过的步骤如下：

（1）dns解析，获取ip地址；

（2）建立TCP连接，3次握手；

（3）发送HTTP请求报文；

（4）服务器接收请求并作处理；

（5）服务器发送HTTP响应报文；

（6）断开TCP连接，4次握手。

这里需要大家回忆起计算机网络中学到的相关知识，主要是http请求的相关内容，重点了解下TCP三次握手的一个流程，阅读网页http请求的整个过程，理解下网页的请求过程。

URL详解

Uniform Resource Locator的简写，统一资源定位符。一个URL由以下几部分组成：

scheme://host:port/path/?query-string=xxx#anchor

scheme：代表的是访问的协议，一般为'http'或者'https'以及'ftp'等。

host：主机名，域名，比如`www.baidu.com`。

port：端口号。当你访问一个网站的时候，浏览器默认使用80端口。

path：查找路径。比如：'www.jianshu.com/trending/now'，后面的`trending/now`就是`path`。

query-string：查询字符串，比如：`https://www.baidu.com/s?wd=python`，后面的`wd=python`就是查询字符串。's'是查找路径path

anchor：锚点，后台一般不用管，前端用来做页面定位的。https://baike.baidu.com/item/Python/407313#1

在浏览器中请求一个‘url’，浏览器会对这个url进行一个编码。除英文字母，数字和部分符号外，其他的全部使用百分号+十六进制码值进行编码。

常用的请求方法：

在Http协议中，定义了八种请求方法。这里介绍两种常用的请求方法，分别是get请求和post请求。

get请求：一般情况下，只从服务器获取数据下来，并不会对服务器资源产生任何影响的时候会使用get请求。

post请求：向服务器发送数据（登录）、上传文件等，会对服务器资源产生影响的时候会使用post请求。以上是在网站开发中常用的两种方法。并且一般情况下都会遵循使用的原则。但是有的网站和服务器为了做反爬虫机制，也经常会不按常理出牌，有可能一个应该使用get方法的请求就一定要改成post请求，这个要视情况而定。

head请求：类似于get请求，只不过返回的响应中没有具体的内容，用于获取报头。

put请求：从客户端向服务器传送的数据取代指定的文档的内容。

delete请求：请求服务器删除指定的页面。

connect请求：http/1.1协议中预留给能够将连接改为管道方式的代理服务器。

options请求：允许客户端查看服务器的性能。

trace请求：回显服务器收到的请求，主要用于测试或者判断。

查看网页请求

以chrome浏览器为例，在网页上点击鼠标右键，检查（或者直接F12），选择network，刷新页面，选择ALL下面的第一个链接，这样就可以看到网页的各种请求信息。

请求头常见参数：

在http协议中，向服务器发送一个请求，数据分为三部分，第一个是把数据放在url中，第二个是把数据放在body中（在post请求中），第三个就是把数据放在head中。这里介绍在网络爬虫中经常会用到的一些请求头参数：

Accept: text/html,image/*(浏览器可以接收的类型)

Accept-Charset: ISO-8859-1(浏览器可以接收的编码类型)

Accept-Encoding: gzip,compress(浏览器可以接收压缩编码类型)

Accept-Language: en-us,zh-cn(浏览器可以接收的语言和国家类型)

Host: www.it315.org:80(浏览器请求的主机和端口)

If-Modified-Since: Tue, 11 Jul 2000 18:23:51 GMT(某个页面缓存时间)

Referer: http://www.it315.org/index.jsp(请求来自于哪个页面)表明当前这个请求是从哪个url过来的。这个一般也可以用来做反爬虫技术。如果不是从指定页面过来的，那么就不做相关的响应。

User-Agent: Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0)(浏览器相关信息)浏览器名称。这个在网络爬虫中经常会被使用到。请求一个网页的时候，服务器通过这个参数就可以知道这个请求是由哪种浏览器发送的。如果我们是通过爬虫发送请求，那么我们的User-Agent就是Python，这对于那些有反爬虫机制的网站来说，可以轻易的判断你这个请求是爬虫。因此我们要经常设置这个值为一些浏览器的值，来伪装我们的爬虫。

Cookie：(浏览器暂存服务器发送的信息)http协议是无状态的。也就是同一个人发送了两次请求，服务器没有能力知道这两个请求是否来自同一个人。因此这时候就用cookie来做标识。一般如果想要做登录后才能访问的网站，那么就需要发送cookie信息了。

Connection: close(1.0)/Keep-Alive(1.1)(HTTP请求的版本的特点)

Date: Tue, 11 Jul 2000 18:23:51 GMT(请求网站的时间)

响应头（Response Headers）信息详解：

Location: http://www.it315.org/index.jsp(控制浏览器显示哪个页面)

Server:apache tomcat(服务器的类型)

Content-Encoding: gzip(服务器发送的压缩编码方式)

Content-Length: 80(服务器发送显示的字节码长度)

Content-Language: zh-cn(服务器发送内容的语言和国家名)

Content-Type: image/jpeg; charset=UTF-8(服务器发送内容的类型和编码类型)

Last-Modified: Tue, 11 Jul 2000 18:23:51 GMT(服务器最后一次修改的时间)

Refresh: 1;url=http://www.it315.org(控制浏览器1秒钟后转发URL所指向的页面)

Content-Disposition: attachment; filename=aaa.jpg(服务器控制浏览器发下载方式打开文件)

Transfer-Encoding: chunked(服务器分块传递数据到客户端）

Set-Cookie:SS=Q0=5Lb_nQ; path=/search(服务器发送Cookie相关的信息)

Expires: -1(服务器控制浏览器不要缓存网页，默认是缓存)

Cache-Control: no-cache(服务器控制浏览器不要缓存网页)

Pragma: no-cache(服务器控制浏览器不要缓存网页)

Connection: close/Keep-Alive(HTTP请求的版本的特点)

Date: Tue, 11 Jul 2000 18:23:51 GMT(响应网站的时间)

通用的网络爬虫框架

1.挑选种子URL；

2.将这些URL放入待抓取的URL队列；

3.取出待抓取的URL，下载并存储进已下载网页库中。此外，将这些URL放入待抓取URL队列，从而进入下一循环；

4.分析已抓取队列中的URL，并且将URL放入待抓取URL队列，从而进入下一循环。

常见响应状态码：

200：请求正常，服务器正常的返回数据。

301：永久重定向。比如在访问www.jingdong.com的时候会重定向到www.jd.com。

302：临时重定向。比如在访问一个需要登录的页面的时候，而此时没有登录，那么就会重定向到登录页面。

400：请求的url在服务器上找不到。换句话说就是请求url错误。

403：服务器拒绝访问，权限不够。

500：服务器内部错误。可能是服务器出现bug了。

开发者工具的功能结构

Elements（元素面板）：使用“元素”面板可以通过自由操纵DOM和CSS来重演您网站的布局和设计。
Console（控制台面板）：在开发期间，可以使用控制台面板记录诊断信息，或者使用它作为 shell，在页面上与JavaScript交互
Sources（源代码面板）：在源代码面板中设置断点来调试 JavaScript ，或者通过Workspaces（工作区）连接本地文件来使用开发者工具的实时编辑器
Network（网络面板）：从发起网页页面请求Request后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），并可以根据这个进行网络性能优化
Performance（性能面板）：使用时间轴面板，可以通过记录和查看网站生命周期内发生的各种事件来提高页面运行时的性能
Memory（内存面板）：分析web应用或者页面的执行时间以及内存使用情况
Application（应用面板）：记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、-IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等
Security（安全面板）：使用安全面板调试混合内容问题，证书问题等等
Audits（审核面板）：对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等

Network（网络）面板：

Network 面板记录页面上每个网络操作的相关信息，包括详细的耗时数据、HTTP 请求与响应标头和 Cookie

Network面板由五个窗格组成：

Controls：使用这些选项可以控制 Network 面板的外观和功能
Filters：使用这些选项可以控制在 Requests Table 中显示哪些资源。提示：按住 Cmd (Mac) 或 Ctrl (Windows/Linux) 并点击过滤器可以同时选择多个过滤器
Overview：此图表显示了资源检索时间的时间线。如果您看到多条竖线堆叠在一起，则说明这些资源被同时检索
Requests Table：此表格列出了检索的每一个资源。默认情况下，此表格按时间顺序排序，最早的资源在顶部。点击资源的名称可以显示更多信息。提示：右键点击 Timeline 以外的任何一个表格标题可以添加或移除信息列
Summary：此窗格可以一目了然地告诉您请求总数、传输的数据量和加载时间

Controls（控件）
使用这些选项可以控制 Network(网络)面板的外观和功能。

Filters（过滤器）
使用这些选项可以控制在请求列表中显示哪些资源。
提示：按住Cmd（Mac）或Ctrl（Window / Linux），然后点击过滤器可以同时选择多个过滤器。
此外，筛选框可以实现很多定制化的筛选，比如字符串匹配，关键词筛选等，其中关键词筛选主要有如下几种：
- domain：仅显示来自指定域的资源。您可以使用通配符（）来包括多个域。例如，.com显示以.com结尾的所有域名中的资源。 DevTools会在自动完成下拉菜单中自动填充它遇到的所有域。
- has-response-header：显示包含指定HTTP响应头信息的资源。 DevTools会在自动完成下拉菜单中自动填充它遇到的所有响应头。
- is：通过is:running找出WebSocket请求。
- larger-than(大于) ：显示大于指定大小的资源（以字节为单位）。设置值1000等效于设置值1k。
- method(方法) ：显示通过指定的HTTP方法类型检索的资源。DevTools使用它遇到的所有HTTP方法填充下拉列表。
- mime-type（mime类型：显示指定MIME类型的资源。 DevTools使用它遇到的所有MIME类型填充下拉列表。
- mixed-content（混合内容：显示所有混合内容资源（mixed-content:all）或仅显示当前显示的内容（mixed-content:displayed）。
- Scheme（协议）：显示通过不受保护的HTTP（scheme:http）或受保护的HTTPS（scheme:https）检索的资源。
- set-cookie-domain（cookie域）：显示具有Set-Cookie头,并且其Domain属性与指定值匹配的资源。DevTools会在自动完成下拉菜单中自动填充它遇到的所有Cookie域。
- set-cookie-name（cookie名）：显示具有Set-Cookie头,并且名称与指定值匹配的资源。DevTools会在自动完成下拉菜单中自动填充它遇到的所有Cookie名。
- set-cookie-value（cookie值）：显示具有Set-Cookie头,并且值与指定值匹配的资源。DevTools会在自动完成下拉菜单中自动填充它遇到的所有cookie值。
- status-code（状态码）：仅显示其HTTP状态代码与指定代码匹配的资源。DevTools会在自动完成下拉菜单中自动填充它遇到的所有状态码。

Sources面板：

在源代码面板中设置断点来调试 JavaScript ，或者通过Workspaces（工作区）连接本地文件来使用开发者工具的实时编辑器。

在Sources面板中，连js都可以直接修改。主要是在设置断点(breakpoint)进行单步调试时用的;

ctr+shift+i或者F12打开开发者工具；
打开sources面板;直接给某行js代码设置断点。

刷新页面后，程序就会停在断点设置的那一行上。

Console（控制台）面板：

在开发期间，可以使用控制台面板记录诊断信息，或者使用它作为 shell在页面上与JavaScript交互。下面就是一些方法：
1.console.log

释义：向控制台输出普通信息

如果参数只是字符串：

console.log(“在控制台会输出普通信息”);

如果有两个参数,第一个参数是加了%c(注意小写)的字符串,那么在控制台输出时就会按照第二个参数给出的样式输出(下面的info,error,warn都可以使用%c格式输出文字)

console.log(“%c这里会输出红色,20字号的文字”,”font-size:20px;color:red”);

2.console.info

释义：向控制台输出提示信息

console.info(“这是一条提示信息”);

3.console.error

释义：向控制台输出错误信息

console.error(“这是一条错误信息”);

4.console.warn

释义：向控制台输出警示信息

console.warn(“这是一条警息”);

5.console.group,console.groupEnd

console.group：开始一组输出信息,可以嵌套,形成子信息,要结束当前组的信息输出,要调用console.groupEnd
console.groupEnd：结束一组输出信息

console.log(“%ckitchen api”,”font-size:18px;color:red”);
console.group(“vueComp方法”);
console.log(“该方法是生成一个可装配的组件”);
console.group(“参数(Object)”);
console.log(“path:载入组件的路径”);
console.log(“cache:是否开启缓存”)
console.groupEnd();
console.groupEnd();

6.console.table

释义：以表格形式将数据输出

var data = [
{“name”:”尼古拉斯.赵四”,”age”:32},
{“name”:”岳云鹏”,”age”:”32”}
];
console.table(data);

7.console.assert

释义：断言

var isDebug = false;
console.assert(isDebug,”如果前一个参数是false,控制台将输出这段话”)

如果第一个参数不是布尔型,会自动转成布尔型(0,false,"",null,undefined,NaN转为false,其他均为true),不过建议直接写false或者true

8.console.count

释义：统计某个代码片段执行了多少次

function runCount () {
//…代码逻辑
console.count(“runCount执行次数:”)}
runCount();
runCount();
runCount();
runCount();

9.console.dir

释义：将传入对象的属性,包括子对象的属性,以列表形式输出:

var obj = { name : “li4065”, sex : “man”, age : 29}
console.dir(obj);
console.dir(document.body); //以列表形式,把body的相关属性展示出
PS.另外还有个console.dirxml方法,是会把相关节点中的包含的html/xml输出,感觉没啥用。不如直接在控制台输入某个节点,会直接把该节点html/xml输出。

10.console.time,console.timeEnd

console.time：生成一个记时器,并开始记时
console.timeEnd：结束某个指定标示的记时两者配套使用,会把指定计时器运行时间计算出来

console.time(“run”); //生成一个名为run的定时器
for(var i=0;i<1000;i++) { console.log(“ces”)};
console.timeEnd(“run”); //结束名为run的定时器在chrome浏览器下
会输出:run: 96.274ms

11.console.profile,console.profileEnd

console.profile：标记一个性能记录点,并开始进行性能记录
console.profileEnd：结束某个性能记录可以在浏览器的profile的标签看到相关性能记录情况(记录名,就是profile中的名称)

function sayHi() { for(var i=0;i<1000;i++){ console.log(“hi”) }}
console.profile(“记录sayHi的性能”);
sayHi();
console.profileEnd(“记录sayHi的性能”);
记录性能除了可以用这种手写方式,也可以通过在profile标签下,进行操作来记录

12.console.trace

释义：追逐函数的调用过程(堆栈跟踪相关的调试)

function testTrace () {
var a = 12;
submit(a);
}
function submit (a) {
var b = 23;
add(a,b);
}
function add (a,b) {
console.log(a + b);
console.trace(“追踪add相关的调用函数”); //如果这里不传值,控制台会把console.trace()当作记录的堆栈名}

13.在chrome控制台下,除了以上的相关方法,还有如下两个比较好用的方法：keys,values

keys：返回传入对象所有属性名组成的数据.
values：返回所有属性值组成的数组.

var info={name:’li4065’,sex:’man’,age:’29’};
keys(info); //把info存起来
values(info); //获取info的相关数据

14.monitor,unmonitor

monitor：接收某个函数作为参数,该函数只要一执行,控制台就会输出相关信息
unmonitor：移除对某个函数的监听

function sayHi () {
console.log(“Hi”);
}
monitor(sayHi);
sayHi();
unmonitor(sayHi);
sayHi();

参考链接：https://blog.csdn.net/kissazhu/article/details/80865819

Chrome 浏览器控件讲的非常细致，上面是控制台截取了部分写的很好