Question

如何在WebStorm中设置赛普拉斯调试？我可以在代码中得到一个debugger语句，以暂停Chrome在Chrome中的执行并使用devtools进行调试，但是WebStorm中什么都没有发生。

无论我是运行还是调试我的配置，这都是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 ...标签中显示脚本的标签。在该对话框中导航到要调试的集成文件，双击它。拍断点就走了。