Ask HN: JavaScript dev environment ?

49 pointsby Murkin16 anni fa36 comments

I finally decided to dive deeper in JavaScript.

Move away from simple JS and Firebug debugging. To large and more complex software for the front-end and explore the new opportunities in the back-end (Node.js and such)

What I need is not just an editor (vim will do) but rather a full environement where I can edit, run, test and debug JavaScript.

All recommendations are welcome.

14 comments

CyberFonic16 anni fa

This is what works for me:

3 screens: 1 with two windows for editing code, 1 to run Chrome and 1 for Chrome Dev Tools. Overkill? Nope, good to see it all in context.

I modularize code (bottom up dev style) and test each class / function before integrating with code body. Chrome Dev Tools is fantastic for tracking down CSS cascade probs, etc.

Other tools: Vim, Rhino book and www.w3schools.com for references. I develop only for Chrome / Safari (some FireFox) so can't suggest as for IE, Opera, etc.

gmosx16 anni fa

I use the Google chrome developer tools. Highly recommended!

koenbok16 anni fa

I use a combination of TextMate, d8 (v8 shell) and Sprockets (http://getsprockets.org). For debugging mostly Webkit's debugger.

daleharvey16 anni fa

I use emacs with jslint + flymake, js2 mode + espresso, it isnt perfect yet but its getting pretty close.

phuff16 anni fa

You can also use something like my js-comint mode (see http://js-comint-el.sourceforge.net/) to run code that isn't dom-ish in a js repl like spidermonkey or rhino from emacs. It's pretty sweet to be able to run an expression with C-x C-e and see how it works.

mahmud16 anni fa

Thanks, I was looking for that.

What are people's opinions of ES4? I am using it to learn the good parts of Javascript. Is it recommended?

antichaos16 anni fa

What's wrong with Firebug? I fail to find a better alternative for JS debugging.

hundredwatt16 anni fa

I have run into problems in the past caused by forgetting to remove console.log() lines from my scripts. If the console wasn't open, then the scripts didn't work.

This isn't a huge problem or reason not to use Firebug (which I would be totally lost without), just something to be wary of.

geocar16 anni fa

    if(!console)console={log:function(){}};

You're welcome.

marcuswestin16 anni fa

This will throw if console is not defined. Try

   if (!window.console)

   if (typeof console == 'undefined')

   if !('console' in window))

 N

geocar16 anni fa

Doesn't here. What are you using?

toni16 anni fa

My solution to this issue was to write a console2.log helper function and call that instead of the original console.log:

  var console2 = {
   log: function(msg){
    if(typeof console != 'undefined'){
     console.log(msg);
    }
   }
  }

notauser16 anni fa

You can solve(?) this by creating a dummy console.log object when one isn't already present, then throwing away all of the output.

devpopol16 anni fa

if(!window.console){window.console = {};} if(!(toString(window.console.log) === '[object Function]')) {window.console.log = function(){};}

there, fixed..

jmtulloss16 anni fa

This won't work in node. That's not a huge deal, but it's pretty simple to come up with a cleaner solution that works in all environments.

maxanger16 anni fa

if (window.console) console.log(...);

jackowayed16 anni fa

That really should be built in to console.log.

mitjak16 anni fa

I may not be entirely sober yet but I believe the problem at hand is what happens when window.console isn't defined at all.

ydant16 anni fa

It can be, but only if console.log is defined in your source code. It isn't when you use Firebug, so it won't be when you're not using Firebug.

convel16 anni fa

Chrome Dev Tools.

Detrus16 anni fa

Yea those have some fancy live JS editing capability, where you can edit the JS, it runs the code with the changes but without restarting the whole program.

http://www.youtube.com/watch?v=TH7sJbyXHuk

igrekel16 anni fa

Last time I used firebugs you couldn't really edit files in it, it was also missing many goodies for easily browsing code or code completion.

gmurphy16 anni fa

You didn't specify the platform, but Visual Studio with Visual Assist X surprisingly makes for a really good JS editor. I've found it a lot faster and easier on my system than the larger Java-based JS editors (JSEclipse, Komodo etc).

It doesn't have integrated debugging, it costs a lot, and people won't believe you when you tell them about it, however.

evo_916 anni fa

Yeah, I like VisualStudio 2010 also, I know it's not a popular choice amongst HN'ers, but MS started as a Tools company and out of everything they make, I think their dev tools are actual quite good. I do a lot of JS/jQuery coding and it works reasonably well.

I'm curious about Visual Assist X - does it add more/better support for Javascript and/or jQuery?

I also use Aptana Studio on OSX when I do pure UI coding. It's not bad for pure JS/jQuery but their isn't much autocomplete support.

Edit: Side note on the cost of VisualStudio 2010 - I signed up for MS's BizSpark program and was given a free MSDN license including full copies of VisualStudio 2010, SQL 2008, etc.

Encosia16 anni fa

For those purposes, Visual Studio is free: http://www.microsoft.com/express/Web/

igrekel16 anni fa

I was actually looking into that over the last few days and haven't found anything satisfying yet.

I have tried Aptana, WebStorm (from Jet brains), textmate, bbedit, jseclipse, visual studio, vim. But still haven"t found what I am hoping to find.

I find the eclipse based solutions (Aptana and jseclipse) are too slow for my taste and while they do provide things like completion, it is fairly limited to the obvious things. Aptana probably does what you are looking for, it has a debugger that integrate with your browser.

I tought webstorm seemed better but it is also a bit slow and brings a bit too much with it. Give it a try it may be what you are looking it also has debugger integration.

I couldn't find any special editing facilities other than text highlighting and indentation in bbedit and eventually gave up. TextMate does it ok but since I am not that familiar with javascript and the libraries I am using, I was hoping for something that would let me edit and introspect things at the same time. its really comparable to what you could achieve with vim or emacs.

DTrejo16 anni fa

I've really enjoyed using Textmate with various JS bundles like Javascript Tools (comes with jslint, js beautify, and some snippets).

Regarding a "more full development environment," my good friend said the following to me:

IDEs can be nice, as they help you handle complicated code. On the other hand, they don't prevent you from writing complicated code in the first place.

igrekel16 anni fa

I was more looking for a more complete IDE because I am not very familiar with javascript and JQuery and hope it would make looking up available functions easier.

augustl16 anni fa

Use JsTestDriver to write and run your tests.

One of my pet projects is open source and tested with JsTestDriver [1], that should be a good starting point for learning more about how to test JavaScript in webapps.

I also like to use Sinon [2] for stubbing and mocking. The author of Sinon is also putting the finishing touches on a book about TDD-ing JavaScript.

EDIT: calendar-logic.js [4] an example of how you can extract and test logic in separate libraries. It's being used on figureoutwhen.com.

[1] http://github.com/augustl/figureoutwhen.com [2] http://cjohansen.no/sinon/ [3] http://www.amazon.com/Test-Driven-JavaScript-Development-Dev... [4] http://ditrw.com/calendar-logic-dot-js/

warfangle16 anni fa

emacs with espresso mode; rhinounit.

olegp16 anni fa

IntelliJ IDEA (http://www.jetbrains.com/idea/) has good JavaScript support, including refactoring. I also quite like Komodo Edit (http://www.activestate.com/komodo-edit), since it's more lightweight but has JavaScript code completion & is easily extensible.

While you're looking at Node, I also suggest you take a look at RingoJS (http://ringojs.org/). It should be easier to get started with & has debugging support.

kodisha16 anni fa

+1 for IntelliJ IDEA, js support is really superb.

maushu16 anni fa

This rather related to my startup in development. I hope to release this service soon.

Anyways, I use a decent editor (Notepad++ is a good one) for most code that doesn't need debugging (besides the good old trace statements) and for debugging I use eclipse.

In the latest version of Node.js (0.1.100) a console.log() was added.

nostrademons16 anni fa

Most of the JS pros I know just use vim/emacs + FireBug.

arc_of_descent16 anni fa

What has complex got to do with the editor? Maybe it would help a bit. But if you design the codebase to be modular, you have only a little part of the code to worry about at a time, so you can use your current editor setup. :)

shawndumas16 anni fa

I have been enjoying WebStorm. BTW: it'll do Zen Coding[1]. That's a plus!

.

[1]: http://code.google.com/p/zen-coding/