Chrome 开发者工具的 9 个技巧和窍门

1. 条件断点

2. 观察变量

3.停止无限循环

4. 衡量互动

5. 漂亮打印缩小文件

6. 监控事件

7.导出请求数据

8.启用深色主题（纯粹出于美观考虑……）

9. Chrome扩展程序

Chrome正逐渐成为一款备受青睐的浏览器，它本身也是一款强大的开发工具。它定期推出新功能，其中一些功能比其他功能更适合我的开发周期。

以下是我最常用且值得强调的一些功能：

1. 条件断点

在脚本源代码中添加断点是了解哪里出了问题（或哪里出了问题！）以及在哪里出错的极其有用的方法。能够添加条件断点可以帮助您通过指定您想要进一步调查的参数条件来更快地找到问题的根源。太理想了！

在此处阅读有关条件断点的更多信息。

2. 观察变量

当断点处于活动状态时，可以在sources窗口中查询变量。如下所示：

这很好，但是假设您想同时关注多个变量或者想要比较，或者只是提醒自己它们是什么（或应该是什么），那么可以展开watch右侧的面板并根据需要添加任意数量的变量：

3.停止无限循环

如果您曾经意外运行过 JavaScript 函数，但意识到为时已晚，并且不得不眼睁睁地看着计算机在您疯狂尝试强制退出 Chrome 时开始停止运行，那么这个适合您……

点击暂停脚本，然后...

在此处阅读有关停止无限循环的更多信息。

4. 衡量互动

您是否曾经想知道网站上某项操作需要多长时间……？

• 页面加载后多久才会播放视频或点击按钮？
• 性能瓶颈在哪里？脚本方法运行需要多长时间？

您现在可以使用window.performance它来触发测量开始和完成，并随后提取数据。

onPageLoadOrMethodStart() {
    window.performance.mark('start');
    ...
}

onMethodCompletionOrCtaInteraction() {
    window.performance.mark('end');
    window.performance.measure('customMeasure', 'start', 'end');
}

retrieveData() {
    const customPerf = window.performance.getEntriesByName('customMeasure')[0].duration;
}

方便的是，数据还会打印在performance顶部面板的窗口中，这样你就能一目了然地看到所有测量结果。太棒了！

阅读有关使用用户计时 API测量现实世界交互的更多信息。

5. 漂亮打印缩小文件

生产环境中的压缩文件是行业标准，也是意料之中的，但有时附加断点或查看单个结构或方法也会很方便。让它更易读，让它更美观！（面板左下角sources）：

6. 监控事件

有没有想过为什么你的事件监听器没有触发，或者在随机时间触发？

您可以使用 跟踪页面事件和交互console。

现在就尝试一下：

1. 右键单击并“检查”页面顶部的搜索输入栏
2. 将其复制到控制台：monitorEvents($0, "key");
3. 在搜索输入框中输入一些内容...

在此处阅读有关监控事件的更多信息。

7.导出请求数据

你遇到了一个问题。有些东西看起来很奇怪，但你不确定原因。你有大量网络请求需要筛选，答案肯定就在某个地方……你真的需要帮忙，如果能和别人分享一下，岂不是更方便？

你可以！

您可以将请求下载为 HAR 文件，然后发送给同事，同事也可以将其导入 Chrome 浏览器来查看这些请求。只需右键单击任何请求，然后选择 即可Save as HAR with Content。搞定！

阅读有关导出请求数据和如何分析 HAR 文件的更多信息。

8.启用深色主题（纯粹出于美观考虑……）

打开开发工具>转到Settings

切换它！

9. Chrome扩展程序

还有许多非常方便的扩展，可以与各种框架和工具一起使用。我发现特别有用的扩展包括：

• VueJS 开发工具（真正优秀的用户体验）
• ReactJS 开发工具
• 谷歌分析