Chrome分析网页-一步步获取Bilibili弹幕

Chrome分析网页-一步步获取Bilibili弹幕

Chrome 提供的8大工具简介

Elements
从浏览器的视角来看页面，也就是说我们可以看到chrome渲染页面所需要的HTML，CSS和DOM（Document Object Model）对象。此外，还可以编辑这些内容更改页面的显示效果。

Netwrok
可以看到页面向服务器请求了哪些资源，资源的大小以及加载资源花费的时间；也可以看到哪些资源不能加载成功，此外还可以看到HTTP的请求头，返回内容等；

Sources
主要用来调试js

Timeline
提供了加载页面时花费时间的完整分析，所有事件，从下载资源到处理JavaScript，计算CSS样式等花费的时间都展示在Timeline中。

Profiles
分析web应用或者页面的执行时间以及内存使用情况

Resources
对本地缓存（IndexedDB，Web SQL， Cookie，应用程序缓存，Web Storage）中的数据进行确认及编辑

Audits
分析页面加载的过程，进而提供减少页面加载时间，提升响应速度的方案；

Console
显示各种警告与错误信息，并提供了shell用来和文档，开发者工具交互

启动开发者工具

Mac 上快捷键：option + command + i点击右侧一个三个竖点标志的图标  -> More tools -> Developer tools

Elements元素使用

点击网页，选择观察源码和利用Elements看到的源码是不一样的。直接点击网页右键看到的源码有很多JS请求资源并没有显示，而直接显示了JS本身。以B站为例，弹幕资源和视频资源不在同一个服务器上，需要发出不同的请求。当页面加载时，会有一段JS，向弹幕服务器请求资源。如果之间右键观察源码，则只能看到该段JS，无法看到弹幕信息。但是通过Elements就可以看到。

启动开发者工具后，选中Elements（默认就是它），有两种模式可以进行元素观察。一种是鼠标点击源码，然后网页高亮选中的元素。另外一种是鼠标选中网页中的某个元素，然后程序高亮对应的代码。

在开发者工具的顶部菜单栏（注意不是浏览器顶部菜单栏）左上角，有一个箭头标志，点击它就会切换两种模式。默认开始是选中源码，高亮对应界面。

在开发者工具顶部菜单栏右上角，可以切换工具与界面显示的方式。比如上下布局，左右布局，或者开发者工具离开浏览器。

Netwrok 的使用

请求的资源类型

XHR // 记录ajax异步请求。一般通过js异步加载的资源都在这里DOC // 请求的文件，一般就是输入这个网址url获得的整体资源

Netwrok可以看到网页请求了哪些资源。如果没显示，则刷新网页。下面结合一个例子来讲述该工具的使用方法。

寻找B站弹幕服务器

B站的视频网页，有很多资源展示。视频展示，弹幕展示，图片展示。这些元素并不是来自同一个服务器。如何确定弹幕服务器，以便于获取弹幕资源？

这里分析的可能并不准确。事实上我是提前知道了，B站是通过cid值来向弹幕服务器发起请求的。假如不知道是用这个值的话，不知道能否找到。

首先在Element页面下，定位弹幕，视频所在区域。发现有一个大的div包含了这两个区域。该div的id=bofqi（播放器），因为这个区域即包含视频又包含弹幕，所以肯定会有js代码在这里请求了资源。（视频资源应该是和最初的url一起请求进来的，所以这里如果有js，则很有可能是弹幕的。）

然后，点击网页右键，观察源码，定位到div的id为bofqi的区域。发现下面果然有一段script，里面包含了一个cid的值。现在只需要知道它就可以了。

然后切换到Network中，刷新一下网页。

在上面的过滤器，选择XHR，XHR表示ajax异步请求得到的资源。
然后会找到一段xml，点开它发现就是弹幕。

找到这个xml的一点方法，

观察的工具
点击一个其中资源Name，右侧就会出现一个信息栏。信息栏上有 Headers， Preview，Response，Timing选项。点击Headers后，会看到浏览器发送请求的一些具体信息。比如请求的url地址，请求的方法Get or post，返回的状态，200，404 等。Preview则是预览请求获得的资源。

观察条件1
通过观察 Request URL，可以过滤掉很多无效的资源。比如static开头的服务器地址，或者是请求的url特别长。一般图片素材等可能放到static命名的服务器里。结合弹幕的英文，侧重观察，comments，danmu 等词语命名的服务器url。

观察条件2
然后，考虑到弹幕的组成形式，很可能是一个json串或者是一个xml。因为它就是一个文本文件。

结合上述两个观察条件，一般能较快的定位到所需元素。

最后，发现以cid命名的一个xml文件里，包含的就是弹幕址。
其请求的服务器url是：http://comment.bilibili.com/12918727.xml

后面那串数字就是cid。

所以知道通过网页端，知道了cid，就能得到向弹幕服务器发起请求的url，也就能获得相应的弹幕。