Die 7 besten browserbasierten Online-Code-Editoren für Webentwickler

Wenn Sie ein Webentwickler sind, haben Sie sehr wahrscheinlich eine lokal auf Ihrer Workstation eingerichtete Entwicklungsumgebung. Sie haben Ihren bevorzugten Code-Editor installiert, die besten Pakete hinzugefügt, Erweiterungen geladen und die gesamte IDE funktioniert genau so, wie Sie sie benötigen. Aber was ist, wenn Sie nicht an Ihrem normalen Computer sitzen? Was ist, wenn Sie auf Reisen sind, vertrieben wurden oder sogar ohne Laptop von zu Hause aus arbeiten? Was dann? Dann kann es wirklich den Tag retten, wenn Sie wissen, welche Online-Code-Editoren es gibt. Und darüber hinaus, vielleicht sogar in Ihrer Gesäßtasche, um Ihre normale Programmierroutine zu verbessern.

Abonnieren Sie unseren Youtube-Kanal

Warum Online-Code-Editoren?

Es gibt mehrere Gründe, die Verwendung von Online-Code-Editoren in Betracht zu ziehen. Die Wahrheit ist jedoch, dass die Verwendung einer Online-IDE (höchstwahrscheinlich) Ihre lokal installierte nicht ersetzen wird. Obwohl viele Online-Umgebungen erstaunlich robust sind und den größten Teil Ihrer Arbeit bewältigen können, sind sie einfach nicht so robust und leistungsfähig wie Desktop-Installationen. Es gibt jedoch mehrere Gründe, die Verwendung eines solchen zu erwägen.

• Sie sind auf Reisen und benötigen überall Zugriff auf Ihren Code.
• Sie müssen Snippets und interaktive Codeabschnitte teilen.
• Ihre Zeit ist begrenzt und Sie benötigen eine Lösung mit nahezu null Einrichtung.
• Ihr Budget ist begrenzt. Online-Code-Editoren haben möglicherweise mehr Macht als die Workstation, auf die Sie Zugriff haben.
• Ihr Team muss in Echtzeit zusammenarbeiten. Viele Online-IDEs verfügen über integrierte Tools für die Zusammenarbeit, die ohne Einrichtung funktionieren.

Unabhängig davon, warum Sie eine Online-IDE verwenden möchten oder müssen, stehen Ihnen unzählige Möglichkeiten zur Auswahl, jede mit unterschiedlichen Stärken und Schwächen und mit unterschiedlichen Funktionen für Webentwickler.

1. PlayCode

PlayCode ist ein netter Allzweck-Online-Code-Editor. Damit können Sie mehrere Dateien öffnen, die zusammen in einem einzigen Projekt ausgeführt werden, genau wie Sie es mit mehreren Dateien in einer typischen Verzeichnisstruktur mit Sublime Text oder VS Code tun würden. PlayCode hat vorgefertigte Vorlagen für Benutzer sowie Echtzeitergebnisse und integriertes Konsolen-Debugging direkt im Browser. Benutzer können bearbeiten und arbeiten, ohne für schnelle Fehlerbehebungen und so weiter angemeldet zu sein, sich aber auch anmelden, um die Arbeit zu speichern und PlayCode maschinenübergreifend zu verwenden.

Mehr Informationen

2. JSFiddle

JSFiddle ist ein weiterer Top-Online-Code-Editor, der in vielerlei Hinsicht wie PlayCode funktioniert. JSFiddle wurde speziell für JavaScript-Programmierer entwickelt und ist nicht unbedingt für die Arbeit an ganzen Projekten geeignet, aber wie die Informationsleiste oben im Editor selbst sagt, funktioniert es am besten für "Demos für Dokumente, Fehlerberichte für Github-Probleme, Präsentation von Codeantworten auf" Stack Overflow, Live-Code-Zusammenarbeit, Code-Snippet-Hosting“ oder einfach nur eine Sandbox, in der Sie mit Ihrem Code herumspielen können.

Mehr Informationen

3. CodePen

CodePen wird wahrscheinlich als der Online-Code-Editor der Online-Code-Editoren angesehen. Es bietet Ihnen nicht nur die Werkzeuge für Zusammenarbeit, Experimentieren und Teilen, sondern Sie erhalten auch Live-Ergebnisse und die Möglichkeit, ihre Datenbank und das Repository mit Snippets zu durchsuchen, die andere Autoren bereitgestellt haben, damit Sie auch experimentieren und von ihrer Arbeit lernen können . Es ist auch ein unterhaltsamer Ort, um zu sehen, was manche Leute auf neue und unterhaltsame Weise mit Code machen. Außerdem werden CodePen-Snippets von Google indiziert, und oft landen Sie hier, wenn Sie nach einer Lösung suchen, bevor Sie zu Stack Overflow gehen – und manchmal auch danach, weil dort oft Echtzeitlösungen geschrieben und geteilt werden.

Mehr Informationen

4. StackBlitz

StackBlitz ist gutes Zeug. Wir sind sehr beeindruckt von dem, was diese App Entwicklern bietet, da sie vollgepackt mit Werkzeugen ist, mit denen Sie Ihr Projekt mit einem laufenden Start auf den Weg bringen können. Mit einem einzigen Klick. Wenn Sie sich das obige Bild ansehen, wurden die Dateien und Abhängigkeiten und sogar gemeinsam nutzbare URLs alle mit einer einzigen Schaltfläche „ Neuen Arbeitsbereich starten – Reagieren“ (JavaScript) generiert. Mit der Möglichkeit, Ihr GitHub-Konto zu speichern, zu teilen und sogar mit ihm zu verbinden, verdient StackBlitz einen Blick. Anstatt ein Snippet-Sharing-Dienst oder eine Codierungs-Sandbox zu sein, ist StackBlitz eine solide IDE für diejenigen, die Online-Code-Editoren bevorzugen.

