Chrome浏览器调试
Chrome浏览器调试
F12调试：
Network选项
调用“检查”（ctrl+shift+i）工具（F12），然后点击Network
记录在当前页面上发生的所有请求。
现在看上去好像空空如也的样子，这是因为Network记录的是实时网络请求。
现在网页都已经加载完成，所以不会有东西。
点击一下刷新，浏览器会重新访问网络，这样就会有记录
浏览器总是在向服务器，发起各式各样的请求。
当这些请求完成，它们会一起组成我们在Elements中看到的网页源代码
一般来说，都是这种第0个请求先启动了
其他的请求才会关联启动，一点点地将网页给填充起来
也有一些网页，直接把所有的关键信息都放在第0个请求里
方法：
先找到哪一个请求当中。再用requests库，去模拟这个请求
+++++++++++++++++++++++++++++++++++++++++++++++++++++
Network怎么用
第一行
ALL（查看全部）/XHR（仅查看XHR，我们等会重点讲它）/Doc（Document，第0个请求一般在这里），
有时候也会看看：Img（仅查看图片）/Media（仅查看媒体文件）/Other（其他）。
最后，JS和CSS，则是前端代码，负责发起请求和页面实现；Font是文字的字体；
而理解WS和Manifest，需要网络编程的知识，倘若不是专门做这个，你不需要了解
第二行
是一个时间轴。记录什么时间，有哪些请求
第三行
统计：有多少个请求，一共多大，花了多长时间
############################################################
什么是XHR？
把鼠标在XHR上悬停，你可以看到它的完整表述是XHR and Fetch
#了解即可：Ajax技术 应用这种技术，好处是显而易见的——更新网页内容，而不用重新加载整个网页。又省流量又省时间
工作的时候，会创建一个XHR（或是Fetch）对象，
然后利用XHR对象来实现，服务器和浏览器之间传输数据。
在这里，XHR和Fetch并没有本质区别，只是Fetch出现得比XHR更晚一些，所以对一些开发人员来说会更好用，但作用都是一样的
+++++++++++++++++++++
XHR怎么请求？
列子：
点击XHR按钮。
网页里一共有10个XHR或Fetch，我们要从里面找出带有歌单的那一个(尝试阅读它们的名字client_search)
从左往右分别是：Headers：标头（请求信息）、Preview：预览、Response：原始信息、Timing：时间。
点击Preview按照这样的顺序：data-song-list-0-name,就能看到歌名
#最左侧的Headers，点击它-General-Requests URL-浏览器中打开链接(字典层层嵌套)，比较难看
直接看Preview，按照这样的顺序：data-song-list-0-name，歌曲名就在这里，它的键是name