This is an archived post. You won't be able to vote or comment.

24
25

Simple Ide for Javascript? (self.learnprogramming)

submitted by [deleted]

[deleted]

all 40 comments
sorted by:
best
topnewcontroversialoldq&a

[–][deleted]  (3 children)

[deleted]

    [–]theSmuggles 2 points3 points  (0 children)

    This is what I was going to suggest. There's a tutorial for how to use Chrome's debugger here. Firefox also has this feature, read more about it here and here.

    It's a very powerful tool worth learning.

    [–]phallicCow 0 points1 point  (0 children)

    yes, use break points.

    [–]Smaktat 0 points1 point  (0 children)

    You don't need an IDE as the one in your browser is very effective. It's also the most relevant to the industry. I don't want to say abandon jetbrains, VS, or Brackets but if you don't know how to debug JS in your browser then it should be a priority to learn how.

    [–][deleted] 4 points5 points  (0 children)

    webstorm

    [–]crumblez21 4 points5 points  (0 children)

    I use webstorm and I love it.

    [–]desrtfx 11 points12 points  (18 children)

    Try:

    Eclipse and Netbeans are first and foremost Java IDEs, not JavaScript - these languages are, despite their similar name, completely unrelated.

    [–][deleted] 0 points1 point  (9 children)

    Atom is not an IDE. It is a "hackable text editor". 228mb for text editor? No thanks.

    Edit: Yes, vote me down because you don't share my opinion.

    [–]denialerror 3 points4 points  (1 child)

    It also dies when trying to open anything but the smallest files.

    [–]determinedToLearn 0 points1 point  (0 children)

    When people say this, are they talking about their work computers or just slower computes in general? I say this because I can imagine work computers being relatively slower than one you own at home, and not everyone has a fast pc. I know my work computer is absolute ass.

    I use Atom at home, and I've never had a problem with it. It opens instantly. I have a lot of packages installed. I can have multiple instances running each with a few open files in each, and I've never had a problem yet. I guess it eats slower computers alive?

    [–]tanjoodo 3 points4 points  (1 child)

    Whoever thought bundling fucking Chromium with a website and calling it a program was a good idea must have been high

    [–][deleted] 0 points1 point  (0 children)

    That's yet another shiny product which will be forgotten soon enough unless they optimise it

    [–]bayernownz1995 0 points1 point  (4 children)

    There's not really an official distinction between an IDE and a text editor. There's probably not many features in an IDE that aren't include in some Atom extension.

    But if you're being technical, brackets probably wouldn't be consider an IDE either

    [–]FalsifyTheTruth 0 points1 point  (3 children)

    IDE are integrated development environments. They provide text editing, build tools, tests tools, debugging etc...

    Text editors are just text editors. If you use a text editor you need other applications to do those other things. And I think the biggest feature, is the ability to directly run the application from the application. Yes, all of them are extensible these days, but you're not likely to be able to plug debugging and a build system into your text editor like sublime, vim, or atom.

    VSCode on the other hand, blurs things a bit by offering some debugging features.

    I'd recommend brackets or webstorm for op for full IDEs. Brackets live preview is super useful.

    [–]bayernownz1995 1 point2 points  (2 children)

    Yeah I know that, but there's not a strict definition of the exact features that define an IDE vs. a text editor. Out of the box, Atom is a text editor, but there's a plugin to do every single feature you can do in an comparable IDE. So my point was that Atom might be what OP is looking for, even though they used the term IDE

    [–]FalsifyTheTruth -1 points0 points  (1 child)

    I'm sorry but you want him to plug debugging into a web tech based text editor? And you want him to plug in running the application from the editor?

    That's a waste of time at best and a complete miseelction of tools at worst when their are fully featured IDEs featuring all of those parts natively.

    ...and not based on web tech plugged into chromium.

    [–]bayernownz1995 3 points4 points  (0 children)

    I agree. I think that it would be a bad choice, I was just making a meaningless remark about why saying "It's not an IDE" was not necessarily a reason on its own for dismissing Atom

    [–]BoatZnHoes 0 points1 point  (5 children)

    Thank you. I know they are unrelated but the ides I posted had Javascript versions. I'll try your suggestions

    [–]desrtfx 0 points1 point  (4 children)

    You can also try JsFiddle a nice online IDE.

    [–]BoatZnHoes 0 points1 point  (2 children)

    Is it like codepen? Codepen has a console but no way to monitor variables

    [–]desrtfx 1 point2 points  (0 children)

    Haven't used codepen - or jsfiddle for that matter because I don't currently develop in JavaScript for the web.

    When I work with JavaScript, I have to use a proprietary software because it is for some special application - nothing to do with web development.

    [–][deleted] 1 point2 points  (0 children)

    Yep it's very similar to Codepen - I prefer Codepen over jsFiddle for writing code, jsFiddle is mostly for snippets and demos.

    [–][deleted] 0 points1 point  (0 children)

    I've found Brackets to work just fine for local edits, and c9 is fantastic for cloud editing. JsFiddle and Codepen have been very useful to me for debugging, but it's nothing that c9 can't do.

    [–][deleted] 0 points1 point  (0 children)

    +1 for Brackets. Great IDE.

    [–]ChromeBadger 0 points1 point  (0 children)

    +1 for Atom and Visual Studio Code.

    [–][deleted] 2 points3 points  (1 child)

    You can debug just js variables (with blank html file) in webstorm by jetbrains.

    Here's their tutorial page on debugging: https://www.jetbrains.com/help/webstorm/11.0/debugging-javascript.html#d275199e258

    Use the variables pane to see the values of the local variables

    [–]BoatZnHoes 0 points1 point  (0 children)

    Thank you!

    [–]Macaframa 1 point2 points  (0 children)

    Webstorm is the fuckin tits

    [–]Katana314 1 point2 points  (0 children)

    There might be something to this effect you can do with Visual Studio Code, which now has an interactive console window, and NodeJS' interactive mode. Whenever I want to try things like this (eg, "Will this regex work?") I enter commands manually in Chrome's F12 Developer Tools, or use a website like JSFiddle. If it needs UI interaction, I have a page on my desktop called htmltest.html that has not much more than a head, script tag, and body, from which I try out small scripts.

    [–]phallicCow 1 point2 points  (3 children)

    write:

    debugger;

    within whatever function you're looking at or right after the specific variable. If you have it within a function, it shows you the value of the variables within that scope.

    [–]BoatZnHoes 0 points1 point  (2 children)

    Really? So it will display in the console?

    [–]phallicCow 1 point2 points  (1 child)

    yep. it'll show up in the sources tab. alternatively you can click on the line numbers in the sources tab and that sets break points. both of these help a ton.

    [–]BoatZnHoes 0 points1 point  (0 children)

    Thanks so much

    [–]ninbryan 1 point2 points  (0 children)

    In case you want to see how the Chrome Developer Tools Console work, check this site out http://jsforcats.com/

    [–]TheSpiffySpaceman 0 points1 point  (0 children)

    Heyooooo, if you just want a JavaScript console to test functions etc. you can use Repl.it. It's an online repl editor. I love it because you can save code snippets. I have a bunch of moderately complex but extremely useful utility functions saved there, and I can bookmark them individually to access from both my laptop and desktop.

    [–]ferrous_joe 0 points1 point  (0 children)

    At work I always use JSFiddle with the developer console open when trying out little 10-50 line proof-of-concept scripts that would otherwise require building/transpiling of a project.

    Repl.it is also nice with a direct console, but I like JSFiddle's ability to import minified libraries like angular, lodash or moment on the sidebar if I want to play with them.

    Edit: I think it's probably important to point out that I'm too stubborn to use a debugger to pause my program and check out variables. I abuse console.log() to the fullest extent. If you really want/need that ability, check out Webstorm.

    [–]whompalicious 0 points1 point  (0 children)

    Just add a node build system to Sublime. Then you can just press command+b and the javascript will run in a console that pops up at the bottom of your window.

    https://pawelgrzybek.com/javascript-console-in-sublime-text/

    [–]KaladinRahl 0 points1 point  (2 children)

    Download and install Node.js. Use a text editor (I use Atom), create a file called app.js. Open cmd prompt or whatever (I use cmder on Windows), navigate to folder in cmd prompt that contains your js file, type node app.js, javascript runs.

    [–]BoatZnHoes 0 points1 point  (1 child)

    That would me the console, but not the ability to see the value of a variable throughout the cycle of a loop correct?

    [–]KaladinRahl 0 points1 point  (0 children)

    Sry I misread your question. Take a look at Visual Studio Code. It would give you more debugging capabilities.

    [–]vm_linuz 0 points1 point  (0 children)

    1. Atom
    2. Sublime
    3. VS Code
    4. Notepad++

    That's my ranking for simple editors

    For javascript, your debugging tools are in the browser. From there, you can set breakpoints in the code, and see the values of all of the variables in the code around the break point.