Moderne Trends und Webanwendungen haben die Art und Weise, wie Webentwickler erstellen k\u00f6nnen, drastisch ver\u00e4ndert. Sie ben\u00f6tigen offensichtlich eine Art IDE, um neue Dateien zu programmieren und f\u00fcr die Bereitstellung zu speichern. Aber wie w\u00e4re es, wenn Sie einfach die Codeschnipsel testen? Es stehen heute mehr Tools zur Verf\u00fcgung als je zuvor!<\/p>\n
In diesem Artikel m\u00f6chte ich zusammenfassen 10 interessante Webanwendungen zum Online-Testen Ihres Codes<\/strong>. Alle diese Apps erfordern eine Internetverbindung, und einige der fortgeschritteneren Herausgeber bieten professionelle Pl\u00e4ne zur Aktualisierung Ihrer Kontofunktionen an. Aber die meisten dieser Tools werden sicherlich n\u00fctzlich sein, wenn Sie Schwierigkeiten haben, einen JavaScript- oder PHP-Block zu debuggen.<\/p>\n \u00c4hnlich wie beim vorherigen, jsbin<\/strong> 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\u00f6nnen.<\/p>\n Die Benutzeroberfl\u00e4che kann f\u00fcr Neulinge etwas verwirrend sein. Die Entwickler haben einige Online-Tutorials eingerichtet, die Sie bei Interesse lesen k\u00f6nnen. Grunds\u00e4tzlich k\u00f6nnen Sie aus einer beliebigen Anzahl von JS-Bibliotheken ausw\u00e4hlen: jQuery, JQuery UI, jQM, Prototype, MooTools, es gibt Dutzende zur Auswahl.<\/p>\n W\u00e4hrend Sie verschiedene Elemente codieren, werden Entw\u00fcrfe automatisch gespeichert. Sie haben die M\u00f6glichkeit, Ihr Endprodukt herunterzuladen oder den Quellcode online gespeichert zu lassen. Ihr System ist viel fortschrittlicher f\u00fcr den Export und die Pflege Ihres Codes als Basisvorlage.<\/p>\n Jeder, der Stack Overflow durchst\u00f6bert hat, sollte es wissen jsFiddle<\/strong>. Die Schnittstelle unterscheidet sich stark von JSBin und unterst\u00fctzt komplexere Funktionen.<\/p>\n Sie k\u00f6nnen sofort Melde dich hier an um einen freien Account zu erhalten<\/a> und beginnen Sie, Ihre Codebeispiele online zu speichern. jsFiddle bietet eine kurze URL, die Sie \u00fcber im Web teilen k\u00f6nnen Twitter, Facebook, sogar Pila. Bedenken Sie jedoch, dass Sie kein Konto ben\u00f6tigen, um mit dem Codieren zu beginnen. Es ist einfach eine praktische Funktion, um alles organisiert zu halten.<\/p>\n jsFiddle unterst\u00fctzt auch das Einbinden von Bibliotheken wie Prototype und jQuery. Sie k\u00f6nnen in jedes Testdokument zus\u00e4tzliche externe Ressourcen f\u00fcr JS\/CSS-Dateien einbinden.<\/p>\n CodePen<\/strong> Es ist eher ein soziales Netzwerk f\u00fcr Webentwickler als ein einfacher Code-Spielplatz. Wir k\u00f6nnen nicht nur sehen, wie Menschen Code in HTML, CSS und JavaScript teilen, der Pen genannt wird, sondern wir k\u00f6nnen auch den Pen liken, Kommentare hinzuf\u00fcgen, eine Pen-Sammlung ausw\u00e4hlen, einen Beitrag erstellen und der Herausforderung folgen, um unsere Webentwicklungsf\u00e4higkeiten zu verbessern.<\/p>\n Sandbox-Codes<\/strong> ist ein voll ausgestatteter JavaScript-Spielplatz. Zus\u00e4tzlich zur Ausf\u00fchrung von Vanilla-JavaScript-Code oder einem Framework wie React.js, Vue.js und Schlank<\/a>k\u00f6nnen Sie auch eine funktionierende Node.js-Anwendung ausf\u00fchren. Das bedeutet, dass Sie Node.js-Abh\u00e4ngigkeiten in der Datei package.json definieren k\u00f6nnen. Codesandbox l\u00e4dt NPM-Abh\u00e4ngigkeiten automatisch herunter. Es bietet auch Zugriff auf ein webbasiertes Terminal, damit Sie es ausf\u00fchren k\u00f6nnen jedes NPM-Skript direkt aus dem Browser<\/a>.<\/p>\n Beobachten Sie die Erkunden<\/a> Seite, um coole Dinge zu finden, die in CodeSandbox integriert sind.<\/p>\n Webseitenersteller<\/strong> ist ein Code-Spielplatz f\u00fcr HTML, CSS, JavaScript und Pr\u00e4prozessoren wie Sass, LESS und JSX. WebMaker kompiliert automatisch die Syntax dieser Pr\u00e4prozessoren, damit der Browser den Code korrekt rendert. Sie k\u00f6nnen es im Browser verwenden oder installieren. die Erweiterung in Chrom<\/a> So k\u00f6nnen Sie weiterhin offline mit dem Code spielen. Wenn Sie mit dem Experimentieren mit Ihrem Code fertig sind, k\u00f6nnen Sie Ihre Arbeit lokal speichern, die Dateien herunterladen oder auf CodePen teilen.<\/p>\n Wir sind von der Welt der Skripte zur Stylesheet-Sprache \u00fcbergegangen CSSDesk<\/strong>. Sie haben ein \u00e4hnliches Setup wie die anderen, mit dem Quellcode auf der linken Seite und der endg\u00fcltigen Webseite auf der rechten Seite. Diese Web-App eignet sich hervorragend zum Erstellen kleiner Webseitenvorlagen und zum Testen l\u00e4ngerer CSS3-Eigenschaften mit Farbverl\u00e4ufen und Boxschatten.<\/p>\n Mit dieser Anwendung k\u00f6nnen 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\u00f6nnen zus\u00e4tzlich einen kurzen URL-Link generieren, um ihn online zu teilen. Dann kommen m\u00f6glicherweise andere Entwickler und bearbeiten das, was Sie bereits erstellt haben. Es ist auf jeden Fall eine interessante L\u00f6sung!<\/p>\n IDE eins<\/strong> ist ein weiteres Tool, das auf tiefer Programmierung und Softwareentwicklung basiert. Sein Online-Editor unterst\u00fctzt die Syntaxhervorhebung f\u00fcr einige sehr bekannte Sprachen. Dazu geh\u00f6ren Objective-C, Java, C#, VB.NET, SQL und viele mehr.<\/p>\n Das Tolle an ihrer App ist, dass Sie schnell viele verschiedene Programmiersprachen von derselben Seite aus debuggen k\u00f6nnen. Sie k\u00f6nnen diesen Quellcode auch \u00fcber 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\u00e4re gro\u00dfartig, die Option zu sehen, alternative Codebibliotheken einzubeziehen, wie zum Beispiel Cocoa Touch f\u00fcr die iPhone-App-Entwicklung.<\/p>\n Das selbsternannte JavaScript-Code-Qualit\u00e4tstool sollte es sein JSLint<\/strong>. Ihre Website ist etwas seltsam, aber der Code-Editor funktioniert genau so, wie man es erwarten w\u00fcrde.<\/p>\n Sie k\u00f6nnten die Optionen sehr verwirrend finden, wenn Sie deren Framework noch nicht verwendet haben. Es ist m\u00f6glich, mit Open-Source-Code zu arbeiten, z Node.js<\/a> Wenn Sie \u00fcber die entsprechenden F\u00e4higkeiten verf\u00fcgen, unterst\u00fctzt ein Gro\u00dfteil des Quellcodes jedoch nicht einmal die Syntaxhervorhebung. Eine gro\u00dfe Entt\u00e4uschung, wenn Sie so viele andere Optionen zur Auswahl haben. Wenn Sie Zeit haben, w\u00fcrde ich mir JSLint ansehen, aber es wird m\u00f6glicherweise nicht zu Ihrem Online-JavaScript-Debugger.<\/p>\n Zuvor haben wir die Leistungsf\u00e4higkeit einer Webanwendung wie jsFiddle gesehen. Jetzt k\u00f6nnen wir sehen SQL-Violine<\/strong> 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.<\/p>\n Alle Ausgabedaten Ihres SQL-Codes werden in einer Tabelle unterhalb der Editoren angezeigt. Sie k\u00f6nnen 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\u00f6nnen, um Ihre aktuelle Datenbank zu exportieren und alles auf einem neuen Server neu zu installieren.<\/p>\n Wenn Sie mit Datenbanken oder der SQL-Sprache nicht vertraut sind, wird Ihnen diese Anwendung nicht viel weiterhelfen. Aber auch f\u00fcr Entwickler, die neu sind, aber daran interessiert sind, SQL zu lernen, ist das gro\u00dfartig! Schauen Sie sich eines von ihm an grundlegende Codebeispiele<\/a> So k\u00f6nnen Sie sich ein Bild von der Funktionsweise der App machen.<\/p>\n Mit ESLint k\u00f6nnen Sie Schreibregeln in Ihrem Code festlegen. Es ist ein gro\u00dfartiges 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\u00fcchternd ist, insbesondere wenn Sie gerade erst mit ESLint beginnen.<\/p>\n 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\u00e4ndige Liste der Regeln, die Sie aktivieren und deaktivieren k\u00f6nnen. Wenn alles eingerichtet ist, k\u00f6nnen Sie die Konfigurationsdatei herunterladen, um sie Ihrem Projekt hinzuzuf\u00fcgen.<\/p>\n PHPStan ist ein statisches Code-Analysetool f\u00fcr PHP. Pr\u00fcft auf Codefehler und potenzielle Fehler, ohne den Code auszuf\u00fchren. Hier erfahren Sie, ob Sie beispielsweise einen String-Wert an eine Funktion \u00fcbergeben, die tats\u00e4chlich eine Ganzzahl akzeptiert oder auf eine Eigenschaft zugreift, die in einer Klasse nicht vorhanden ist.<\/p>\n Probieren Sie den Online-Editor auf dieser PHPStan-Website aus, um zu sehen, wie er funktioniert. Sie werden \u00fcberrascht sein, dass es so viel PHP-Code gibt, der weiter optimiert und m\u00f6gliche Fehler korrigiert werden kann. Die statische Analyse kann Sie auch dabei unterst\u00fctzen, ein besserer Entwickler zu werden, so wie Sie es gewohnt sind, syntaktisch korrekten Code zu schreiben.<\/p>\n Ein All-in-One-Compiler f\u00fcr viele Programmiersprachen. Es unterst\u00fctzt \u00fcber 40 Sprachen, darunter Go, PHP, Java, JavaScript und sogar C und C++. Sie k\u00f6nnen diese Sprachen in diese Tools schreiben und der Code wird sofort kompiliert und ausgef\u00fchrt. Dieses Tool eignet sich perfekt zum schnellen Testen Ihres Codes f\u00fcr eine Demo oder zum Ausf\u00fchren eines Schnelltests.<\/p>\n Neben dem Code-Runner bietet dieses Tool auch Code-Herausforderungen, um Ihre Programmier- und Probleml\u00f6sungsf\u00e4higkeiten zu verbessern. Sie k\u00f6nnen die Herausforderung vom Anf\u00e4ngerniveau bis zum fortgeschrittensten Niveau beginnen.<\/p>\n Ein Online-Code-Editor, mit dem Sie JavaScript, HTML und CSS ausf\u00fchren k\u00f6nnen. Es enth\u00e4lt einige beliebte Bibliotheken wie jQuery, React.js, Vue.js, Font Awesome und viele mehr. Es ist ein gro\u00dfartiges Tool, um Ihre Idee zu testen, ohne eine Arbeitsumgebung auf Ihrem Computer einrichten zu m\u00fcssen. Sie k\u00f6nnen es auch verwenden, um eine kurze Demo durchzuf\u00fchren.<\/p>\n Was es von anderen \u00e4hnlichen Tools unterscheidet, ist die Bereitstellung einer nativen App f\u00fcr iOS und Android. So k\u00f6nnen Sie Ihre Idee bequem mit Ihrem Tablet und Telefon festhalten.<\/p>\n Ein Tool, mit dem Sie mit einigen modernen Bibliotheken und Frameworks statische Websites erstellen k\u00f6nnen. Enth\u00e4lt React.js, Node.js und Eleventy.js. Sie k\u00f6nnen aber auch einfaches HTML, CSS und JavaScript schreiben.<\/p>\n Neben dem Online-Editor, in dem Sie Ihre Codes schreiben, bietet Glitch auch mehrere erweiterte Tools, die es zu einer gro\u00dfartigen Online-Arbeitsumgebung zum Erstellen statischer Websites machen. Es verf\u00fcgt \u00fcber ein Online-Terminal, in dem Sie Befehle eingeben, Protokolle anzeigen und einen Browser-Debugger haben.<\/p>\n Sobald Sie die Website fertig haben, k\u00f6nnen Sie die Dateien herunterladen oder die eindeutige URL des Projekts teilen.<\/p>\n Stackblitz ist eine Online-Entwicklungsumgebung, in der Sie Websites mit modernen Stacks erstellen k\u00f6nnen. Es unterst\u00fctzt das Backend-Framework Next.js und Node.js sowie einige beliebte Front-End-Bibliotheken wie React.js, Vue.js und Angular.<\/p>\n Sie k\u00f6nnen eines dieser Frameworks als Ausgangspunkt f\u00fcr Ihr Projekt ausw\u00e4hlen oder einfach per Drag & Drop einen Ordner hineinziehen. Es ist mit Tools vorkonfiguriert, die Sie normalerweise selbst konfigurieren m\u00fcssen, wenn Sie lokal auf Ihrem Computer arbeiten, z. B. automatische Aktualisierung, Installation von Abh\u00e4ngigkeiten usw h\u00fcbscher<\/a>.<\/p>\nJSBin<\/a><\/h4>\n
jsFiddle<\/a><\/h4>\n
CodePen<\/a><\/h4>\n
CodeSandbox<\/a><\/h4>\n
Webseitenersteller<\/a><\/h4>\n
CSSDesk<\/a><\/h4>\n
IDEOne<\/a><\/h4>\n
JSLint<\/a><\/h4>\n
SQL-Violine<\/a><\/h4>\n
ESLint-Demo<\/a><\/h4>\n
PHPStan<\/a><\/h4>\n
ein Compiler<\/a><\/h4>\n
Jsitor<\/a><\/h4>\n
Versagen<\/a><\/h4>\n
Stackblitz<\/a><\/h4>\n