WebStorm opens wrong file when debugging - debugging

WebStorm 2021.1
For an unknown reason, WebStorm started picking the wrong file when debugging React TypeScript => JavaScript app. I see the compiled JavaScript file instead of the ts file. What's strange is that the path and the line number are right, but WebStorm opens the wrong (JavaScript) file.
I think that started since I updated to the latest version.
IntelliJ IDEA have a nice workaround around this bug, Show alternative source switcher button. I'm looking for an equivalent in WebStorm. Does WebStorm has such option?
Details:
WebStorm ok
WebStorm stops right on file inside the project.
WebStorm not ok
WebStorm stops on right line and states the right path but opens the wrong file (js file instead ts file)
Line 7 is ok but supposed to be here:
VSCode always ok
The exact same run will work perfectly fine on VSCode:
gitpod
gitpod: https://gitpod.io/#https://github.com/Eliav2/react-use-call-onnext-render/tree/webstorm-test
to clone locally run: git clone --branch webstorm-test https://github.com/Eliav2/react-use-call-onnext-render.git and after that execute the commands in the .gitpod.yml file in the root folder.
To reproduce:
Open example\src\exampleFiles\ClickMeForBreakPoint.jsx and set the break point at line 9. This is file from the test project.
Open src\index.ts and set the break point at line 7. This is file from the linked package.
Start a debugging session. Open port 3000 and once the page is loaded click on the 'ClickMeForBreakPoint' button.
At will stop on first break point. great.
At VSCode at will stop on the right second break point. In WebStorm at will open the wrong file.
Debug the linked package and it will open the right file in VSCode. Clone and debug with WebStorm and it wont open the right file (at least on my local WebStorm).

Related

Not able to type in terminal in vs code

Have installed angular CLI via node js command prompt. However, when I launch terminal in VS code, it doesn't allow to type only. PFA screenshot
PFB terminal setting screenshot
Able to run ng commands from node js command prompt outside vs code.
If your problem is not related to default shell in your terminal. Then you check windows settings. Follow the steps -
Open VSCode file location
Go to Compatibility tab in VSCode properties window
Unchecked Run this program in compatibility mode for: option
see the attached files. Try with this solution, it might help you.
This worked for me:
Remove settings file.
Click on view/terminal.
Select default shell.

Automation of VScode project opening in Ubuntu

I'm complete beginner with linux (Ubuntu) but I have to use it and I'd like to automate some tasks that I do very often.
What I do:
Open VScode and open a project folder
Open new VScode window and open another project folder
Execute redis-server command in console
In second VScode window go to Debug and launch first configuration
and then second configuration (defined in launch.json file in
VSCode)
Open a chromium browser and a specific url
What could be the easiest way to achieve it? Are all the steps executable directly from console? Should I use any 3rd-party programs?

Open file with WebStorm from MacOS finder

In OSX El Capitan, I have set WebStorm to be the default application for opening .js files like so. This successfully opens WebStorm when opening a .js file via finder, or when cmd-clicking on the file from iterm2.
However, when WebStorm opens, the file I've chosen is not opened within WebStorm. The app simply has the same files I've opened before (whether or not the WebStorm app was running when I opened the file).
Using open -a /applications/WebStorm.app <filename> works fine, but it's less convenient than just clicking on the file I want, as I do for file extensions that I've set to open in Eclipse or Sublime.
Is there a way to get WebStorm to open the file I've selected?
Known issue, please follow IDEA-129532 for updates

How can I open a meteor package in terminal and then work on it in Webstorm?

If I've created a new meteor project (through adding packages) in terminal, how do I then actually SEE that project in my editor, Webstorm?
Thank you in advance!
To create a new Webstorm project from existing files:
Open Webstorm
Click FILE
Click OPEN with the folder icon next to it
Find and click the directory that contains your Meteor app and packages
You can obviously open your meteor project in web storm. If you mean how do you open a package to read the code they are stored as sym links by webstorm and you can open them from .meteorite in your home directory, or where ever you have installed it of you want to dig into the meteorite package code

Debugging TypeScript in WebStorm using the remote debugger

I cannot get remote debugging to work for TypeScript files inside WebStorm. I am currently using WebStorm 6.0, TS compiler 0.8.3 and the Chrome JetBrains plugin 0.5.7.
For debugging purposes, the server I am using is a simple python server ran using the command -m http.server on my local machine in the same directory as my source files.
Wen I put a breakpoint on the compiled JS files resulting from compiling the original TypeScript files, WebStorm opens the correct remote TypeScript files, but in read only mode (so at least the remote debugging for JS files is working, as well as the .js.map files).
The problem comes when trying to put the breakpoints directly in the original TypeScript files, as the debugger doesn't trigger at all.
I cannot set the remote file url inside WebStorm as the Scripts tab inside the debugger lists only JS files.
I solved this issue by setting the remote directory of the entire project, and not individual files.

Resources