Firefox DevTools JavaScript 调试器的 5 个技巧和窍门

这是“使用 Firefox 开发者工具调试 Web 应用程序”系列技巧文章的第三篇，旨在帮助您提高工作效率。本文将介绍 5 个使用 Firefox 开发者工具中 JavaScript 调试器的技巧。

设置条件断点

在 Firefox 开发者工具的 JavaScript 调试器中，您可以通过右键单击行号来设置条件断点。断点仅在满足条件时才会激活并暂停代码执行。这对于调试间歇性错误以及在特定值或范围内暂停代码执行非常方便。

GIF

按函数名或行号搜索

您可以通过 JavaScript 调试器搜索文件名，在 Mac 上按CMD+键（在 Windows 和 Linux 上按+ 键）。如果您想搜索文件中的函数或直接跳转到特定行号，还有其他快捷键，但我总是忘记。您也可以在同一个搜索框中输入，这样就能查找函数定义。如果您在搜索词前加上，则会跳转到指定的行。PCTRLP@:

GIF

美化打印的精简代码

在 JavaScript 调试器中，你可以通过点击{}图标来美化打印压缩后的代码。我主要在生产环境或其他人的网站中进行一些简单的调试，并且没有源代码映射可用时使用它。

GIF

设置URL断点

您可以在 Firefox 开发者工具的 JavaScript 调试器中设置 URL 断点。当页面尝试访问符合您设置的规则的 URL 时，断点将激活并暂停代码执行。这对于评估应用程序在发生网络请求时的状态以及精确定位触发网络请求的代码行非常有用。

GIF

禁用断点

您可以在 Firefox 开发者工具的 JavaScript 调试器中禁用和重新启用断点。断点将保持设置状态，但会变为非活动状态，不会暂停代码执行。这在调试 if/else 语句时非常方便，因为您无需记住上次设置断点的位置。

GIF

这是每周都会发生的事情。

这是一个每周更新的系列，这些年来我积累了很多技巧。如果你喜欢这个系列或者想看更多，我的推特账号是@lakatos88，关注我吧，那里有奇迹发生。