在 WebStorm 中调试 Cypress [英] Debug Cypress in WebStorm
问题描述
如何在 WebStorm 中设置 Cypress 调试?我可以在代码中使用 debugger 语句来暂停 Chrome 中的执行并使用 devtools 进行调试，但在 WebStorm 中没有任何反应.
How do I set up Cypress debugging in WebStorm? I can get a debugger statement in my code to pause execution in Chrome and debug using devtools, but nothing happens in WebStorm.
无论我是在运行还是调试我的配置，这都是正确的，它只是 npm run cypress(使用我的 cypress open 脚本).在调试运行配置时，我没有在 WebStorm 中的断点上看到复选标记.
This is true whether I am running or debugging my configuration, which is simply npm run cypress (with my cypress open script). When debugging the run configuration, I don't get checkmarks on my breakpoints in WebStorm.
WebStorm 文档是指从菜单中选择您的配置类型，但菜单中没有 Cypress.
The WebStorm docs refer to selecting your configuration type from the menu but there's no Cypress in the menu.
这可以吗?
推荐答案
这是一个过程，但是当你完成后它是值得的.
it is a bit of a process but when you are done it is worth it.
只是一些注意事项:
我在 Mac 上使用它，版本:2019.3.2，但它应该非常相似.
I use it on Mac, Version: 2019.3.2, however it should be very similar.
而且(此时)你必须运行 Chrome 浏览器，你不能附加到电子.
And (at this time) you have to be running the Chrome browser, you cannot attach to electron.
首先，在你的 package.json 文件中，你需要有一些 npm 启动脚本(技术上不是必需的，但让其他一切变得简单简单)这里是我的一个示例:
First, in your package.json file you need to have some npm launch script (not technically necessary, but makes everything else stupid simple) here is a sample of mine:
"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 上运行->编辑配置...
Next you need to setup a debug configuration for npm. On Mac that is under run->Edit Configurations...
使用 npm 模板添加新配置(点击加号并选择 npm)
Add a new configuration using the npm template (click the plus and choose npm)
模板将有一个脚本下拉菜单，选择您的 npm 脚本(我的设置为 cypress:open:qa)然后单击应用.
The template will have a drop down for scripts, select your npm script (mine is set for cypress:open:qa) Then click apply.
现在，当您启动调试器时，它会打开您的 cypress 实例，调试连接到 cypress.但是，您希望附加到浏览器以便调试您的 JS.
Now when you launch the debuger it will open your cypress instance with debugging attached to cypress. However, you want to attach to the browser so you can debug your JS.
在 chrome 中开始任何测试，然后打开一个新选项卡(在 cypress chrome 实例中)转到 chrome 扩展站点并添加 Jet Brains chrome 扩展，这是链接:
Start any test in chrome, then open a new tab (in cypress chrome instance) go to the chrome extensions site and add the Jet Brains chrome extension, here is the link:
这会将其应用于 cypress 运行的 chrome 版本.运行测试时，右键单击 JB 图标并在 WebStorm 中进行检查.
This will apply it to the chrome version that cypress runs. When you are running your test you right click the JB icon and inspect in WebStorm.
这会在您的调试对话框(默认左下角)中打开一个新选项卡.打开在您的 https://yourproj... 选项卡中显示脚本的选项卡.在该对话框中导航到要调试的集成文件，双击它.在断点处打一个耳光，然后离开.
This opens a new tab in your debug dialog box (default bottom left). Open the tab that says scripts in your https://yourproj... tab. Navigate in that dialog to integration file you want to debug, double click it. Slap in a break point and away you go.
这篇关于在 WebStorm 中调试 Cypress的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
