断点类型 Line-of-code 行断点 Conditional line-of-code 条件断点 DOM XHR Event listener 事件监听断点 exception 异常断点 DOM change 断点 Types of DOM change breakpoints: Subtree modifications. Triggered when a child of the currently-selected node is removed or added, or the contents of a child are c...

在 Chrome DevTools 中调试 JavaScript 入门 如果您使用 console.log() 来查找和修正代码中的错误，可以考虑改用本教程介绍的工作流程。 其速度快得多，也更有效。 第 1 步：重现错误 重现错误始终是调试的第一步。“重现错误”是指找到一系列总是能导致错误出现的操作。 您可能需要多次重现错误，因此要尽量避免任何多余...

很容易忽视您的用户在使用移动设备时遇到的网络条件。使用 DevTools 可以模拟不同的网络条件。解决全部的加载时间问题，您的用户会感谢您。

了解资源耗时 了解通过网络收集资源的阶段至关重要。这是解决加载问题的基础。 TL;DR 了解资源耗时的阶段。 了解每个阶段向 Resource Timing API 提供的内容。 了解时间线图表中不同的性能问题指示器，例如一系列透明栏或者大片的绿块。 所有网络请求都被视为资源。通过网络对它们进行检索时，资源具有不同生命周期，以...

测量资源加载时间 Network 面板记录页面上每个网络操作的相关信息，包括详细的耗时数据、HTTP 请求与响应标头和 Cookie，等等。 TL;DR 使用 Network 面板记录和分析网络活动。 整体或单独查看资源的加载信息。 过滤和排序资源的显示方式。 保存、复制和清除网络记录。 根据需求自定义 Network 面板。 Network 面板概览 N...