Autocomplete does not work correctly for me, for example :
I tried adding node.js globals but I don't see it in the settings :
Any idea how I can fix this?
Notes :
When I run the app everything runs fine.
I am using nodejs 4.2.4 for Windows 64 bit on Windows 10.
I am using "Empty Project".
I am using WebStorm 11.
In WebStorm 11
You need to enable the Node.js Core library.
Go to Preferences > Languages & Frameworks > Node.js and NPM and click "Enable" under Code Assistance.
To enable code assistance for Node.js core APIs (and that means you’ll get smart code completion, parameter info and navigation to source code), the only thing you need to do is go to Preferences | Languages & Frameworks | Node.js and npm and click Enable under Code Assistance.
An even quicker way to do the same is to use the Enable Node.js Core library quick-fix. Press Alt+Enter on the highlighted usage of one of the Node.js core modules in the code and then press Enter.
Related
I want start to implement an Outlook 365 Web Add-In.
After all, I decided to create it with React.
I already tried to set up some project's but all of them have a lot disadvantages:
Visual Studio 2017 Office 365 Outlook Project:
Pro:
Client debugging support (quite important)
Con:
As it's a Web-Project, hosted by IIS, I cannot work with NPM (YARN) and Webpack (without lot of frustration) and compile ES6, JSX code to ES5 and debug that stuff
Visual Studio Code:
Pro:
Node and NPM Support
Can easily work with React and ES6/7/JSX
Contra:
No debugging support for client side
Question
However MS has written in it's own documentation that till this day we're unable to debug JS-Code with Visual Studio Code in Outlook, is there maybe an comfortable alternative to do it?
I don't want to give up work with React and ES6 so is there a way to do it with VS-Web Projects and IIS?
What is in your opinion the best work flow for my needs?
Thank's!
There is a middle ground where you can use VS Code but still have decent (albeit not quite as tightly integrated as in VS debugging). The trick is just to make sure that you have Visual Studio, but it needn't be a VS project that you are debugging:
If you are on Outlook for PC / Desktop: See https://dev.office.com/blogs/attach-debugger-from-the-task-pane. The article shows you how to attach in the context of Word, but the same applies to Outlook (and instead of using the "Personality Menu", you can just right-click and see the same "attach debugger" option).
If you are debugging a web version of Outlook, that's even easier: just open up your browser's F12 tools.
Hope this helps!
I am new to web development (am a backend developer normally).
I am trying to set up a development environment to reflect my current workflow. I develop Java in IntelliJ Ultimate and I like how I can step through and debug.
The current front end development team start npm and then use Chrome developer tool window to debug.
Is there a way to connect WebStorm to this process so that I can set a break point in WebStorm instead of using the Chrome developer tool window?
I have installed the JetBrains extension in Chrome and I cannot find how to do this on their site.
Again, please excuse my ignorance as I am very new to front end development. but if I can get this functionality it would be fantastic.
Any help or guidance would be very much appreciated.
Create JavaScript Debug run configuration per instructions at https://confluence.jetbrains.com/display/WI/Starting+a+JavaScript+debug+session#StartingaJavaScriptdebugsession-Startingadebugsessionwhenusingadifferentwebserver, add breakpoints, start your server via npm, then select the configuration above and press Debug.
See also these videos:
Quick start: https://www.youtube.com/watch?v=a-IsnxZpRrQ
Breakpoints, stepping, watches: https://www.youtube.com/watch?v=CdXoeVRN1JU
You need chrome extension that you already installed here is link also ExtensionJetBrains IDE Support
once you install know enable breakpoint
here is the way to do all step you can see shortcut key too
once you enabled breakpoint then just click near to line number to set breakpoint
another option go to File-> setting and enable breakpoint
when you run your code open inspect as well then you will see this magic :D :)
I am using Visual Studio Code for a javascript project. You can set breakpoints and step through and debug very easily the code that runs in nodejs. Is there any way to allow breakpoints and debugging for the client side, browser running code?
Debugging via console.log gets old real quick.
For debugging in Chrome there is the Visual Studio Code: Debugger for Chrome extension. You can find this extension in the marketplace, search for debugger as told in the debugging manual. Unfortunately there is (currently) no support for other browsers,
Debugging node.js works out of the box, see the debugging manual above or John Papa's blog post.
Debugging both client and server (as Phil commented) is not possible at least in my opinion since you need to have two different launch configurations, sorry.
You should use developer tools which all modern browses have (F12).
I prefer chrome because with workspaces and you can inline edit your code in browser.
By opening you project in chorme Browser and using chrome DevTools.
You can debug it whatever you want.
steps:
Open your project (with url).
Open DevTools (F12)
Choose the "Elements" and choose the Element
You can see "Event Listeners" on the right panel , Select what you needed
And then, You can right click the event you, Select "Show function defination"
Enjoy yourself !
If you means Debug Nodejs ,As I known there's A npm package named "debuger"?
Another technique is to use the Visual Studio Code: Debugger for Chrome extension. Save the contents of your launch.json config for node.js and delete it. Then create the Chrome launch.json. Combine the two and you can debug either the server or the client in Code (but not both at the same time).
To debug the client, the server must be running, so from a command prompt use the "node" command that starts the server. In Code launch the Chrome debugger and debug the client side.
Hoping someone can help. I've been through every forum, the online help, every youtube, and every example to find an answer. This either means it's incredibly nuanced or incredibly simple and I'm just missing something that seems to work for everyone.
Nodeclipse/chromedevtools failed to connect to Standalone V8 VM
( Check Help (F1) and Support http://www.nodeclipse.org/#support )
. Info:
connect timed out
I get the above error when I use nodeclipse to debug a node app using the right-click menu on the project. DEBUG AS -> NODE APPLICATION.
When I RUN AS -> NODE APPLICATION, it launches just fine. But when I run with debug-as, I get that error and the debug info looks like.. (or not.. I can't post images... but it terminates the V8 VM entry)
I've installed JDK 8, the most recent NodeJS, the express packages, enide studio from nodeclipse.org, and followed the instructions to build a starter app (new - express project), then attempted to debug that app with debug-as->node application.
I can successfully debug a node instance (my actual project) that I start from the command line, and it lets me step through the virtual project files, etc.. but I was looking for the "all in one" nature where I am debugging the same files I'm editing and can launch/test it all from within eclipse.
Win 7, 64bit
JDK 1.8.0_11 64bit
node 0.10.29 64bit
nodeclipse/enide studio 2014-011-20140228-win64
I've tried it with JDK1.7 as well (64 bit).
Any and all help would be appreciated.
Regards,
Zig
While the issue happened before it is hard to reproduce on other machines.
More stats is needed.
http://www.nodeclipse.org/#support gives links to Online Help (the same as built-in by F1)
in particular
https://github.com/Nodeclipse/nodeclipse-1/blob/master/org.nodeclipse.help/contents/run.md
and https://github.com/Nodeclipse/nodeclipse-1/blob/master/org.nodeclipse.help/contents/debug.md
Have you tried to
to run node --debug-brk app.js first, and then again in Eclipse/Enide Studio ? #107
I've had some luck getting around this error by:
Right clicking in the server and selecting run as -> node application
Navigating in Firefox to the address where my server is listening
Stopping the server in the console
Right clicking in the server and selecting debug as -> node application
I also created a new perspective called "visualstudio" and do no switch perspectives between development and debug (though I doubt perspectives have much to do with the issue)
Using this approach, I get an interesting anamoly where the debugger breaks on line 1 when the server starts, and I then have to click resume. However, after resuming, execution only stops when a request hits a breakpoint.
You have to run the command to debug the node.js file:
node --debug-brk yourfilename.js (this is not working now)
node --inspect-brk yourfilename.js
Can anyone provide a short list of steps on how to connect a Meteor app to the WebStorm debugger please?
WebStorm is the only IDE with native support for debugging Meteor server code - check this video. Even on Windows, debugging is very simple:
WebStorm 9+
Go to Run --> Debug --> Edit configurations... , click the plus sign, click "Meteor". You can add environment variable like ROOT_URL if you need to.
WebStorm older than 9
This answer is kept only for historical purposes. You should upgrade WebStorm.
On older WebStorms, you used to have to create a Node.js debugging configuration.
on the server, export the environment variable NODE_OPTIONS=--debug=47977. For instance,
NODE_OPTIONS=--debug=47977 meteor # Linux/Mac
set NODE_OPTIONS=--debug=47977 & meteor` # Windows
create a WebStorm/PhpStorm Run/Debug configuration using the port above (47977) and the server host. Leave 127.0.0.1 if you're debugging locally.
in WebStorm, Run -> Debug <myapp>, or press Shift+F9. Make sure that you see "Connected to <your host> in the Debug panel
Now you can set breakpoints, have access to local variables etc.
For client debugging, just use the Chrome debugger, or Firebug.
Troubleshooting
Process disconnected unexpectedly - this happens when meteor restarts automatically because of lack of specific support for Meteor. Just Run -> Debug <myapp>, or press Shift+F9 again.
you can't connect to the server - make sure the firewall rules allow incoming connections to whatever port you chose for the Node.js debugger (47977 here).
The other answers are now out of date. Don't add a Node.js debug configuration as described above, or bother with spyjs.
If you're using Webstorm 9.0, it's as simple as going to Run --> Debug --> Edit configurations... , click the plus, click "Meteor".
WebStorm may also ask you to install a browser add-on, but that's just for client-side debugging; just add a breakpoint in the server-side code and you'll see it works out of the box.
JetBrains have updated the video which was linked to in Dan Dascalescu's answer above, and it shows you the process I just described.
For applications using webpack:webpack, using WebStorm's Meteor debug profile did not seem to work.
My setup uses webpack:webpack v1.0.12, Meteor v1.3.0 and WebStorm 2016.1, but is likely to work with later versions (note that a fix for just this issue was released in v1.0.12, so earlier versions are likely not to work with this procedure).
Here is what I did in order to get it working:
Create a webpack.json file at the project root.
It should include the devtool config, which generates source maps that assist in debugging. The rest may be changed according to your specific setup.
{
"root": "src",
"devServer": {
"host": "localhost"
},
"devtool": "source-map"
}
Create a debug setup:
Node.js Remote Debug, port 5858 (the port is configurable).
Run meteor debug
You may specify a port using --debug-port <port number>.
See meteor help debug for the full details.
Connect WebStorm to the debugger
start the debugger
the status message should indicate that it is connected. Scripts should available in the Scripts tab.
the server should be running in the console
Hit your breakpoints and rejoice.
WebStorm 9 will have Meteor support. While WS 9 isn't released yet (as of Oct 7, 2014), there is an early access program for WS 9.
Read the JetBrains WebStorm blog which describes some of the Meteor support features and includes a brief video.
I'm new to Meteor, WebStorm (and JavaScript for that matter) and have been using the WS 9 EAP build 138.2406 for a couple of weeks. I can launch my project from within the IDE, set breakpoints, walk though code, inspect values, jump to definitions, and issue completions. It's quite helpful.
You can try spyjs plugin for Webstorm: http://blog.jetbrains.com/webstorm/2014/04/spy-js-webstorm-secret-service/
There is a bug with old versions of Webstorm to debug server-side of Meteor 1.2.x. The latest version of Webstorm (11.0.3) released on Dec 24th, 2015 fixed it. Release notes can be found here: https://confluence.jetbrains.com/display/WI/WebStorm+143.1559.5+Release+Notes
I am now able to debug without any problem from Webstorm :)