Debugger does not stop at any break-points in React

Avatar
SomethingNameHere
Created

No matter what I try, I cannot stop the debugger at any break-points in a react app. 

 

Here are the steps to reproduce.

  1. Running on debian 12.
  2. Create a new react project with
    1. npm create vite@latest
    2. Select React
    3. Select TypeScript + React Compiler
    4. Select Use rolldown-vite (Experimental): No
    5. Select Install with npm and start now?: Yes
    6. End process with CTRL+C and Close the terminal
  3. Open the project folder in WebStorm
  4. Realize that WebStorm did not create a configuration by default. Manually create a configuration:
    1. Click Edit Configuration at top right drop down menu.
    2. Click + and select npm 
    3. Click Command and select run
    4. Click Scripts and select dev
    5. Click OK
  5. In the editor, add multiple break-points to the code.
  6. Hit Debug ‘dev’ Shift+F9 button at top right. 
  7. The page did not open by default, open the page in firefox. 
  8. No break-points are hit.
  9. Insert surprised_pikachu.jpg

 

Any ideas what I am doing wrong? 

Votes

1

Share

3 comments
Avatar
Elena Pogorelova
Created

Did you try the steps in https://www.jetbrains.com/help/webstorm/react.html#react_running_and_debugging_debug? Start the application by running npm dev (can be done either in terminal or with NPM run configuration, using the gutter icons), and, once the application is up and running, create the JavaScript Debug run configuration with  http://localhost:5173/  set as URL and press Debug. A hint: you can Ctrl+Shift+click on the URL displayed in the NPM run console to auto-create the configuration and start the debugger:
 

See https://www.jetbrains.com/help/webstorm/react.html#react_debug_from_tw for more info.


If this doesn't work for you, could you please share a screencast of the problem with us? This will help us to understand what it looks like on your side.

1
Avatar
Richard65g
Created

I tried the steps as instructed, but I still can’t debug the React app. The server runs fine at http://localhost:5173/, but when I create the JavaScript Debug configuration, the breakpoints don’t work. I also tried Ctrl+Shift+click from the console, but it still doesn’t work. 

https://www.jetbrains.com/help/webstorm/react.html#react_running_fun games_and_debugging_debug

I will send a screencast for further investigation.

0
Avatar
Elena Pogorelova
Created

Unfortunately I failed to reproduce the issue.

A video recording of your steps would be helpful.

0

Please sign in to leave a comment.