We Keep Coding

Can I profile NodeJS Applications using Visual Studio Code?

I can successfully connect the VS Code debugger to my remote NodeJS target using the Chrome protocol. I believe that same protocol supports profiling and performance measurements as it is easy to do from Chrome Dev Tools, but I am not sure it is something I can do from VS Code directly.
Is there any support for this feature ? How can I use it ?

Visual Studio Code 1.45 (April 2020) should help, as it integrates Javascript debugging capabilities, including profiling:
New JavaScript debugger
This month we've continued making progress on our new JavaScript debugger.
It's installed by default on Insiders, and can be installed from the Marketplace in VS Code Stable.
You can start using it with your existing launch configurations by enabling the debug.javascript.usePreview setting.
Here are some new features added this month:
Profiling Support
You can capture CPU profiles from your Node.js or browser applications by clicking the new "Profile" button in the Call Stack view, or using the Debug: Take Performance Profile command.
Once you do, you can choose how long the profile will run: until you stop it, for a length of time, or until you hit another breakpoint.
After the profile ends, it's saved in your workspace folder and visualized in VS Code.
When you open the profile, code lenses are added to your files containing performance information at a function level and for certain 'hot' lines.
Unlike profiles captured in many other tools, the recorded profile is sourcemap-aware.
cheesus mentions in the comments having an problem with the line numbers in the profiler output.
Hence microsoft/vscode-js-debug issue 559:
Turns out this is because that location is inside a function that only exists in the compiled code.
We actually do try to source-map it back into the original file, but there's no mapping at that location to use.
If you change your target to es6 or newer -- which you can do nowadays unless you're targeting Internet Explorer or Node versions <= 4 -- TS does not need to generate this stuff and line numbers work.
Your code will also run faster. Here's the latest mappings
This debugger only supports Node 8 and above.
Due to the fact that this bug is only present when targeting old JavaScript versions when using in-place transpilation on code compiled for a version of Node older than what the debugger itself supports, and the complexity involved in fixing this, I will close this issue as out-of-scope.

There is no plugin/support that I am aware of for initiating the profiling, or heap dumps, etc that are available in Chrome's Dev Tools. But, the VS Code debugger can work alongside the dev tools debugger.
Start from VS Code, and start debugging as you would. Then open dev tools from any tab in the Chrome/Chromium browser, and look for the green icon indicating a node.js debugging process is running (manually done via node --inspect):
.
Click this green icon and you'll have many of the browser dev tools features for debugging the node.js process, specifically the memory and profiler tabs.

Yes, There are many ways.
go to package.json and set:
{
\\ other information
"scripts": {
"debug": "node --inspect-brk"
}
}
after, run use command: npm run debug yourFile.js
or
you can execute in oneline node --inspect-brk yourFile.js
after this:
open chrome and go chrome://inspect
wait for a few seconds, to appears a remote target and click inspect
you can use debbuger; in your code to make a breakpoint.
To learn more go to the documentation.
In alternative you can use a plugin for VS code 'Debugger for Chrome' and follow the guide.

I suppose it worth mentioning here that you can profile nodejs app using plain console.profile and console.profileEnd. It will generate .cpuprofile file in the project root folder which you can open then with VSCode. E.g. I used it to profile Mocha tests.

How the hell does Google Chrome know what/where my sources are and how to interpret them?

I'm currently playing around with Haxe to create a simple little web framework. Everything but the front-end framework (Yahoo Pure) is being written from scratch using a combination of Haxe/HTML/CSS. I'm writing it in FlashDevelop, using USBWebServer, and a couple of custom build/deploy scripts to copy the output JS to the UsbWebserver host directory, and to launch Google Chrome and point it at http://localhost/myserver/whatever.
For all intents and purposes, my development environment is a jumbled up mess of scripts and files in a bunch of different directories. The output directory on the server has absolutely zero Haxe code, just the generated javascript and PHP files that came out of the Haxe compiler.
Yet somehow, by some black magic, the Google Chrome developer tools (opened with F12) have a "Sources" tab which
Correctly points to my Haxe source files in the write directory
Displays the sources with simple syntax highlighting
Allows me to add breakpoints in the haxe code itself
AND lets me see the value of variables (included objects) by highlighting them with my mouse when a breakpoint is reached (like you'd see in Visual Studio or other fancy IDEs)
So how the hell can Google Chrome do this? My "launch script" is just this:
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" "http://localhost:8080/mysite"
That might explain how it finds my source directory, because that script is run from there. That doesn't explain how Google Chrome understands Haxe, or knows how to match the generated javascript code with the source Haxe code on a line-by-line basis.
I don't have any Haxe plugins installed. The only development-related plugins I have are Advanced REST client, and Javascript Errors Notifier (which just adds a little visual indicator when there's a javascript error)
This all seems like (extremely useful) black magic.

I've never used Haxe, but I would assume that it's just spitting out regular Source Maps (maps source variables/lines to compiled), which are interpreted by all major browsers. To learn more about it, I suggest this article: html5rocks.com/en/tutorials/developertools/sourcemaps

How do I use WebStorm for Chrome Extension Development?

I just bought WebStorm 5 and so far have been really enjoying its Inspection features. One hitch I've run in to when developing my Chrome extension is that it doesn't recognize the chrome variable:
Is there a way I can add the chrome variable to the Inspector so that it can autocomplete as I type? I'm guessing I would need to add Chromium as an External Library but I'm unsure where to start.

