I am working on a Vue js application but am having difficulty getting it to run/debug within IntelliJ. I am currently running it from the command line but I'm interested in getting it to debug in IntelliJ. Not many tutorials out here on getting this set up to work. Is there anyone that has experience in setting up this framework and IDE?
Steps are rather straightforward and described in blogpost:
First, install the JetBrains IDE Support Chrome extension. This will bind the browser debugger environment with IntelliJ in real-time.
start the server with npm serve (can be done from a gutter in package.json):
create a new JavaScript debug configuration, specify the URL your app is running on (usually http://localhost:8080) in it, put the breakpoints right in the source code, and start the debug session.
See also https://blog.jetbrains.com/webstorm/2019/03/get-started-building-apps-with-vue-js-in-webstorm/ for some hints on working with Vue.js in IDEA. And https://medium.com/dailyjs/stop-painful-javascript-debug-and-embrace-intellij-with-source-map-6fe68eda8555
You can add "Run Configuration" for any project to run in Intellij. For this, you must have a run script in package.json.
Refer below link for a screenshot. NPM Run Configuration Sample:
Choose NPM and give like this. Once done, you are all ready for clicking the RUN button available in the toolbar to run the project
Related
I have my testcafe test which is running well via terminal with
testcafe chrome jira-web-front\src\test\script\testcafe
I would like to be able to run it inside intelliJ js editor by clicking on the play button:
When I execute my test by clicking on the green play button I have:
I have some jest tests also in my project.
I tried to install intelliJ testcafe plugin but it didn't help.
Any idea about this?
Thanks
The logic currently used by JavaScript support plugin for detecting what test runner is available for a given test file is based on dependencies declarations in package.json nearest to this file: it looks for known test runners listed there and tries to run the most suitable one. As IDEA
doesn't provide any support for TestCafe (https://youtrack.jetbrains.com/issue/WEB-30315), you can't expect it to run TestCafe from a gutter; it runs your tests with jest because you have it in your dependencies list.
To run test using the run configuration provided by testcafe plugin, you need right-clicking the test in editor:
This plugin doesn't support running tests from gutter, neither it supports debugging.
Note that you can use VS Code recipes to debug TestCafe in IDEA. Namely, you need Node.js Run configuration like the following:
where JavaScript file: is set to a path to your locally installed testcafe module, e.g. node_modules\testcafe\bin\testcafe.js, and Application parameters: are testcafe cli args, like
chrome myTestFile.js
I am using webstorm 10.0.2 and have used the bangular yeoman template to generate a project. I can run the gulp commands via the gulp window, and I can set a breakpoint in the gulpfile.js and it will hit it, but I can't seem to get it to hit a breakpoint in my server.js
It looks to me like the gulp file is launching another instance of node and thus when you do "debug" from webstorm you are just debugging the gulp.
I also tried with another project using yo hottowel but get the same thing - I am unable to debug the actual application through webstorm.
Can anybody tell me how to configure webstorm so that I can debug the actual server side node code but still use the gulp build tool?
I contacted JetBrains support back in May 2015 and their response was:
It seems this cannot be done quickly. In short, the problem is that serve-dev task starts new process (nodemon) that takes app.js
There is no workaround how to debug such spawned processes right now. We would really appreciate if you'll submit a feature request about it in our YouTrack: https://youtrack.jetbrains.com/issues/WEB
The only way you can try to avoid it - try to create a separate task that will run app.js directly without nodemon process and debug this task instead.
It seems the best option is to use https://www.npmjs.com/package/gulp-node-inspector
I recently started to use WebStorm and before this I used to use nodemon as a supervisor, so it watches any code change and restart the server.
How can I reach the same effect running node by the IDE?
Thanks!
[EDIT]
While there's no 9 version/live edit I'm posting my solution:
It's just have nodemon installed globaly and used it as a Node Parameter in the project configuration.
More details and screenshot below:
Discover where is the nodemon's path;
Here (OSX) is "/usr/local/bin/nodemon" and it could be discovered using "which nodemon" (on terminal);
Use this path in the Node Parameter field;
Go to Run > Edit configurations, choose your configuration below the Node.js option at left;
Screen shot for detail:
https://photos-4.dropbox.com/t/1/AAC1WJBhh1RUnIBZEaG3YQ80iMswJH2XmFqb4GtiYwqj2A/12/11986044/png/1024x768/3/1413997200/0/2/Captura%20de%20tela%202014-10-22%2013.52.47.png/exYBAGzU3uZwj45i3XxZkgPKb_mfyL_O_q3EFRK5pFk
Possible since WebStorm 9 - see http://blog.jetbrains.com/webstorm/2014/08/live-edit-updates-in-webstorm-9/
I was working with Node on Visual Studio Professional 13, and I soon realized that restarting my server for every change in code was becoming a hassle.
So I did some research and discovered that most people used the nodemon to automatically refresh their server. Although the tutorials online used command line to install and run their server with nodemon when I used VS's interface to generate my express project and download nodemon.
My problem is that when I run my server, the server doesnt restart when I update my code. My question is how can run my server through nodemon if I am coding my project using VS
this link also shows people with the same question as me, but the solution in it isn't that clear
https://nodejstools.codeplex.com/workitem/545
the following works for me:
open your Project Properties ("PROJECT" > "YourApp Properties...")
point the "Node.exe path" to nodemon.cmd (click on the button right
of the input field, enter "%AppData%\npm\" in the adress bar, show
all files, select "nodemon.cmd", save the properties form)
start debugger, or use "start without debugging" (Ctrl+F5)
The accepted answer didn't work for me, as there was no nodemon.cmd file in my Nodemon installation. Perhaps things have changed.
This did work, however:
In the project properties, I simply set the Node.exe options to "C:\Program Files (x86)\nodejs\node_modules\nodemon\bin\nodemon.js" server.js
Note that my TypeScript file is server.ts, but I used the compiled filename server.js in the Node.exe options.
Try to use last version of NTVS(Node Tools for Visual Studio).
Now when I run app in debug and change some code server restart and apply changes.
It's amazing in new version!
I'm having a hard time finding the right combination of settings to allow me to debug my node.js sails application in webstorm.
These are the settings I've tried using, both configurations work (as in sails starts) but none is stopping at breakpoints.
If I go to the breakpoints menu and turn on 'Any exception enabled' - it does stop for exceptions, but never hits my breakpoints.
Any ideas? I'm on webstorm 7.0.1 and Node 0.10.18 / Sails 0.9.7
You don't need the --debug in node parameters. Here is my config and i am on 7.0.1 and node 0.10.4
Let me know if it helped. Also, you are hitting the bug to run debug right?
Also, can you please invalidate caches/ restart? That helps sometimes. Here is a snapshot in the file menu.
I had the same problem and simply installed sails local to the project and everything worked fine. Not sure why the configuration can't resolve the globally installed sails as that is the error I was getting, but the local install works fine. I should investigate further, but I'm lazy :)
When you open a new project on WebStorm, it detects the package.json file and it will ask you to install the dependencies locally. After that, by using the configuration mentioned before (not necessarily by using sails lift but using app.js directly instead), you can debug you application from WebStorm. Another way to do it, is by using this tool, that works like a charm: https://github.com/node-inspector/node-inspector :)