爬虫分析利器：谷歌Chrome F12抓包分析

 

 

 

谷歌Chrome抓包:1. 最上面一行菜单

• 左上角箭头 用来点击查看网页的元素
• 第二个手机、平板图标是用来模拟移动端显示网页
• Elements 查看渲染后的网页标签元素
  提醒 是渲染后（包括异步加载的图片、数据等）的完整网页的html，不是最初下载的那个html。
• Console 查看JavaScript的console log信息，写网页时比较有用
• Sources 显示网页源码、CSS、JavaScript代码
• Network 查看所有加载的请求，对爬虫很有帮助

• Elements（元素面板）：使用“元素”面板可以通过自由操纵DOM和CSS来重演您网站的布局和设计。

  Console（控制台面板）：在开发期间，可以使用控制台面板记录诊断信息，或者使用它作为 shell，在页面上与JavaScript交互

  Sources（源代码面板）：在源代码面板中设置断点来调试 JavaScript ，或者通过Workspaces（工作区）连接本地文件来使用开发者工具的实时编辑器

  Network（网络面板）：从发起网页页面请求Request后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），并可以根据这个进行网络性能优化

  Performance（性能面板）：使用时间轴面板，可以通过记录和查看网站生命周期内发生的各种事件来提高页面运行时的性能

  Memory（内存面板）：分析web应用或者页面的执行时间以及内存使用情况

  Application（应用面板）：记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、-IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等

  Security（安全面板）：使用安全面板调试混合内容问题，证书问题等等

  Audits（审核面板）：对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等

  重点讲解Network(参考资源：https://www.jianshu.com/p/f7a94bc5f67c)

• 定义：Network 面板记录页面上每个网络操作的相关信息，包括详细的耗时数据、HTTP 请求与响应标头和 Cookie

  结构：由五个窗格组成，如图

• 

   

   

      后面的暂且不管。

谷歌Chrome抓包:2. 重要区域

图中红框的两个按钮比较有用，编号为2的是清空请求记录；编号3的是保持记录，这在网页有重定向的时候很有用
图中绿色区域就是加载完整个网页，浏览器的全部请求记录，包括网址、状态、类型等。写爬虫时，我们就要在这里寻找线索，提炼金矿。
最下面编号为4的红框显示了加载这个网页，一共请求了181次，数量是多么地惊人，让人不禁心疼起浏览器来。

点击一条请求的网址，右侧就会出现新的窗口显示该条请求的相信信息：

 

 

图中左边红框就是点击的请求网址；绿框就是详情窗口。
详情窗口包括，Headers（请求头）、Preview（预览响应）、Response（服务器响应内容）和Timing（耗时）。
Preview、Response 帮助我们查看该条请求是不是有爬虫想要的数据；
Headers帮助我们在爬虫中重建http请求，以便爬虫得到和浏览器一样的数据。

 

参考链接;https://www.yuanrenxue.com/crawler/chrome-for-crawler.html