WebStorm JavaScript debug terminal

user_10577976 0
Viewed 250

In VSCode, there is a special kind of terminal that will magically stops on breakpoints on your source code when running commands on this terminal. This terminal is called "JavaScript Debug Terminal" in VSCode.

enter image description here

I'm looking for the equivalent in JetBrains WebStorm IDE.

In WebStorm you can run certain commands like npm run <command> and usually it will be highlighted in green which means you can press Ctrl + Shift + Enter and the command would run in a debug session. However, this option is limited and the green highlight does not always appear, even on supported commands like npm run <command>.

enter image description here
this should be green highlighted, but it doesn't

Note: I could configure node debug options for my case manually (similar to how explained here for typescript) but want to avoid it.

Does an equivalent for a debug terminal similar to what exists in VSCode exists in WebStorm?

jetbrains-ide typescript webstorm node.js
3 Answers

I’m not sure if I understood correctly your question, but WebStorm has a really neat built-in JavaScript debugger functionality.

Disclaimer from offical documentation:

Debugging of JavaScript code is only supported in Google Chrome and in other Chromium-based browsers.

Here’s a quick guide on how to launch it:

  1. Run your app (either via Run Configuration, built-in terminal, or external terminal of your choice)
  2. Get your app URL (e.g. http://localhost:3000)
  3. Open Edit Configurations… from Toolbar (you may have to expand the Run Configurations dropdown menu to display this option)
  4. Add new Run Configuration and select JavaScript Debug
  5. Default settings should be fine, but make sure that yours app URL is correct
  6. Click Apply/OK (Apply won’t close the Run Configuration modal window)
  7. You can now run the Debug Run Configuration in the debugging mode (by bug icon on toolbar or Shift+F9)
  8. Now you can set breakpoints to interrupt code execution

Aaaaand, to answer your question finally - you can use the Evaluate Expression functionality.

When you hit the breakpoint, WebStorm should display Debugging options where you can find calculator-ish icon (or press Alt+F8).

Once the modal window is displayed you can execute whatever you find useful (e.g., single console.log, complex methods or variables).

I hope this helps a little.

Official documentation links:

More on Evaluating Expresssions

Debugging JavaScript in Chrome

JavaScript Debug Configuration

user_176824110
user_26225890
user_191216230
Related