First Time Setup
Open the Settings dialog (File > Settings)
Click Languages & Frameworks > Javascript > Libraries
Click Download
Make sure TypeScript community stubs is selected
Select chrome from the list (you can find it quickly by just typing chrome)
Click Download and Install
Click OK to close the Settings dialog.
Steps 2-6 illustrated below:
In Subsequent Projects
In any subsequent project, you just:
Open the Settings dialog again (File > Settings)
Click Languages & Frameworks > Javascript > Libraries again
Check chrome-DefinitelyTyped
Click OK to close the dialog.
Steps 2-4 shown below:

UPDATE 2:
It's now supported out of the box, see the complete answer below.
UPDATE:
There is a more complete stub file that can be added as a library to get code completion. It's a part of the Closure Compiler project. Download chrome_extensions.js.
See also the feature request for WebStorm to add this library automatically from the IDE.
You need to get the JavaScript library for the Chrome API somewhere, or use a stub to get basic completion.
Library or a stub can be configured in WebStorm.
I found the JSON files with the Extension API. One can write a script that will build JS stubs from these JSON files, the stubs can look like the basic version linked on GitHub above, but with the automatic generation they will contain almost complete API and JSDoc comments so that documentation like here can be viewed directly in the IDE.
JSON => JavaScript object stubs mapping is pretty straightforward in this case and writing this kind of converter should not take more than a day (or several hours for the skilled coder).
If someone goes ahead and implements it, please post the link to the results here.

WebStorm should one day accept json definitions directly to enable autocomplete for the functions defined. Meanwhile, you can use the program at https://github.com/QuickrWorld/jsgen to convert the json files to js to enable auto-complete for the chrome extension APIs.

For writing AppScript, functions and classes such as DriveApp, SpreadsheetApp, there is a plugin in WebStorm or Intellij called google-app-script.
The installation method is the same as above. On the other hand, you should mark or open the .gs file as JavaScript. (July 2017)

How do I properly run the VJET development tools for NodeJS on Eclipse?

The default javascript editor for Eclipse has very poor outlining and code completion. As a result of this, for any modern javascript application like ExtJS or NodeJS where you need to write a lot of object literal statements, Eclipse becomes pretty useless. And it is impossible to ask how to do this properly.
Now I found that Ebay Open Source seems to have tools that are specifically designed to replace this flaw in the standard editors, both for javascript in general as for NodeJS specifically.
Installing the normal NodeJS V8 debugger on a default WDT install of Eclipse is pretty straightforward, and apart from setting up some script mapping, it's easy to get to work.
But when I tried installing VJET, stuff just didn't work. No code assist at all, no debugging anymore, nothing. VJET mode was set as default for debugging and stuff, but when I couldn't get it to work, I couldn't find any option to switch back to normal Eclipse/JS Editor/V8 Debugger either. Even when I removed all VJET stuff, my Eclipse installation was bombed and a complete wipe of the workspace and home configuration + downloads finally fixed this.
So I was hoping that anyone could explain:
What are the exact steps to getting VJET to work for Node.JS development in Eclipse, and possibly how can one switch between 'VJET' mode and 'default' mode?

Run JavaScript unit tests inside of Visual Studio

I have been searching for a good way to run JavaScript unit tests inside of the Visual Studio IDE. I currently use TestDriven.net to run my C# units tests and it is very convenient to be able to quickly get the result of my tests in the output pane. I would love to find a similar experience for JavaScript (ideally working with TestDriven.net).
I have read about different solutions that let you execute JavaScrpt unit tests. Some have their own JS engine while others like JS-Test-Driver are able to send the code to the browsers and fetch the results. But I have yet to see something that is integrated into VS.
Does anyone know of an extension that might do this?

After nine months there are now a couple answers to this question.
I created an open source project called Chutzpah - A JavaScript Test Runner. Chutzpah enables you to run JavaScript unit tests from the command line and from inside of Visual Studio. It also supports running in the TeamCity continuous integration server.
Another solution is part of the next version of Resharper. In Resharper 6 there is an integrated QUnit test runner.

It is possible to use JsTestDriver to be a test-runner in Visual Studio. Once a server has been started, with browsers attached, one can run tests directly from within Visual Studio.
The Console-window will then give the output of the test results. I won't go to implementation details here, but the following how-to should be enough to get you started on the actual setup of Visual Studio / JsTestRunner.
Console output from chrome and internet explorer (ignore my bad test-names):
JsTestDriver is mainly a test-running tool to verify multiple browsers. To get good unit-tests on the javascript itself, one can plug in other test-specific tools like JasmineBDD (jasmine to jstestdriver adapter).
JsTestDriver also opens up for the possibility to test against multiple browsers as a build step on your continuous integration server ie: Hudson (Continuous Integration with Hudson and jstestdriver). This then allows a dev to test against a certain browser or two while developing locally, but then verify the result against any range of OS / browser combinations on the build server.

Just found this article (and this question) when looking for the same thing.
Integrating JavaScript Unit Tests with Visual Studio - Steven Walther
It does have a lot of work onto it, but it seems that it really brings a nice interaction. For sure worth the hassle if you're working on a JavaScript heavy application.

Microsoft has a link recommending the use a NodeJS app to run our JavaScript Unit Tests. Visual Studio's test window can now see tests we write in that project even when the overall project is in C#:
https://learn.microsoft.com/en-us/visualstudio/javascript/unit-testing-javascript-with-visual-studio?view=vs-2019&tabs=mocha
One of the testing library combos (unit testing / mocking / assertions) recommended is using Mocha / Sinon / Chai. For this flavor there's a useful tutorial located here:
https://scotch.io/tutorials/how-to-test-nodejs-apps-using-mocha-chai-and-sinonjs
And another link for getting vanilla JS to work in the node environment:
https://dev.to/thawkin3/how-to-unit-test-html-and-vanilla-javascript-without-a-ui-framework-4io