3.4 分析QQ音乐
现在以QQ音乐某一歌手页面的分析为例（y.qq.com/n/yqq/singer/0025NhlN2yWrP4.html）讲述如何使用Chrome开发者工具分析网站，如图3-7所示。
图3-7 歌手信息
从图3-7中可以看到，在Network标签下捕捉到很多请求信息，请求类型有document、png、font和script等，分别对应HTML文件、图片、字体格式和JavaScript脚本。
单击“Filters”下的Doc标签（Doc是当前网页的HTML文件），发现有两个请求信息，分别是“0025NhlN2yWrP4.html”和“xhr_proxy_utf8.html”。从请求的命名可以看出，第一个请求与网站的URL是一致的。再查看“0025NhlN2yWrP4.html”的响应内容（Preview标签），可以使用“Ctrl+F”快速查找歌曲信息，如图3-8所示。
图3-8 快速查找歌曲信息
在Doc中虽能找到歌曲名、专辑和时长，但无法找到更多的歌曲信息。歌曲信息有可能是由其他方式生成的，网站数据生成只有前端（Ajax或JSONP）和后端（服务器）两种方式。从图3-8返回的结果来看，数据不可能是从后端生成的，那么就可能是由前端加载生成的。
提示
JSONP（JSON With Padding）是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问问题。
前端加载的数据有可能记录在Chrome开发者工具的“XHR”或“JS”中，分别查看两个标签里面的请求信息，最终发现歌曲信息存放在JS下的某个请求中，如图3-9和图3-10所示。
图3-9 响应内容
图3-10 请求信息
从图3-9和图3-10分析得知，请求方式是GET, Query String Parameters是记录该请求的参数。因为请求方式是GET，所以请求参数也可以在请求链接上找到。
再看请求参数，大部分请求参数是可以明确知道的，唯独参数singermid无法确定。从参数的命名来看，这应该是歌手的ID信息，也是网站用于标记歌手唯一的属性，所以要获取歌手的singermid可能需要从其他请求上获取。
根据上述例子，可简单总结出分析网站的步骤如下：
步骤01 找出数据来源，大部分数据来源于Doc、XHR和JS标签。
步骤02 找到数据所在的请求，分析其请求链接、请求方式和请求参数。
步骤03 查找并确定请求参数来源。有时候某些请求参数是通过另外的请求生成的，比如请求A的参数id是通过请求B所生成的，那么要获取请求A的数据，就要先获取请求B的数据作为A的请求参数。