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

转载：https://www.cnblogs.com/CH-TNT/p/11439262.html