16 個為Web開發人員準備的在線JavaScript編輯器

除了像Notepad++, Sublime Text 2, perhaps，Wordpad等這樣的優秀桌面JavaScript編輯器之處，本文將介紹16 個為Web開發人員準備的在線JavaScript編輯器。它們允許您直接在瀏覽器中編輯代碼，而且還能實時預覽。favorite apps.

JS Bin

One of the community members suggested this in the comments, somehow I managed to miss one of the most obvious ones. I hope that putting it up the top, makes up for it! :)

JSFiddle

Quite possibly the most sophisticated – as far as simplicity goes – online JavaScript editor there is, offering a wide variety of functions and external features. Most notably, the ability to load tons of frameworks and extensions to make online development much more appealing, and accessible.

Little tools like TidyUp, and JSHint will clean and verify your code, or you can try the collaborate feature to invite your friends over for a coding session!

Codenvy

What about a full-scale IDE for developers who want to do more than just JavaScript? Codenvy might help. In 2013, the team behind Codenvy raised 9$ million to help many developers transition from the traditional desktop development, to doing development on the web, full-time. It’s a huge promise, and it will certainly require a lot of work.

Just head over to the homepage, and see for yourself the amount of environments that Codenvy offers, and whether you’d like to try any of them. Besides, it beautifully integrates with several PaaS services to make deployment incredibly fast and easy.

Rendera

I think that many new developers and designers underestimate, the amount of time that goes into switching tabs and seeing whether the code works or not. Rendera can help immensely, it provides simple functionality and you can view the results within one single click. It’s very lightweight, and is great development environment for beginners. Built with Sinatra.

Cloud9

I love c9, and the way they do things, very professional, modern and stylish! Oh wow, so cheese! Much cringe. You can easily create new workspace, for applications such as: Node.js, WordPress, Django, Rails and of course custom ones. It really makes development much easier, and for beginners it means quicker learning process.

Built-in app deployment, makes transitions seamless. The premium plan will cost you $19, not all that much – considering the wide variety of features, and overall online IDE experience.

sourceLair

Very appealing to those developers who’re looking for full cloud integration of Git and Mercurial. You can clone, commit, pull repos with ease and have everything stored fully in the cloud. You can easily begin a Django project within seconds, as the IDE has features integrated that allow to deploy a new stack very easily.

I have no heard of sourceLair a whole lot, but it looks very promising and it has actually been around for longer than many of the JavaScript editors on this list.

Application Craft

It’s not free, but it offers a lengthy 45-day free trial, which should be more than enough to understand the platform and see whether you’d like to continue using it, at just $14 per month. It’s fairly feature rich, and is also putting a lot of emphasis on mobile development, possible the most of all the editors in this list. I could ramble on for the rest of the day, but instead I recommend watching their 油Tube channel and seeing what they’re all about.

Liveweave

Great little online JavaScript editor, supports HTML5 & CSS3 at the same time, like most of these editors! :) It’s similar to JSFiddle, probably boasts a little bit less libraries, but has a little bit more broad GUI, and also a button that can enable and disable live editing. Has a built-in color palette generator.

CodePen

CodePen is an HTML, CSS, and JavaScript code editor in your browser with instant previews of the code you see and write. Very cool platform, and has thousands upon thousands of examples, of how versatile web development can be, and what can be achieved trough combining three programming languages. I’m always on CodePen, looking for new ideas and inspiration. Other than that, it’s a great online editor.

Turb0JS beta

Use Turb0JSbeta to write, store, share and analyze small JavaScript programs. Run the code in the browser step by step, using breakpoints and watch expressions. Just click on the line number and execution will halt at that line, and see the values of your variables in the watch window. Want to change the code? Simply edit the code and run it again. You can also make a copy and save your changes in you “Drive”. You’ll have to sign in for that, see below. Will not support DOM, just JavaScript.

kodtest

Different GUI, same functionality. Yep, nothing much changes from the likes of JSFiddle, or Liveweave. The only difference is the interface, and perhaps the choice of libraries. Maintained by @cangomec.

Codio

The free version is limited to open projects only, the premium is priced at $12 per month. You can check out some open-source projects run by Codio on this page. It’s a new online IDE, but it’s definitely looking promising and I’m hoping to hear more about it in the news!

Quick video shows the default interface, and some functions like pulling from Git, with just a couple of clicks. Try their features page to see more videos like that, I’m not sure I’d be better at explaining them trough words.

Koding

Koding is similar to 推ter, only it allows you to code within the interface, and it offers some nice collaboration tools along the way. It’s definitely one of the nicest development environments I’ve seen, as far as the style goes. You’re given a free virtual machine when you signup, to aid you with your development journey.

It doesn’t matter what language you need to program with, it’s all covered with Koding. They provide extensive guides to both beginner and experienced types of coders, and constantly offer things like free terabyte weeks, where you can participate to gain more free space for your projects.

It’s very popular in teamwork communities, where multiple people are working on the same thing. I had no idea what this site was until a few weeks ago, but it’s really cool and I suggest you check it out.

Code Beautify

It’s not a direct JavaScript editor, but it does serve a great purpose, and combined with any of the tools mentioned in the list, it can also be quite powerful. It’s a code beautifier, which will take your piece of code and allow you to minify it, beautify, make it a tree view, etc,. etc,. It’s different for each type. Try it out, a really nice tool, and worth having in the bookmarks – like this post is! :)

Compilr

Compilr is an online editor & sandbox that lets you write your code all from the comfort of your browser. We do all the heavy lifting so you can just focus on writing and learning code!

Supports the following languages,

• C++
• C#
• Java
• HTML5
• JavaScript
• PHP

it actually timed out for me, so be careful how you browse the site. The result is that I am unable to gather more info, I think it’s deciding too quickly whether someone is a bot, or a real user.

Codeanywhere

This is the last online code editor on our list, and it’s certainly not the worst. Codeanywhere enables the synchronization with FTP, SSH and even storage sites like Dropbox, to give you access to your files wherever you are. It’s the ultimate tool for web workers on the move. Best of all, it is light weight and fast, so you can concentrate on working, not on the fact that you working from a browser.