2023 年不容错过的 Chrome 开发者工具更新

2023 年不容错过的 Chrome 开发者工具更新

Chrome 116-117 中引入了许多新功能，这些功能肯定会改善 Chrome 中的开发人员体验，例如直接在 DevTools 中进行 HTTP 模拟。

Chrome 中的 HTTP 模拟

HTTP 模拟是一种允许我们模拟 HTTP 响应的技术。这可用于多种目的，例如原型设计、调试和测试。

要使用 HTTP 模拟，只需打开 DevTools 网络面板并右键单击要模拟的请求即可。然后，从上下文菜单中选择“Override content”：

这将打开一个对话框，我们可以在其中输入模拟响应。我们可以输入 JSON、XML、HTML 或我们希望服务器返回的任何其他类型的数据。

输入模拟响应后，不要忘记单击“save”按钮。每当发出请求时，Chrome 就会使用这个模拟响应。每当资源被覆盖时，我们都会在“network”面板中看到一个紫色圆圈。

好处：

• ✅不再等待后端 API 部署：HTTP 模拟可用于构建新 Web 应用程序的原型，而无需等待后端 API 开发。我们现在可以模拟 API 响应并在本地测试我们的应用程序！
• ✅ （性能）测试：它可用于通过模拟不同类型的网络条件来测试网络应用程序的性能。例如，我们可以使用 HTTP 模拟来模拟缓慢的网络连接或数据包丢失。此外，我们还可以使用它来测试大流量或网站受到攻击时的行为。

更多更新

• CSS 动画编辑器和其他 CSS 更新：我们现在可以轻松预览动画和编辑动画时间线。
• 调试优先级提取：我们现在可以通过在 DevTools network 面板中显示每个请求的提取优先级来调试优先级提取。
• 预取页面：一项名为“prefetch pages”的新功能允许我们预取接下来可能访问的页面。这可以通过减少加载页面所需的时间来提高 Web 应用程序的性能。
• 数组分组：我们可以根据回调函数返回的值对数组的元素进行分组。
• 调试缺失的 CSS 样式：现在，通过在 DevTools 中提供一个新面板来更轻松地调试缺失的 CSS 样式，该面板显示给定页面的所有缺失样式。

此外，还有多项其他更新，例如更好的源代码语法突出显示以及隐藏烦人的 Chrome 扩展日志的选项。除了 http 模拟功能之外，我对一些 CSS 动画更新也很感兴趣，因此本文在下一段中介绍这些更新。

CSS 动画更新

另一个值得注意的新功能是编辑动画时间线的能力。这使我们可以微调动画的时间并创建具有多个关键帧的复杂动画。

退出时的 CSS 过渡动画

在深入研究这个新功能之前，我将从一个退出动画示例开始：

在退出动画完成后，我们不太可能希望删除 DOM 节点（带有超时）。现在我们可以在关键帧时间轴使用 display 和 content-visibility 制作动画！

使用新的 CSS 规则制作入口动画

在上面的示例中，一个新功能@starting-style用于为入口效果设置动画，然后将其添加到顶层。然后，Chrome 使用它在元素打开之前查找元素的样式，称为“before-open”状态。然后我们有三个状态：before-open、is-open 和 exiting 状态：

/* before-open状态*/ 
@starting-style {
  .item {
    opacity: 0;
    transform: scale(0);
  }
}

/* Is-open 状态 */ 
.item {
  display: grid;
  overflow: hidden;
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.5s, transform 0.5s, display 0.5s allow-discrete;
}

/* exiting  状态 */ 
.is-deleting {
  opacity: 0;
  display: none;
  transform: scale(0.5) skewX(50deg) translateX(-25vw);
}

请注意本例中transition-behavior属性中带有的allow-discrete关键字，它用于启用 display 的转换。

详细了解 Chrome 116–117 中引入的新 CSS 功能。

网络面板改进

查看网络事件的获取优先级的变化。这有助于调试性能问题和了解获取优先级如何影响网络请求。

• 预取页面：我们可以预取接下来可能访问的页面。这可以通过减少加载页面所需的时间来提高 Web 应用程序的性能。
• 在控制台中隐藏烦人的 Chrome 扩展程序警告。这可以使“network”面板更整洁且更易于使用。一种更和平的控制台。
• 可读的 HTTP 状态代码。DevTools 现在显示 HTTP 状态代码的人类可读描述，使其更容易理解它们的含义。

使用 JS 进行数组分组

在旧版本的 Chrome 中，我们必须使用 for 循环来迭代数组并根据回调函数返回的值对元素进行分组，这工作量太大。

之前：

const products = [
  { name: "Banana", category: "Fruit" },
  { name: "Orange", category: "Fruit" },
  { name: "Peanut butter", category: "Best products ever" },
];

// 按类别对产品进行分组
const groupedProducts = {};
for (const product of products) {
  const category = product.category;
  if (!groupedProducts[category]) {
    groupedProducts[category] = [];
  }
  groupedProducts[category].push(product);
}

现在我们可以通过 groupBy() 在一行中使用来替换它：

const groupedProducts = Object.groupBy(products, ({ category }) => category);

结论

Chrome 116和117中的新功能使浏览器变得更加强大。HTTP 模拟尤其是一种强大的工具，可以为开发人员和测试人员节省大量时间和精力。我们可以简单地模拟后端 API 的响应，以直接在浏览器中模拟不同的场景。添加了 CSS 动画中的其他一些重要更新，以及“network”选项卡中的重要更新。