作为一名前端开发工程师，你是否常常为 Cypress 测试代码调试烦恼不已？如果是，那么本文将为你介绍如何使用 chrome://inspect 来简化 Cypress 调试工作。
什么是 Cypress？
Cypress 是一个开源的前端自动化测试工具，它能够运行端到端的测试，帮助开发人员快速定位并修复代码中的问题。
Cypress 调试的困境
Cypress 是一个强大的工具，但在编写测试代码、运行测试用例时，可能会遇到一些问题，如遇到错误的断言或测试用例无法通过。这就需要进行调试，但 Cypress 缺乏一些传统调试工具的支持。我们不能像开发其他应用程序一样，在浏览器控制台上打印日志或断点调试。因此，解决 Cypress 调试问题变得不那么简单。
使用 chrome://inspect 调试 Cypress 代码
chrome://inspect 是谷歌浏览器自带的一个调试工具，可以用来调试运行在浏览器中的 JavaScript 代码，它提供了一种简单而高效的方法，供我们使用 DevTools 来调试运行中的 Cypress 测试代码。
使用 chrome://inspect 调试 Cypress 代码需要以下步骤：
步骤一：启动 Cypress 测试代码
打开命令行，进入项目目录，并运行以下命令
$ npx cypress open
步骤二：开启 remote debugging
在 Cypress 运行窗口中打开要调试的测试代码。接着，在 Cypress 运行窗口中选择要调试的测试代码并单击运行。对于大多数集成测试，你只需要运行 Cypress 的Electron 实例。请记住，在这种情况下，我们没有启动浏览器。
现在，我们需要通过运行以下命令列出所有正在运行的 chrome 浏览器实例：
$ google-chrome --remote-debugging-port=9222
您会看到类似下面这样的输出：
$ Google Chrome is already running, but is not responding. To open a new window, first close the existing Chrome process, or restart your system. $ google-chrome --remote-debugging-port=9222 [11747:11747:0426/082919.670665:ERROR:browser_main_loop.cc(1419)] Unable to open X display.
步骤三：打开浏览器窗口并导航到 chrome://inspect
导航到 chrome://inspect:
$ google-chrome --remote-debugging-port=9222 "chromium-browser --noerrdialogs --disable-gpu --remote-debugging-port=9222"
步骤四：在 DevTools 中打开测试代码
现在，您可以在 DevTools 中打开测试用例的源文件，如下所示：
示例代码
以下是示例代码，它演示了如何在浏览器中调试 Cypress 中的测试代码：
-- -------------------- ---- -------
----------------- ------ -- -- -
---------- ---- ----- ------ -- -- -
------------------
-----------------------------------
--------------------- - ---------------------
--------------------- - ------------------------
--------------------- - --------------
-------------------------- -------------
--
--总结
Cypress 是一个非常有用的测试工具，但调试测试代码可能会让人感到困惑。这时，chrome://inspect 提供了一个非常好的解决方案，可以让开发人员在 DevTools 环境中对他们的 Cypress 测试代码进行断点调试和日志输出。这个技巧对于 Cypress 测试代码的调试非常有帮助，它可以大大加速开发人员找到和解决问题的速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cf8a8fb5eee0b5256cb045