python爬虫基础知识-开发者工具

前言

Chrome开发者工具 简称 DevTools，是一组网页制作和调试的工具，内嵌于 Google Chrome 浏览器中。
Chrome 开发者工具非常重要，所蕴含的内容也是非常多的，熟练使用它能让你更加深入地了解浏览器内部工作原理。

Chrome开发者工具

打开方式

右键 + 检查 或者 F12 或者右上方Chrome菜单 + 更多工具 + 开发者工具

功能面板

简单来说，Chrome 开发者工具为我们提供了通过界面访问或者编辑 DOM 和 CSSOM 的能力，还提供了强大的调试功能和查看性能指标的能力。
Elements：可以查看或修改HTMl元素的属性、CSS属性、监听事件、断点，用于测试页面布局和设计页面
Console：可以看成是JS Shell, 可以执行JS脚本，查看调试日志信息或异常信息，通过Console还能和页面中的JS对象交互
Sources：用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码，此外最重要的是可以调试JavaScript源代码，可以给JS代码添加断点等
NetWork：网络页面主要用于查看header等与网络连接相关的信息
Performance：记录和查看Web应用生命周期内的各种事件，并用来分析在执行过程中一些影响性能的要点。
Memory：用来查看运行过程中的JavaScript占用堆内存情况，追踪是否存在内存泄漏的情况等。
Application：查看Web应用的数据存储情况; PWA的基础数据;IndexedDB;Web SQL;本地和会话存储;Cookie;应用程序缓存;图像;字体和样式表等。
Security：显示当前页面一些基础的安全信息。
Audits：会对当前网页进行网络利用情况、网页性能方面的诊断,并给出一些优化建议。
Layers：展示一些渲染过程中分层的基础信息

元素面板(Elements)

1. 定位页面元素的代码位置

2. 修改元素的代码与属性（前台调试开发的时候，比较常用这种操作）

3. 右边的侧栏及其功能

网络(NetWork)

1. 面板构成

   1. 控制器
      

   2. 过滤器
      网络面板中的过滤器，主要就是起过滤功能。因为有时候一个页面有太多内容在详细列表区域中展示了，而你可能只想查看 JavaScript 文件或者 CSS 文件，这时候就可以通过过滤器模块来筛选你想要的文件类型。

   3. 抓图信息
      抓图信息区域，可以用来分析用户等待页面加载时间内所看到的内容，分析用户实际的体验情况。比如，如果页面加载 1 秒多之后屏幕截图还是白屏状态，这时候就需要分析是网络还是代码的问题了。

   4. 时间线
      时间线，主要用来展示 HTTP、HTTPS、WebSocket 加载的状态和时间的一个关系，用于直观感受页面的加载过程。如果是多条竖线堆叠在一起，那说明这些资源被同时被加载。至于具体到每个文件的加载信息，还需要用到下面要讲的详细列表。

   5. 详细列表
      这个区域是最重要的，它详细记录了每个资源从发起请求到完成请求这中间所有过程的状态，以及最终请求完成的数据信息。通过该列表，你就能很容易地去诊断一些网络问题。

   6. 下载信息概要
      下载信息概要中，你要重点关注下 DOMContentLoaded 和 Load 两个事件，以及这两个事件的完成时间。
      DOMContentLoaded，这个事件发生后，说明页面已经构建好 DOM 了，这意味着构建 DOM 所需要的 HTML 文件、JavaScript 文件、CSS 文件都已经下载完成了。
      Load，说明浏览器已经加载了所有的资源（图像、样式表等）。
      通过下载信息概要面板，你可以查看触发这两个事件所花费的时间。