Außerdem, und das können wir nicht selbstverständlich lassen, basiert es auf VS Code. Sie führen also im Grunde die beliebteste IDE und den beliebtesten Code-Editor in Ihrem Browser aus, und jedes Projekt erhält seinen eigenen Serverraum. Sie können ein Upgrade durchführen, wenn Sie möchten, aber auch die kostenlose Version funktioniert gut (wenn auch etwas langsam unter Last, aber das ist von kostenlosen Plänen zu erwarten). Lesen Sie es und wir denken, Sie werden mir zustimmen, dass es sich von allen Online-Code-Editoren lohnt, einen langen, genauen Blick darauf zu werfen.

Mehr Informationen

5. AWS Cloud9

Als Early Adopter von Cloud9 vor Jahren, als es ein Open-Source-Projekt auf c9.io war , empfehlen wir dieses Produkt wärmstens. Tatsächlich bietet es eine sehr ähnliche Erfahrung wie StackBlitz oben. Als Amazon C9 erwarb, haben sie es als Teil ihrer AWS-Service-Suite mit ihrer Cloud verbunden. AWS Cloud9 ist definitiv eine solide, voll funktionsfähige Online-IDE, und der Informationstext auf ihrer Website macht einen guten Job, um genau aufzuschlüsseln, warum es sich lohnt, einen Blick darauf zu werfen.

AWS Cloud9 ist eine Cloud-basierte integrierte Entwicklungsumgebung (IDE), mit der Sie Ihren Code mit nur einem Browser schreiben, ausführen und debuggen können. Es enthält einen Code-Editor, einen Debugger und ein Terminal. Cloud9 wird mit wichtigen Tools für gängige Programmiersprachen wie JavaScript, Python, PHP und mehr vorgefertigt, sodass Sie keine Dateien installieren oder Ihren Entwicklungscomputer konfigurieren müssen, um neue Projekte zu starten. Da Ihre Cloud9-IDE Cloud-basiert ist, können Sie von Ihrem Büro, zu Hause oder von überall aus an Ihren Projekten arbeiten, indem Sie einen mit dem Internet verbundenen Computer verwenden. Cloud9 bietet auch eine nahtlose Erfahrung für die Entwicklung serverloser Anwendungen, mit der Sie problemlos Ressourcen definieren, Debuggen und zwischen der lokalen und Remote-Ausführung von serverlosen Anwendungen wechseln können. Mit Cloud9 können Sie Ihre Entwicklungsumgebung schnell mit Ihrem Team teilen, sodass Sie die Eingaben des anderen in Echtzeit koppeln und nachverfolgen können.

Mehr Informationen

6. JSBin

Wenn Sie PasteBin jemals gesehen oder verwendet haben, wird JSBin bekannt sein. Es ist in Struktur, Stil und Nutzen ähnlich, JSBin ist hauptsächlich eine Site zum Teilen von Code. Wir glauben, dass es definitiv am besten ist, hier ein Konto zu registrieren, um eingeloggt zu bleiben. Der Grund dafür ist, dass JSBin automatisch Ihren Fortschritt bei jedem Code speichert, mit dem Sie arbeiten. Selbst wenn Sie nur experimentieren, um zu sehen, was Snippets bewirken, werden Sie Ihre Arbeit nicht verlieren. JSBin ist ein einfacher, schnörkelloser Editor. Und wenn Sie das brauchen, können Sie wirklich nicht besser werden.

Mehr Informationen

7. WordPress-Theme-Editor

WordPress ist vielleicht nicht das Erste, woran Sie in Bezug auf Online-Code-Editoren denken. Aber es ist definitiv etwas zu bedenken. In WordPress 4.9 wurde WP Core aktualisiert und enthält CodeMirror. Syntaxhervorhebung und Fehlerwarnungen für alle Änderungen, die innerhalb von Codebereichen vorgenommen werden, sind jetzt bei WordPress Standard. Der primäre Ort dafür befindet sich im Bereich Erscheinungsbild – Theme-Editor , erscheint aber auch in jedem Widget-Bereich (wie dem benutzerdefinierten HTML- Widget) oder im Theme-Anpasser auf der Registerkarte Custom CSS . Obwohl dies definitiv keine vollständige IDE ist, können wir den WP CodeMirror-Editor absolut empfehlen, um Fehler zu überprüfen und Codeschnipsel zu aktualisieren, ohne sich mit FTP und verschiedenen Dateiverwaltungssystemen beschäftigen zu müssen.

Mehr Informationen

Abschluss mit Online-Code-Editoren

Die meisten Online-Code-Editoren werden Ihre lokale Entwicklungsumgebung nicht ersetzen. Das ist nicht ihre Aufgabe. Meist. Was sie jedoch tun können, ist eine solide und einfache Möglichkeit, Code zu bearbeiten, Snippets zu teilen, Backups zu erstellen und mit neuen Funktionen in Echtzeit an einem sicheren Ort zu experimentieren. Zwischen vollständigen IDEs wie StackBlitz, Snippet-Sharing-Diensten wie JSBin und sogar nur qualitativ hochwertigen Online-Code-Editoren wie der WordPress CodeMirror-Integration gibt es keinen besseren Zeitpunkt, um anzufangen, wenn Sie noch nie mit der Online-Bearbeitung herumgespielt haben.

Was sind Ihre bevorzugten Online-Code-Editoren?

Beitragsbild des Artikels von Fernandodiass / shutterstock.com