前端调试第一部分：不仅仅是控制台日志

作为一名 Java 开发者，我主要关注的是后端调试。前端调试面临着不同的挑战，并且需要一些复杂的工具。不幸的是，基于打印的调试已经成为前端的常态。公平地说，由于开发周期不同，而且问题始终是单用户问题，因此这种Console.log调试方式更有意义。但即使你选择使用，也有很多细微之处需要注意。

顺便说一句，如果您喜欢这篇文章以及本系列的其他文章，可以看看我写的《调试》这本书，它涵盖了相关的主题。如果您有朋友正在学习编程，也欢迎推荐我的《Java 基础》这本书。如果您想过一段时间再回来学习 Java，可以看看我的《Java 8 到 21 入门》这本书。

`debugger`使用关键字进行即时调试

JavaScript 中一个很酷又强大的工具是debugger关键字。与其简单地打印堆栈跟踪信息，不如使用这个关键字直接在感兴趣的代码行启动调试器。这是一个非常棒的工具，可以立即让你注意到 bug。我经常在前端的调试版本中使用它，而不是仅仅打印错误日志。

使用方法：将debugger关键字放在代码中，尤其是在错误处理方法中。当代码执行到此行时，它会自动暂停，以便您检查当前状态，单步执行代码，并了解哪里出了问题。

请注意，虽然这在开发过程中非常有用，但我们必须记住debugger在生产环境中删除或有条件地排除这些语句。发布版本不应在生产站点实时环境中包含这些调用。

现代浏览器允许您直接从控制台调用调试，为您的调试过程增加了额外的灵活性。

示例：通过在控制台中使用debug(functionName)命令，您可以在指定函数的开头设置断点。当随后调用此函数时，执行将暂停，并直接进入调试器。

function hello(name) {
    Console.log("Hello " + name)
}
debug(hello)
hello("Shai")

当您想要在不修改源代码的情况下开始调试，或者需要检查仅在全局范围内定义的函数时，这特别有用。

DOM 断点是 Chrome 和 Firebug（Firefox 插件）中的一项高级功能，允许您在 DOM 的特定部分发生改变时暂停执行。

要使用它，我们可以右键单击所需的 DOM 元素，选择“Break On”，然后选择您感兴趣的特定突变类型（例如，子树修改、属性更改等）。

DOM 断点对于追踪 DOM 操作导致意外结果的问题（例如动态内容加载或用户界面更改导致的布局或功能中断）非常有效。可以将它们想象成我们之前讨论过的字段断点。

这些断点是对传统行断点和条件断点的补充，为调试复杂的前端问题提供了更精细的方法。当 DOM 被外部依赖项操作时，这是一个非常有用的工具。

了解谁发起了特定的网络请求可能颇具挑战性，尤其是在有多个来源共同发起请求的大型应用程序中。XHR( XMLHttpRequest) 断点为这个问题提供了解决方案。

在 Chrome 或 Firebug 中，通过指定要监控的 URI 的子字符串来设置 XHR 断点。当收到与此模式匹配的请求时，执行将停止，以便您调查请求的来源。

当处理动态生成的 URI 或复杂流程时，如果无法直接跟踪请求的来源，此工具就非常有用。

请注意，您应该有选择地设置过滤器；将过滤器留空将导致断点在所有 XHR 请求上触发，这可能会变得难以承受。

有时，您需要调试的问题特定于某些环境，例如移动设备或不同的地理位置。Chrome 和 Firefox 提供了多种模拟工具，可帮助您在桌面上复制这些条件。

这些通常很难重现。例如，与触摸相关的问题通常很难在设备上调试。通过在桌面浏览器上模拟这些问题，我们可以缩短调试周期，并充分利用桌面上可用的工具。

CSS 和 HTML 错误可能特别棘手，通常需要详细检查元素的呈现和样式。

检查元素： “检查元素”工具是前端调试的基石，可让您实时查看和操作 DOM 和 CSS。当您进行更改时，页面会立即更新，并立即提供调整反馈。

解决样式特异性问题：一个常见问题是 CSS 样式特异性，即更具体的选择器会覆盖您想要应用的样式。检查元素视图会高亮显示被覆盖的样式，帮助您识别和解决冲突。

Firefox 与 Chrome：虽然两款浏览器都提供了强大的工具，但它们组织这些功能的方式却有所不同。Firefox 的界面可能看起来更直观，标签页更少，而 Chrome 则将类似的工具组织在不同的标签页下，这可能会简化您的工作流程，也可能会增加复杂性，具体取决于您的偏好。

在接下来的文章中，我想讨论很多前端工具。希望你在第一部分中学到了一些新的调试技巧。

前端调试需要深入了解浏览器工具和 JavaScript 功能。通过掌握本文概述的技术——使用debugger关键字进行即时调试、DOM 和 XHR 断点、环境模拟以及布局检查——您可以显著提高调试效率，并交付更健壮、无错误的 Web 应用程序。