谷歌浏览器开发者工具network_Python 爬虫基础 (四)开发者工具01

前言

在之前的文章中我们系统地阐述了基于浏览器的网络资源请求方式，了解了资源传递的大致过程。今天就让我们借助浏览器的开发者工具更加详细地了解这一过程，以便在日后利用爬虫进行数据采集时能够精准定位到我们所需要的资源(数据)。

浏览器开发者工具

开发者工具主要是给程序员特别前端开发人员使用，利用开发者工具我们能够更加清楚地了解到浏览器与服务器之间的数据传输。

在之前Python基础(二)前端知识中我们了解了前端网页的基础构成，知道了网页由HTML作为基础，辅以CSS实现各种样式，加上JS实现各种复杂的交互渲染特效和功能。

我们可以通过在浏览器中右键检查打开开发者工具，也可以利用快捷键 Fn+F12 打开(这里以谷歌浏览器作为演示),让我们打开浏览器开发者工具来体验一下它的强大功能吧。

开发者工具常用功能

Elements: 允许我们从浏览器的角度看页面，我们可以看到 chrome 渲染页面所需要的HTML、CSS 和 DOM(Document Object Model)对象。此外， 还可以编辑这些内容更改页面显示效果。

例如，一些网上的查询成绩截图都可以通过修改页面从而修改得到我们想要的结果。

在页面右边是对网页源代码的前端样式的分解格式化显示，我们可以通过他们更加便捷地变更某些元素的样式，我们编写爬虫程序一般用不到，因此了解一下即可。

我们可以通过Element界面左上角的箭头对我们的页面中的元素进行定位，通过点击箭头图标指向我们网页的相关元素，单击选中的区域(元素)，可以快速跳转到目标元素所对应的网页源代码位置。

【拓展】

Python爬虫基础(三)网络传输协议中我们详细讲述了URL，我们可以通过URL定位网络上资源的位置，那么理论上如果能够得到对应资源的URL，那么我们就可以定位到资源并进行下载。

利用上述方法我们可以定位油管视频的封面图片

双击Element中对应的URL链接，在浏览器地址栏粘贴链接打开，我们可以看到视频的封面图片，同样的对于一些视频资源我们也可以利用这种方式进行定位下载。

网页视频下载可以参照我的另一篇文章：https://www.toutiao.com/i6871194453655159300/

Network: 可以看到页面向服务器请求了哪些资源、资源的大小以及加载资源花费的时间，当然也能看到哪些资源不能成功加载。

点击Network，利用 CTRL+R 刷新重载页面。我们可以看到许多类型的文件，XHR、JS、CSS等，我们可以进行选择查看我们所需要的文件类型。由于文件是按照加载顺序显示的，我们也可以通过单机name让浏览器按名称排列文件。

在Network中，可以查看到从我们在浏览器输入URL到页面被加载出来，浏览器和服务器进行的资源传输，例如加载的CSS样式、JS脚本以及HTML文件等。浏览器在和服务器网络传输中获得这些文件，并对获得到的文件进行解析展示将网页呈现在我们面前。

对上图中各列进行解释：

【补充】

Status—状态码，我们可以利用状态码来判断服务器响应状态，例如我们常见的404，一般是指服务器找不到指定网页，也说明我们请求发送失败。

常用状态码的分类归总：

任意点击其中一个文件我们可以看到浏览器与服务器传输该文件相关细节。

Header面板列出资源的请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数、服务器相关信息等等

Preview：预览面板，用于对请求到的资源进行预览

Response：原始响应信息，包含还未进行格式处理的内容

Timing：资源请求的过程所花费时间

Cookies：资源传输过程中的Cookie

后面会针对这几个部分进行详细的讲解，限于文章篇幅原因因此分成两部分来写。欢迎关注留言，后续会持续更新。