我们都知道 Chrome 浏览器的流行。这款浏览器让开发人员的生活变得更轻松，成为一名使用其内置开发人员工具的开发人员对您来说并不是什么新鲜事。 chrome 开发人员工具使调试变得更加容易。内置的开发人员工具允许您编辑页面、调试页面，还允许他们访问内部 Web 浏览器和应用程序上的工作。
这提高了开发人员的生产力，也使网站的诊断变得容易。在本文中，我们将讨论 Chrome DevTools 的不同功能。我们将讨论不同选项卡的用途及其工作原理。
访问开发人员工具非常容易。您可以按Ctrl+Shift+C，也可以右键单击网站上的某个元素并从此处选择“检查”。您将在 devTool 中看到许多面板或选项卡。这些选项卡为您提供了许多功能。让我们一一讨论 DevTools 的特性。
1. 在桌面或移动设备上轻松访问
左角的第二个选项卡用于检查您在移动设备或桌面上的应用程序视图。它允许您检查您的应用程序在不同设备或不同屏幕尺寸上的外观。默认情况下，您将看到应用程序的桌面模式。它主要用于检查您网站的响应能力。您会发现不同的屏幕分辨率选项来检查您网站的响应能力。
2. 元素选项卡
此选项卡主要用于调试您网站中的 HTML和CSS 代码。每当您需要更改 HTML 和 CSS 样式中的某些内容，并且希望查看它在您的网站中的反映方式时，您都可以借助此选项卡进行更改。 Elements 选项卡允许您与 DOM 交互、更改和查看它。
本节主要分为两部分。左侧面板显示 HTML 元素。元素如何嵌入到 DOM 树中。使用此选项卡实时查看更改后，您可以修改 CSS 或 HTML 文件中的更改。您可以检查哪个标签在您的网页上做什么以及它们在屏幕上的位置。此选项卡可帮助您仔细查看 DOM 结构并识别其中呈现的 HTML 元素。
3. 控制台
此选项卡可帮助您调试 JavaScript 代码。您可以在此处查看记录的消息并运行 JavaScript 代码。此选项卡可帮助您显示错误以及源代码中的行号。此属性在调试源代码时非常有用。
此外，您还可以监视事件、设置断点、样式输出、计数语句或测量执行或加载时间。这个工具会经常使用。
4. 网络
此选项卡主要用于检测网页发出的上传或下载请求。您可以在网络日志中记录所有网络活动。您可以打开网络面板，然后重新加载网页。在网络日志中，您将看到资源在每一行中按时间顺序表示。
- 状态： HTTP 响应代码。
- 类型：资源类型。
- 发起者：是什么导致资源被请求。
- 时间：请求所花费的时间。
- 瀑布：以图形方式表示请求的不同阶段。
您还可以选择检查页面的布局以及在未加载某些资源时它的行为方式。
5. 性能
顾名思义，此选项卡用于优化您网站的加载速度。您可以分析网页的运行时性能。捕获设置允许您捕获性能指标设置。
您可以在网络和 CPU 列表中找到限制下拉列表。对于 CPU，您可以选择 2X 减速。您的 Devtools 会限制您的 CPU，使其比正常情况慢两倍。这将帮助您检查移动设备上的网站性能。您还将在此选项卡中找到记录和重新加载按钮。在此期间，记录按钮开始分析网站的各种事件。单击停止后，您将找到每个事件的结果和时间。
6. 内存追踪内存泄漏
此选项卡显示配置文件内存使用情况，该页面与 Chrome 任务管理器一起使用。您可以追踪影响页面性能的所有问题，例如内存泄漏和膨胀。消耗更多内存的网站会带来糟糕的体验。
此选项卡主要以三种不同的方式提供分析……
- 堆快照：用于拍摄显示 JavaScript 对象和 DOM 节点之间内存分布的堆快照。
- 记录分配时间：您可以跟踪网站 JS 堆中的内存泄漏。
- 记录分配配置文件：显示来自 JavaScript 函数的内存分配。您还可以使用操作记录配置文件。
7. 应用：检查资源
此选项卡可帮助您管理资源，例如 cookie、本地存储、应用程序缓存、字体、样式表、图像、注册服务工作者、会话存储、SQL 数据库和索引数据库。您还可以执行一些其他任务，如下所示……
- 应用程序选项卡可帮助您在清单窗格的帮助下检查和触发 Web 应用程序的清单。
- 您可以使用 Service Worker 的窗格来执行与 Service Worker 相关的任务，例如注销、停止、下线等。
- 您可以使用 Cache Storage 窗格检查 Service Worker 缓存。
- 使用 Clear Storage，您可以检查和清除所有存储、缓存和 Service Worker。
- 使用框架窗格使用各种过滤器组织资源。
- 在 Web SQL 数据库上，您可以执行各种语句。
8. 安全
您将使用此选项卡解决任何类型的安全问题。此选项卡用于确保在页面上正确实施 HTTPS。您还可以在网页上查看颁发的 SSL 证书。在此选项卡的帮助下，页面的真实性得到认证。
9. 审计或灯塔
此选项卡标识影响网站页面加载性能、可访问性和用户体验的问题。您可以在此选项卡的帮助下解决这些问题。 Lighthouse 是一个开源的自动化工具，用于提高网页的质量。使用此选项卡，您主要检查 Progressive Web App、性能、最佳实践可访问性问题的标准。
结论
从以上所有选项卡的解释中，您可能已经了解所有选项卡的重要性。这些选项卡在调试应用程序和解决其中的问题时非常有用。每个选项卡都有自己的用途，一旦您开始构建应用程序，您就会了解其中包含的更多功能。