看看 Chrome DevTools
看看 Chrome DevTools
Chrome DevTools 的介绍性文章。基本的表面特征和概念。
Chrome 开发者工具
Chrome DevTools 是一组内置于 Google Chrome 浏览器中的开发者工具。该工具支持开发人员诊断、调试和开发 Web 应用程序。多亏了这些工具，我们可以完美地模拟互联网连接、检查元素、运行 Javascript 和许多其他功能，这些功能将帮助我们作为开发人员的日常工作。
如何访问 Chrome 开发者工具？
要访问这些工具，有 3 种主要方式，它们是：
- 右键单击网页上的任何元素，然后选择检查选项。
- 按
Ctrl+转移+我（Windows、Linux）命令+选项+我（苹果系统）。 - 按
F12.
面板 Chrome DevTools
Chrome DevTools 由多个部分/功能组成，其中包括：
- 元素。
- 安慰。
- 来源。
- 网络。
- 表现。
- 记忆。
- 应用。
应该注意的是，还有更多可用的部分，例如传感器的使用、网络音频、录音以及本文不会涉及的其他实用程序。
元素
元素选项卡主要关注 DOM 及其组件部分（HTML 和 CSS）的交互。其主要功能如下：
- 查看和更改 DOM 对象的属性 ：查看节点、导航 DOM 树、过滤节点、编辑内容、编辑属性、重新排序节点和隐藏节点。
- 查看和更改 DOM 对象的 CSS： 计算样式、CSS 继承、盒子模型、CSS 过滤、属性和伪类的可视化。
- 检查和调试 CSS Grid 和 Flexbox 布局 ：使用交互式面板修改网格和 flexbox 设计。
安慰
控制台选项卡主要关注 Javascript。控制台基本上是一个 REPL，它允许您评估 Javascript 语句并立即查看它们的结果。其主要功能如下：
- 运行 javascript ：编程、表达式评估以及与浏览器 API 的交互。
- 日志视图 ：记录和过滤不同级别的日志；信息、警告和错误。
来源
源选项卡主要关注页面加载的文件和资源，它也有专注于编程和代码调试的工具。其主要功能如下：
- 查看和修改文件 ：页面上加载的图像、HTML、CSS、脚本和字体的可视化。
- 创建和运行代码片段 : 打包代码插入。片段是可以在任何页面上执行的脚本，可以保存和重复使用。 DevTools 将代码段保存到文件系统。
- Javascript 调试器 ：内置 Javascript 调试器，用于设置断点、保存故意停止并逐行执行代码。
网络
网络标签主要关注页面的网络活动的检查。其主要功能如下：
- 网络活动记录 ：检查请求活动、HTTP 状态信息、域、资源过滤、请求时间、瀑布图形表示等。请注意，默认情况下，资源按时间顺序列出。
- 截图 ：屏幕截图可让您查看页面在加载时随时间的变化情况。
- 电网条件模拟 ：模拟 3g 连接、离线和自定义模式。
表现
性能选项卡主要侧重于模型下Web性能的检查和测量 轨 （响应、动画、空闲和负载）。其主要功能如下：
- 铁路性能分析 ：捕获记录、毫秒、时间线事件参考、图表以及其他用于分析和判断的设置。
记忆
内存选项卡主要专注于诊断和修复内存问题，例如泄漏、膨胀、垃圾收集。其主要功能如下：
- 截图 ：带有堆配置文件的存储以查找内存泄漏。捕获比较，探索内存内容和优势树以找到积累点。
应用
应用程序选项卡主要侧重于浏览器内信息的存储和管理，例如 cookie、本地存储或缓存。此外，此选项卡还提供了多种使用后台服务的工具。其主要功能如下：
- 应用 : 创建 P 的工具 渐进式网络应用 ，清单管理和服务工作者。
- 存储 ：浏览器中的存储系统。与本地存储、会话存储、索引数据库和 Cookie 的管理和交互。
- 缓存 ：浏览器缓存数据检查和管理。
Recursos Chrome 开发者工具
- Web 主要开发者 Chrom e : 文档、文章和社区。
结尾
了解 Chrome DevTools 为我们提供的所有工具对 Web 开发非常有用，尤其是我使用了本文中显示的所有面板，毫无疑问，它使我免于许多麻烦。我建议继续探索文档并酌情使用它们。
感谢您做到这一点，如果您觉得这很有用，请不要忘记拍手。订阅以获取更多内容。
如果您需要其他帮助，请联系我。
非常感谢您的阅读，感谢您的宝贵时间。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
