Moderne Trends und Webanwendungen haben die Art und Weise, wie Webentwickler erstellen können, drastisch verändert. Sie benötigen offensichtlich eine Art IDE, um neue Dateien zu programmieren und für die Bereitstellung zu speichern. Aber wie wäre es, wenn Sie einfach die Codeschnipsel testen? Es stehen heute mehr Tools zur Verfügung als je zuvor!
In diesem Artikel möchte ich zusammenfassen 10 interessante Webanwendungen zum Online-Testen Ihres Codes. Alle diese Apps erfordern eine Internetverbindung, und einige der fortgeschritteneren Herausgeber bieten professionelle Pläne zur Aktualisierung Ihrer Kontofunktionen an. Aber die meisten dieser Tools werden sicherlich nützlich sein, wenn Sie Schwierigkeiten haben, einen JavaScript- oder PHP-Block zu debuggen.
JSBin
Ähnlich wie beim vorherigen, jsbin ist eine einfache JavaScript-Debugging-Konsole. Ihr Vorschlag beinhaltet eine gemeinsame Anstrengung, bei der Sie einen privaten Link mit anderen Entwicklern teilen und in Echtzeit gemeinsam schreiben können.
Die Benutzeroberfläche kann für Neulinge etwas verwirrend sein. Die Entwickler haben einige Online-Tutorials eingerichtet, die Sie bei Interesse lesen können. Grundsätzlich können Sie aus einer beliebigen Anzahl von JS-Bibliotheken auswählen: jQuery, JQuery UI, jQM, Prototype, MooTools, es gibt Dutzende zur Auswahl.
Während Sie verschiedene Elemente codieren, werden Entwürfe automatisch gespeichert. Sie haben die Möglichkeit, Ihr Endprodukt herunterzuladen oder den Quellcode online gespeichert zu lassen. Ihr System ist viel fortschrittlicher für den Export und die Pflege Ihres Codes als Basisvorlage.
jsFiddle
Jeder, der Stack Overflow durchstöbert hat, sollte es wissen jsFiddle. Die Schnittstelle unterscheidet sich stark von JSBin und unterstützt komplexere Funktionen.
Sie können sofort Melde dich hier an um einen freien Account zu erhalten und beginnen Sie, Ihre Codebeispiele online zu speichern. jsFiddle bietet eine kurze URL, die Sie über im Web teilen können Twitter, Facebook, sogar Pila. Bedenken Sie jedoch, dass Sie kein Konto benötigen, um mit dem Codieren zu beginnen. Es ist einfach eine praktische Funktion, um alles organisiert zu halten.
jsFiddle unterstützt auch das Einbinden von Bibliotheken wie Prototype und jQuery. Sie können in jedes Testdokument zusätzliche externe Ressourcen für JS/CSS-Dateien einbinden.
CodePen
CodePen Es ist eher ein soziales Netzwerk für Webentwickler als ein einfacher Code-Spielplatz. Wir können nicht nur sehen, wie Menschen Code in HTML, CSS und JavaScript teilen, der Pen genannt wird, sondern wir können auch den Pen liken, Kommentare hinzufügen, eine Pen-Sammlung auswählen, einen Beitrag erstellen und der Herausforderung folgen, um unsere Webentwicklungsfähigkeiten zu verbessern.
CodeSandbox
Sandbox-Codes ist ein voll ausgestatteter JavaScript-Spielplatz. Zusätzlich zur Ausführung von Vanilla-JavaScript-Code oder einem Framework wie React.js, Vue.js und Schlankkönnen Sie auch eine funktionierende Node.js-Anwendung ausführen. Das bedeutet, dass Sie Node.js-Abhängigkeiten in der Datei package.json definieren können. Codesandbox lädt NPM-Abhängigkeiten automatisch herunter. Es bietet auch Zugriff auf ein webbasiertes Terminal, damit Sie es ausführen können jedes NPM-Skript direkt aus dem Browser.
Beobachten Sie die Erkunden Seite, um coole Dinge zu finden, die in CodeSandbox integriert sind.
Webseitenersteller
Webseitenersteller ist ein Code-Spielplatz für HTML, CSS, JavaScript und Präprozessoren wie Sass, LESS und JSX. WebMaker kompiliert automatisch die Syntax dieser Präprozessoren, damit der Browser den Code korrekt rendert. Sie können es im Browser verwenden oder installieren. die Erweiterung in Chrom So können Sie weiterhin offline mit dem Code spielen. Wenn Sie mit dem Experimentieren mit Ihrem Code fertig sind, können Sie Ihre Arbeit lokal speichern, die Dateien herunterladen oder auf CodePen teilen.
CSSDesk
Wir sind von der Welt der Skripte zur Stylesheet-Sprache übergegangen CSSDesk. Sie haben ein ähnliches Setup wie die anderen, mit dem Quellcode auf der linken Seite und der endgültigen Webseite auf der rechten Seite. Diese Web-App eignet sich hervorragend zum Erstellen kleiner Webseitenvorlagen und zum Testen längerer CSS3-Eigenschaften mit Farbverläufen und Boxschatten.
Mit dieser Anwendung können Sie auch den Quellcode als Dateien auf Ihren Computer herunterladen. In Situationen, in denen Sie an einem Laptop ohne IDE-Software arbeiten, kann es ein solider Ersatz sein. Oder Sie können zusätzlich einen kurzen URL-Link generieren, um ihn online zu teilen. Dann kommen möglicherweise andere Entwickler und bearbeiten das, was Sie bereits erstellt haben. Es ist auf jeden Fall eine interessante Lösung!
IDEOne
IDE eins ist ein weiteres Tool, das auf tiefer Programmierung und Softwareentwicklung basiert. Sein Online-Editor unterstützt die Syntaxhervorhebung für einige sehr bekannte Sprachen. Dazu gehören Objective-C, Java, C#, VB.NET, SQL und viele mehr.
Das Tolle an ihrer App ist, dass Sie schnell viele verschiedene Programmiersprachen von derselben Seite aus debuggen können. Sie können diesen Quellcode auch über eine eindeutige URL speichern, um ihn im Web zu teilen. Ich denke jedoch, dass ihr Design zu voll mit Anzeigen und anderen Inhalten ist, was die Nutzung ihrer Website erschwert. Es wäre großartig, die Option zu sehen, alternative Codebibliotheken einzubeziehen, wie zum Beispiel Cocoa Touch für die iPhone-App-Entwicklung.
JSLint
Das selbsternannte JavaScript-Code-Qualitätstool sollte es sein JSLint. Ihre Website ist etwas seltsam, aber der Code-Editor funktioniert genau so, wie man es erwarten würde.
Sie könnten die Optionen sehr verwirrend finden, wenn Sie deren Framework noch nicht verwendet haben. Es ist möglich, mit Open-Source-Code zu arbeiten, z Node.js Wenn Sie über die entsprechenden Fähigkeiten verfügen, unterstützt ein Großteil des Quellcodes jedoch nicht einmal die Syntaxhervorhebung. Eine große Enttäuschung, wenn Sie so viele andere Optionen zur Auswahl haben. Wenn Sie Zeit haben, würde ich mir JSLint ansehen, aber es wird möglicherweise nicht zu Ihrem Online-JavaScript-Debugger.
SQL-Violine
Zuvor haben wir die Leistungsfähigkeit einer Webanwendung wie jsFiddle gesehen. Jetzt können wir sehen SQL-Violine Dies funktioniert bis auf die SQL-Datenbanksyntax auf die gleiche Weise. Ich habe noch keine andere Alternative zum Testen von Datenbankcode gefunden und dies ist bei weitem meine Lieblingsoption.
Alle Ausgabedaten Ihres SQL-Codes werden in einer Tabelle unterhalb der Editoren angezeigt. Sie können Code schreiben, um rechts neue Daten zu implementieren und links ein Schema zu generieren. Bei diesem Datenbankschema handelt es sich um SQL-Code, den Sie speichern können, um Ihre aktuelle Datenbank zu exportieren und alles auf einem neuen Server neu zu installieren.
Wenn Sie mit Datenbanken oder der SQL-Sprache nicht vertraut sind, wird Ihnen diese Anwendung nicht viel weiterhelfen. Aber auch für Entwickler, die neu sind, aber daran interessiert sind, SQL zu lernen, ist das großartig! Schauen Sie sich eines von ihm an grundlegende Codebeispiele So können Sie sich ein Bild von der Funktionsweise der App machen.
ESLint-Demo
Mit ESLint können Sie Schreibregeln in Ihrem Code festlegen. Es ist ein großartiges Tool, wenn Sie innerhalb eines Teams an einem gemeinsamen Projekt arbeiten, um sicherzustellen, dass alle beim Schreiben von Code die gleichen Stile und Regeln befolgen. Es bietet viele Optionen zur Steuerung Ihrer Codestile, was oft ziemlich einschüchternd ist, insbesondere wenn Sie gerade erst mit ESLint beginnen.
Diese ESLint-Online-Demoseite kann Ihnen helfen, zu testen, wie jede Regel mit Ihrem Code funktioniert, noch bevor Sie die NPM-Pakete installieren. Bietet die vollständige Liste der Regeln, die Sie aktivieren und deaktivieren können. Wenn alles eingerichtet ist, können Sie die Konfigurationsdatei herunterladen, um sie Ihrem Projekt hinzuzufügen.
PHPStan
PHPStan ist ein statisches Code-Analysetool für PHP. Prüft auf Codefehler und potenzielle Fehler, ohne den Code auszuführen. Hier erfahren Sie, ob Sie beispielsweise einen String-Wert an eine Funktion übergeben, die tatsächlich eine Ganzzahl akzeptiert oder auf eine Eigenschaft zugreift, die in einer Klasse nicht vorhanden ist.
Probieren Sie den Online-Editor auf dieser PHPStan-Website aus, um zu sehen, wie er funktioniert. Sie werden überrascht sein, dass es so viel PHP-Code gibt, der weiter optimiert und mögliche Fehler korrigiert werden kann. Die statische Analyse kann Sie auch dabei unterstützen, ein besserer Entwickler zu werden, so wie Sie es gewohnt sind, syntaktisch korrekten Code zu schreiben.
ein Compiler
Ein All-in-One-Compiler für viele Programmiersprachen. Es unterstützt über 40 Sprachen, darunter Go, PHP, Java, JavaScript und sogar C und C++. Sie können diese Sprachen in diese Tools schreiben und der Code wird sofort kompiliert und ausgeführt. Dieses Tool eignet sich perfekt zum schnellen Testen Ihres Codes für eine Demo oder zum Ausführen eines Schnelltests.
Neben dem Code-Runner bietet dieses Tool auch Code-Herausforderungen, um Ihre Programmier- und Problemlösungsfähigkeiten zu verbessern. Sie können die Herausforderung vom Anfängerniveau bis zum fortgeschrittensten Niveau beginnen.
Jsitor
Ein Online-Code-Editor, mit dem Sie JavaScript, HTML und CSS ausführen können. Es enthält einige beliebte Bibliotheken wie jQuery, React.js, Vue.js, Font Awesome und viele mehr. Es ist ein großartiges Tool, um Ihre Idee zu testen, ohne eine Arbeitsumgebung auf Ihrem Computer einrichten zu müssen. Sie können es auch verwenden, um eine kurze Demo durchzuführen.
Was es von anderen ähnlichen Tools unterscheidet, ist die Bereitstellung einer nativen App für iOS und Android. So können Sie Ihre Idee bequem mit Ihrem Tablet und Telefon festhalten.
Versagen
Ein Tool, mit dem Sie mit einigen modernen Bibliotheken und Frameworks statische Websites erstellen können. Enthält React.js, Node.js und Eleventy.js. Sie können aber auch einfaches HTML, CSS und JavaScript schreiben.
Neben dem Online-Editor, in dem Sie Ihre Codes schreiben, bietet Glitch auch mehrere erweiterte Tools, die es zu einer großartigen Online-Arbeitsumgebung zum Erstellen statischer Websites machen. Es verfügt über ein Online-Terminal, in dem Sie Befehle eingeben, Protokolle anzeigen und einen Browser-Debugger haben.
Sobald Sie die Website fertig haben, können Sie die Dateien herunterladen oder die eindeutige URL des Projekts teilen.
Stackblitz
Stackblitz ist eine Online-Entwicklungsumgebung, in der Sie Websites mit modernen Stacks erstellen können. Es unterstützt das Backend-Framework Next.js und Node.js sowie einige beliebte Front-End-Bibliotheken wie React.js, Vue.js und Angular.
Sie können eines dieser Frameworks als Ausgangspunkt für Ihr Projekt auswählen oder einfach per Drag & Drop einen Ordner hineinziehen. Es ist mit Tools vorkonfiguriert, die Sie normalerweise selbst konfigurieren müssen, wenn Sie lokal auf Ihrem Computer arbeiten, z. B. automatische Aktualisierung, Installation von Abhängigkeiten usw hübscher.
Darüber hinaus können Sie auch Ihre Website anbinden. Feuerbasisfür den Fall, dass Sie in Echtzeit eine Verbindung zu einer Datenbank herstellen müssen.
Tastatur
(Die Tastatur wurde eingestellt.)
Ursprünglich erstellt von Steven Hazel, Tastatur ist eine einzigartige Webanwendung, mit der Sie Codesyntax im Web teilen können. Anstatt einfach nur zu debuggen, können Sie mit Codepad wichtige Codeausschnitte kopieren und einfügen, um sie online zu teilen.
Auf dem Ausgabebildschirm werden alle mit Ihrem Code verbundenen Fehlermeldungen angezeigt. Mit den Optionsfeldern im linken Menü können Sie die Parsing-Sprache von C/C++, Perl, PHP, Python, Ruby und vielen mehr ändern. Ich würde sagen, Codepad ist wirklich für Softwareentwickler gedacht, die zusammenarbeiten und ihre verwirrendsten Programme debuggen müssen.
Abschließende Gedanken
Da immer mehr Computer online verbunden sind, wird es für Entwickler immer einfacher, im Browser zusammenzuarbeiten und zusammenzuarbeiten. Wir sehen, dass immer mehr Technologien lokale Anwendungen aufgeben, und wer weiß, wie weit dieser Trend gehen wird?
Ich hoffe, dass diese Sammlung von Code-Testtools Sie zum Nachdenken über die moderne Entwicklungsumgebung anregen kann. Es ist sehr einfach, schnell ein HTML/CSS-Webprojekt zusammenzustellen und in wenigen Minuten eine kleine Demo-Vorschau zu erhalten. Denken Sie daran, dass es sich lediglich um Werkzeuge handelt, die Sie auf dem Weg zur Entwicklung Ihres Endprodukts unterstützen. Wenn Sie Anregungen oder Fragen zu dem Artikel haben, können Sie Ihre Gedanken gerne im Diskussionsbereich unten mitteilen.
