webstorm - 在 WebStorm 中调试 Cypress

Question

如何在 WebStorm 中设置 Cypress 调试？我可以得到一个 debugger在我的代码中声明暂停 Chrome 中的执行并使用 devtools 进行调试，但在 WebStorm 中没有任何 react 。

无论我是在运行还是调试我的配置都是如此，这只是 npm run cypress (使用我的 cypress open 脚本)。在调试运行配置时，我在 WebStorm 中的断点上没有得到复选标记。

WebStorm 文档是指从菜单中选择您的配置类型，但菜单中没有 Cypress。

这是可能的吗？

Answer 1

这是一个过程，但是当您完成时，这是值得的。

只是一些注意事项:

我在 Mac 上使用它，版本:2019.3.2，但它应该非常相似。

而且(此时)你必须运行 Chrome 浏览器，你不能附加到电子。

首先，在你的 package.json 文件中，你需要有一些 npm 启动脚本(技术上不是必需的，但让其他一切变得简单)这是我的一个示例:

"scripts": {
    "start:ci": "serve --no-clipboard --listen ${PORT:-8080}",
    "cypress:open:localhost": "ENV=localhost npm run cypress:open",
    "cypress:open:dev": "ENV=dev npm run cypress:open",
    "cypress:open:qa": "ENV=qa npm run cypress:open",
    "cypress:open:staging": "ENV=staging npm run cypress:open",
    "cypress:open:production": "ENV=production npm run cypress:open",
    "cypress:open": "cypress open"
  }, 

接下来，您需要为 npm 设置调试配置。在 Mac 上运行->编辑配置...

使用 npm 模板添加新配置(单击加号并选择 npm)

该模板将有一个脚本下拉菜单，选择您的 npm 脚本(我的设置为 cypress:open:qa)然后单击应用。

现在，当您启动调试器时，它将打开您的 cypress 实例，其中调试附加到 cypress。但是，您希望附加到浏览器以便调试 JS。

在 chrome 中开始任何测试，然后打开一个新选项卡(在 cypress chrome 实例中)转到 chrome 扩展站点并添加 Jet Brains chrome 扩展，这是链接:

https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji?hl=en

这会将其应用于 cypress 运行的 chrome 版本。运行测试时，右键单击 JB 图标并在 WebStorm 中进行检查。

这会在调试对话框(默认左下角)中打开一个新选项卡。打开在您的 https://yourproj 中显示脚本的选项卡... 标签。在该对话框中导航到要调试的集成文件，双击它。在断点处打一个耳光，然后离开。