JavaScript standalone IDE without browser? - javascript

So I have been looking for an IDE that allows me to run JavaScript just like Eclipse/VS would allow me to write Java/C#. I want to write some code and see the output on the console (possibly within the IDE itself), without having to open the browser. I know you can run JS programs from command line using node file.js. But I'm trying to avoid having to do that every time. I want to press a run button and see the results on the console. Is there something already out there. Can I configure my IDE in certain way to achieve that? Thanks in advance.

Take a look at Atom https://atom.io/ for the editor with embedded console and excellent JavaScript support (actually it's a browser inside).

Try Visual Studio Code, it is open source and free.
https://code.visualstudio.com/docs/runtimes/nodejs

Try this:
Is there a javaScript engine where I can run my code without being forced to use a browser?
A lot of alternatives of command-line and engines to try js without the need of a browser.

You can debug browser js with any jetbrains IDE, however I find chrome to be much better for debugging browser code than the jetbrains plugin. You can easily debug node by editting your debug configurations in any jetbrains IDE. Just download the node plugin https://www.jetbrains.com/help/idea/2016.1/running-and-debugging-node-js.html

Related

Chrome Debugger for JS file only

So. Dumb question.
I am using developer tools on chrome as essentially my IDE in the source tab. I have a JS file writing a program with no associated html/css files. Is there anyway for me to utilize the debugger for my JS file? Specifically I want to step into a function
In developer mode, select Sources tab, then navigate to your JS files in the left side. In the right panel, you can add a breakpoint to any line by pressing the line number which has a real js statement. Then you can run your application again to debug your js scripts.
The picture below is an example(Line 33 of assert.js is selected).
There are a number of different ways to debug/test your JS code, Chrome is only one of them.
QUOKKA
Quokka.js is a developer productivity tool for rapid JavaScript / TypeScript prototyping. Runtime values are updated and displayed in your IDE next to your code, as you type.
Runkit notebook
RunKit notebooks completely remove the friction of trying new ideas. With one click you’ll have a sandboxed JavaScript environment where you can instantly switch node versions, use every npm module without having to wait to install it, and even visualize your results. No more configuration, just straight to coding.
Hopa
Hopa is a zero config JavaScript/TypeScript runner right in your terminal.
JSComplete playground
This is a playground for JavaScript and React. You can use it to test simple code or prototype ideas. It requires a modern browser that understands ES2015 (ES6).
VSCode extensions Javascript REPL
Javascript REPL is a javascript playground for Visual Studio Code with live feedback(logs or errors) as you type, besides your code, in a log explorer, or in an output channel. It supports Javascript, TypeScript, CoffeeScript and it can be used for development in Node.js projects or with front-end frameworks like React, Vue, Angular, Svelte etc.

How do extensions like "React developer tools" work?

I am trying to build a chrome dev-tool which would help developers debug their code (javascript code in frontend). But since most developers use tools like webpack to build their javascript code into a single large file and the code that the browser gets doesn't look like what they've written at development time, I want to know if there is a way to access the code they've written. Is this the way how tools like react-devtools detect React app and provide external stuff based on that code? If yes, how so?
JS Sourcemaps might be handy if this is what you're trying to achieve.

Debug JavaScript in IntelliJ IDEA

How can I debug JavaScript for my website in IntelliJ IDEA without changing my build configuration?
I am able to debug the JavaScript in Chrome Console but it does not work very well.
Answer. It is really easy:
Create a new JavaScript Debug Run configuration and specify the WAMP address you normally use to open your application in browser as URL there. See https://www.jetbrains.com/help/webstorm/2017.2/debugging-javascript-in-chrome.html#d45520e154 and linked topics.
You might also need to configure URL mappings in your configuration - https://www.jetbrains.com/help/webstorm/2017.2/debugging-javascript-deployed-to-a-remote-server.html#d46122e202
First you need to add intellij plugin for chrom and install it on chrom, then on configuration debug
you need to choose run with javascript.
I can show you screenshot if you want
It is worth noting that you should have linked separate .js files for debugging. I was trying to debug JavaScript code which was within an .html file but the breakpoints were never hit. I looked later under the resources in Chrome Inspector and found out that the lines were not synchronized between the files, because for the debugger the first line was the first JavaScript line, but for the html file it was the first line of the file (DOCTYPE)

Create Javascript Debugger

I want to create my own javascrip debugger using V8 debugger in eclipse. But i am not getting any document about the V8 debugger or any Source code for v8 debugger. i have my own browser. i want to create one Javascript debugger which debug the .js code remotely. And same debugger i want connet with my own browser. So what can i use for creating debugger in eclipse. can i use v8 debugger as base for my debugger or any other idea i have to use for that.
Thanks for your support
Just out of curiosity - why reinvent the bicycle? FireBug has arguably the best free javascript debugger available

Javascript, Firebug: How do I have multiple views or what is the right of way of doing development?

Most of my javascript work is done with Firebug and I feel annoying most of the times having to switch between the HTML mode and console mode (which again I split into output mode and input mode). When I switch to a different page to see the HTML and come back, I lose the code that I write. What is the best way to go about developing javascript applications using firebug?
Something like a mini IDE would be awesome: It just has to let me insert some code, examine the current page and then let me execute it. Any suggestions?
I use a simple text editor (vim) to write Javascript and HTML, and I check the result every now and then in Firefox. I have always two windows open: one for my text editor, and one with the current page open in Firefox. After saving a change in the Javascript, I switch to the browser and refresh the page to observe results. That was my workflow until recently.
A couple of weeks ago, I discovered the Combiner tool by Nicholas C. Zakas. To release my Javascript code, I am now using a complete build process based on Apache Ant, similar to what I was using while doing Java development previously.
The first step is to check the Javascript code with the JSLint tool by Douglas Crockford. I used to painfully copy and paste my Javascript code in the online version of the tool, once in a while; being able to run it on all my Javascript files at once with this Ant script is a huge convenience.
The second step is to combine all my Javascript files into a single file using the Combiner tool. The third step is to minify the Javascript code using YUI Compressor by Yahoo!. These last two steps allow to optimize the delivery of Javascript code to reduce page loading.
You can find an example Ant build file that you may adapt to your own needs. I am currently using this file to build my own Javascript library, bezen.org.
The other answers so far have been correct: I've never heard of anyone actually developing inside Firefox/Firebug, because it's a tool designed for debugging, not coding. To do your coding, you should use a tool designed for it (either a text editor or a full-fledged IDE).
But that being said, you might want to check out FireEclipse (Link). It will allow you to integrate Firebug with the Eclipse IDE (which itself has at least three different JS plug-ins to choose from). Alternatively I think the main (aka Web Standard Toolkit, aka WST) JS editor for Eclipse has some functionality which is similar to Firebug, but I've never used it so I don't know the details.
Hope that helps.
Write your HTML in an editor/IDE
Save your changes
Preview it in your browser
Debug using Firebug
Make your code edits in your SOURCE CODE
Repeat
Firebug is for debugging and allows you to do some "what if" fiddling while the page is live. This is not a replacement for an IDE.

Categories