Since the WebStorm debugging extension for Chrome is deprecated, how would I debug a Cypress instance? How do I select the correct Chrome instance (the Cypress one) to attach to in the "JavaScript Debug" config?
You can try attaching via the Attach to Node.js/Chrome run configuration (similar to VSCode recipes in Debugging Cypress tests in Visual Studio Code), but, as I mentioned in my comment at Debug Cypress in WebStorm, it worked for me neither in Webstorm nor in VSCode...
Did you try the Cypress Support Pro plugin? According to https://docs.cypress.io/guides/tooling/IDE-integration#IntelliJ-Platform, it supports debugging from the IDE
Related
I have a project build in TypeScript and I would like to use cypress run to run my unit test. Everything works when I trigger command line from terminal, but how can I set up cypress run with WebStorm IDE under Run/Debug Configuration? The only possibility is to set up npm command but my project is using pnpm not npm.
So how can I set up cypress run under Run/Debug configuration?
WebStorm doesn't provide any special support for Cypress (feel free to upvote and comment WEB-32819 to increase its priority and to be notified on updates). But you can still use Node.js run configurations to start your scripts.
I'd also suggest trying a third-party Cypress-Pro plugin
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.
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.
The WebStorm docs refer to selecting your configuration type from the menu but there's no Cypress in the menu.
Is this possible to do?
it is a bit of a process but when you are done it is worth it.
Just a couple notes:
I use it on Mac, Version: 2019.3.2, however it should be very similar.
And (at this time) you have to be running the Chrome browser, you cannot attach to electron.
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"
},
Next you need to setup a debug configuration for npm. On Mac that is under run->Edit Configurations...
Add a new configuration using the npm template (click the plus and choose npm)
The template will have a drop down for scripts, select your npm script (mine is set for cypress:open:qa) Then click apply.
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.
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:
https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji?hl=en
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.
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.
There are two plugins that let your run cypress tests from Webstorm. Both let you select a single test and run it then see the result directly in webstorm.
The Pro version allow to debug tests in the cypress runner.
https://plugins.jetbrains.com/plugin/13819-cypress-support (free)
https://plugins.jetbrains.com/plugin/13987-cypress-support-pro (paid)
The pro version debugging capabilities:
You can run cypress as node job in webstorm.
For this:
Set the path to the cypress executable file
Select your folder as working directory
Add run options run --spec cypress/integration/Filters.feature
I am using cucumber so am giving a feature, if you use mocha use your run parameters the same as in the console.
Settings
I am developing a web app in Dart using Webstorm as IDE. After upgrading from Dart SDK 2.2 to Dart SDK 2.3 I noticed that all breakpoints I set in Webstorm are ignored (although the app seems to run properly in Chrome) That breakpoints are correctly marked as a "red circle" but unlike the previous SDK they miss the "tick" inside (which I think means they are not recognized by Chrome).
I tried to "repair cache" and "upgrade dependencies" but breakpoints still don't work.
That's the pubspec.yaml dev_dependencies:
dev_dependencies:
build_runner: ^1.4.0
build_test: ^0.10.7+3
build_web_compilers: ^2.1.0
Here is the "webdev serve" command:
/dart/2.3.1/dart-sdk/bin/pub global run webdev serve web:53321
Here is the "webdev serve" command result:
[INFO] Serving `web` on http://localhost:53321
[INFO] Running build completed, took 351ms
[INFO] Caching finalized dependency graph completed, took 177ms
[INFO] Succeeded after 536ms with 0 outputs (0 actions)
Here the versions of envolved softwares:
- O.S.: macOS High Sierra 10.13.6
- Chrome: 74.0.3729.169
- Webstorm: 2019.1 - Build 191.7141.49
- Dart SDK: 2.3.1
- Dart webdev: 2.0.5
I'm trying to figure out if the issue is related to Webstorm, Dart SDK or Chrome. I don't exclude that I miss some new configuration due to the Dart SDK upgrade. Downgrading back to Dart SDK 2.2 everything works fine. Thank you for your hints.
Reproduced, logged as WEB-39095. Please follow it for updates
The bug was in webdev 2.0.0 - 2.0.6. It is fixed in webdev 2.0.7. You may run pub global activate webdev to get the latest version. You might need to close/open the project in the IDE to get it working.
I deployed my MVC project to IIS and now I need to debug code by attach process but it not work.
These are steps that I did to debug:
Run my solution with Visual Studio Pro 2017 as Admin
Debug -> Attach to process...
Attach w3wp.exe process
Restart my site in IIS Manager
Run my site in browsers to debug
After above steps, my breakpoints always warning:
The breakpoint will not current be hit. No symbols have been loaded
for this document.
I can debug my code in the other PC with above steps but this way have problem with my laptop.
How can I fix this?
Thanks all.
I resolved my problem by:
Debug -> Options...
Uncheck at "Enable Just My Code"
I installed the newest Visual Studio Professional 2017 (15.8.5) to my laptop. In this version, above option is checked as default.
I'm trying to get debugging to work on ff/chrome. I've checked all the post that come up when you google.
What I've done:
- setup a ff profile
- setup a in place deployment and double checked the remote urls..
- all plugins are enabled (including Javascript debugger)
As it seems the webstorm debugging extension was not installed in firefox (or chrome). I cannot find anything on how to get it installed. (I've allready tried re-installing Webstorm)
When I debug a file, firefox opens, but displays no page and the url-bar is empty..
I'm using Webstorm 4.0 and Firefox 11
Although this post might be outdated:
You need to install the JetBrains IDE extension in the corresponding browser.
When this is done, check if the same host and port are specified for Webstorm as well as for the extension as well.