Can I execute nodejs javascript scripts in chrome devtools? - javascript

Is it possible to use chrome devtools to execute the terminal command node myfile.js, so the chrome console would output all console.logs from my code?
I have got some terminal plugin installed in my IDE and I use some keyboard shortcuts when I want to run this command on my files, to get my logs immediately (like when running html+js in the browser) but it prints out just plain text. Chrome can recognize the output data type and structurize it well (arrays, objects), what is really cool.
I've already tried out node inspect-brk but its purpose seems to be quite different than just printing out my logs.
UPDATE:
I've found very interesting link with npm modules that do what I mean.
I have alredy tested node-monkey but it does not work on my Windows, but iron-node works great and I can run my .js files with iron-node file.js command and get all console.logs in Chrome devtools!

run your file with
node --inspect <your file name>.js
and then type in chrome
chrome://inspect
See https://nodejs.org/api/debugger.html#debugger_v8_inspector_integration_for_node_js for reference

--inspect-brk is used for breakpoint purposes, with that flag the debugger is ready to run your code but is expecting the developer to add something before it begins to run your script. There is a play button at the top corner of the chrome devtools debugger, and if there are no other breakpoints or debugger; statments in your code it will run as it would run or your workstation

Related

vs code terminal externally on when i run javascript code in node js and cannot show output

In my vs code when I write javascript and then I clicked run or write node main.js the vs code terminal externally on the new window cannot show any output.
In visual studio code settings I turned off window conpty setting and visual studio code preference settings but It cannot fix. So, How I can run code internally in vs code terminal.
The "gnode" you seem to be running, is not part of the official distribution of NodeJS. Someone similar with your problem (https://github.com/nodejs/help/issues/3670), found a solution by uninstalling whatever he had installed, and reinstalling the LTS version of node (https://nodejs.org/en/download/).

Executing JavaScript code in the Visual Studio Code terminal and not output

I want to execute JavaScript code in the Visual Studio Code terminal. I installed the Code Runner extension, but it is executing code in "Output" where I am not able to enter run-time input values.
To execute in "terminal", I have to type "node pgm.js". Is there a way by which I can directly execute JavaScript files in the Visual Studio Code terminal by using shortcut Ctrl + Alt + N?
Go to settings and configure the Code Runner extension to output to the terminal.
Also, you need Node.js for it. If that doesn't work, you don't need code runner. Use Node.js from a normal terminal.
From the top, go to menu View → Terminal to open the normal terminal. Then run the command node filename.js to execute it.

Error message is popping up when running js in vscode

I just started to learn Javascript. I decided the best thing to use was vscode, as I use it for other programming projects. But when I do even a simple statement which I know is right, such as "console.log('hello world')" it gives a error message. Something along the lines of file "c:\Program Files\ Python39\lib\run.py.py" , line 197, in _run_module_as_main. I have tried making a new JavaScript file, and install additional support for js. But It did not work. code:
console.log('hello world')
I think you should start learning by using chrome or firefox console.
Chrome Detail
Firefox Detail
If you want to run JS file on VSCode you can simply go ahead and install node on your machine, and use it run js code in the terminal. Just google it how to install and then use command node <fileName>.js and this will do the job. And in case you don't know how to open terminal in vscode just use command: ctrl + `

How to debug Javascript in webstorm when gulp is serving the application

In Webstorm, I am running gulp serve task that launches localhost:9000 stub angular project generated with yo.
I am trying to debug JavaScript code and this is what i have tried:
I run gulp as a debug task, I can only debug gulp file lines
I try to run gulp serve before JavaScript, it starts serving and Webstorm never gets to launching its JavaScript debug session
I try to run JavaScript debug, I don't get breakpoints inside my code.
What is the workflow in this situation?
PS. i am not trying to debug code inside chrome developer tools, i want my breakpoints to work in Webstorm
In your Javascript - put debugger; between two of your lines, and pop open your Developer Tools in Chrome. When you refresh the page - if your script runs, it should stop where you put the debugger; and you'll be able to hover on different variables to see their values. Very powerful and basic tool.
Also, if you don't want to have the script stop - you can console.log(variable); to have the Developer Tools console print out the variable.
Example:
var somethingOrOther = function(){
var blah = 'foo';
console.log(blah);// to print to console
debugger; // to stop script at this point and look around
};
Don't forget to remove the debugger; when you're done.
I recommend using jshint in your gulp to make sure you don't miss those kinds of things.

Is there an "immediate window" in Visual Studio Code to run Javascript?

Yes, I use F12 in the browser all the time to test out Javascript snippets with the console. I'm tired of that (for the moment anyway).
I've read that in Visual Studio you can use the immediate window to run Javascript interactively.. I've haven't tried it that hard. I think when I did it told me it can't evaluate while in design mode... ugh, what a pain.
I do like to use Visual Studio Code (sublime text historically) sometimes to just mess around with syntax of snippets. Would also be nice if I could just run Javascript there too quickly. Is there a package I could download in VSCode to do so? Or something already built in?
As of (at least) my current version of VS Code (1.5.2), the "Debug Console", while debugging, lets you run arbitrary JavaScript code as you would in the VS Immediate Window. (Similar to as you would for the Chrome Dev Tools Console.)
There is no Immediate Window unlike Visual Studio in VSCode. But you can still execute Javascript in VSCode.
Install the Code Runner Extension - https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner
Open the JavaScript file in VSCode, then use shortcut Ctrl+Alt+N, the code will run and the output will be shown in the Output Window.
I've found this extension that makes a scrathpad for JS, that runs at the same time as you are typing: https://quokkajs.com/
Works on VS Code, Jet Brains, and Atom.
If you don't want to start a debugging session or installing an extension, a simple way to have a JavaScript console is to start Node in a Terminal.
View -> Terminal
Start node (without any argument -you'll need node in your PATH)
Now you have a repl with auto-complete and value preview.
It doesn't have the features of the Chrome Console, but I find it good enough for evaluating JS code while I'm working.
Run the command node in the terminal below the editor, this will create a node environment where arbitrary JavaScript can be entered. You must first have node (and apparently npm) installed from nodejs.
This might do it: https://code.visualstudio.com/Docs/runtimes/nodejs
Node.js is a platform for building fast and scalable server applications using JavaScript. Node.js is the runtime and NPM is the Package Manager for Node.js modules.
To get started, install Node.js for your platform. The Node Package Manager is included in the Node distribution.

Categories