Cypress 允许我们以多种方式调试代码。由于它运行在相同的事件循环中，我们可以使用通常会用到的工具，例如使用 debugger 关键字或使用 DevTools。

以熟悉的方式进行调试

由于 Cypress 在浏览器内部运行，我们可以访问浏览器特定的对象，例如 document、window 和 debugger。

我们可以使用这个关键字，在添加 debugger 的那一行精确地停止测试用例的执行。然而，请注意，如果我们尝试以以下方式调试测试用例，将无法生效：

1cy.visit('https://cypress.io');
2cy.injectAxe();
3
4cy.get('@cookiePolicyBanner');
5
6// 尝试使用 `debugger` 关键字停止代码执行
7debugger;

这是因为 Cypress 是异步工作的，会将命令排队稍后执行。在上面的例子中，所有命令都会被调度，但当我们到达 debugger 关键字时，这些命令实际上尚未执行。这就是为什么我们需要将上述示例改为如下形式：

我们必须在命令之后链式调用 .then 回调，以确保命令确实已完成执行。一旦完成，就会进入 .then 回调，并在正确的时间触发 debugger 关键字。

请注意，需要通过右键单击应用程序并选择“检查元素”来打开 DevTools。DevTools 打开后，我们可以检查应用程序的状态，以调试可能出现的问题。

DevTools

由于测试运行器运行在实际浏览器中，我们也可以访问 DevTools。这有助于我们排查代码问题，并更好地理解某些测试失败的原因。此外，如果我们在命令日志中点击某个已执行的命令，将会在控制台中记录有关该命令的各种信息。

DevTools 控制台中记录的 'cy.get' 命令

使用 Cypress 的 debug 命令

除了熟悉的调试方式外，Cypress 还提供了一些专门用于调试的内置命令，帮助我们排查问题。其中一个命令是 cy.debug。

如何使用 .debug 命令

要使用 .debug 命令，我们只需从另一个命令调用它，或单独调用。如果从其他命令调用，它将返回与传入相同的主体。以下是一个示例：

如果我们将 .debug 命令附加到 @cookiePolicyBanner，它将在获取到元素时停止代码执行，同时我们还会看到该命令被记录到控制台：

控制台中记录的调试信息

如上代码示例所示，.debug 可接受一个可选参数，用于告诉 Cypress 是否在控制台日志中显示该命令。默认值为 true，因此只有在希望关闭此功能时才需要关注该选项。

单独调用 .debug

如果单独调用 cy.debug，它将返回前一个命令的结果；如果没有前一个命令，则直接返回 undefined。此命令本质上为我们设置了一个 debugger 关键字。

1cy.get('button').click();
2cy.debug();

在上面的例子中，cy.debug 将返回其前面的 .click 命令的相关信息。如果在没有其他前置命令的情况下调用它，它仍然会停止代码执行，但由于没有前序命令可引用，会在控制台中记录 undefined。

1// 单独调用时，将返回：
2// Command Name:     undefined
3// Command Args:     undefined
4// Current Subject:  undefined
5cy.debug();

请注意，当命令被记录到控制台时，我们会获得各种元信息，例如它接收的参数或主体，而主体本质上是该命令所附加（或写在其后的）命令。