web新技术双周报(9.30-10.14)

chrome(106)

在调试过程中可以更快地识别代码中的问题，因为DevTools现在会自动将已知的第三方脚本添加到忽略列表中。

打开此演示并单击“加号“按钮。在Console中展开错误消息。堆栈跟踪仅显示您的代码（例如app.component.ts和button.component.ts）。单击显示更多以查看完整的堆栈跟踪。

以前，堆栈跟踪包括第三方脚本，如zone.js和core.mjs. 这些不是您的源代码，它们是由打包程序（例如 webpack）或框架（例如 Angular）生成的。确定错误的根本原因需要更长的时间。

可通过Settings > Ignore list > Automatically add known third-party scripts to ignore list开启该设置

打开这个演示并在app.component.ts的increment()方法中添加断点。点击页面上的”加号“按钮触发断点。调用堆栈仅显示代码中的帧（例如app.component.ts和button.component.ts）。

要查看所有帧，请启用Show ignore-listed frames。之前，DevTools 默认显示所有帧。

3.在source面板中隐藏被忽略的源文件

启用隐藏已列入忽略列表的来源以隐藏导航窗格中的不相关文件。这样，您可以只专注于您的代码。

打开这个演示。在“source”面板中。node_modules和webpack第三方脚本。单击菜单并选择隐藏已列入忽略列表的来源以将它们从窗格中隐藏。

4.Performance Insights 面板中的 LCP 细节

Performance Insights面板现在显示最大内容绘制 (LCP)的时间细分。使用这些时间信息来了解和提升 LCP 性能的机会。

其他资讯：

1. Node v18.11.0（当前）发布；获得“监视模式” ——Node 的最新版本并没有取得太多收益，但确实获得了一个实验性--watch功能，当导入的文件发生更改时会自动重新启动正在运行的进程 Node v18.11.0 (Current) | Node.js

2. Wallaby.js 是一种开发人员生产力工具，可在您键入时立即运行 JavaScript 和 TypeScript 测试，并在代码旁边突出显示 IDE 中的结果。

3. 从 103 版开始， Mozilla 已采取措施显着提高 Firefox在 macOS 上的响应能力。

4. 以下是 Safari Technology Preview 155 的发行说明，其中包含对 Web Inspector、渲染、滚动到文本片段、Web API 等的更新。

5. 三个逻辑 CSS 函数:min()、max() 和 clamp()介绍

6. 使用 CSS Grid 和命名网格线将元素扩展到内容区域之外

7. CSS ::file-selector-button伪元素简介,长久以来，file类型的文件选择框有个非常诟病的问题，那就是浏览器默认的样式太丑，且无法自定义。在这种背景下，::file-selector-button伪元素应运而生，专门匹配文件选择输入框样式中的按钮。