Entwicklertools-Terminal

Addi Osmani
Addy Osmani
Twitter GitHub

DevTools Terminal ist eine neue Chrome-Entwicklertools-Erweiterung, mit der Sie die Leistung des Terminals in Ihrem Browser nutzen können. Wenn Sie jemals zwischen Chrome und der Befehlszeile wechseln müssen, um z. B. Assets herunterzuladen oder Git, Grunt, Wget oder sogar Vim zu verwenden, könnte diese Erweiterung eine wertvolle Zeitersparnis sein.

Das DevTools Terminal eignet sich hervorragend für schnelle Änderungen an der Befehlszeile.
Das Entwicklertools-Terminal eignet sich für schnelle Befehlszeilenänderungen innerhalb von Chrome, während Sie mit Ihrer Webanwendung arbeiten.
cURL im Terminal der Entwicklertools verwenden
Nachdem ich Als cURL kopieren im Netzwerkbereich verwendet habe, kann ich den vollständigen Befehl ganz einfach in das DevTools-Terminal einfügen und ausführen.

Warum ein Terminal im Browser verwenden?

Während der Entwicklung sind Sie wahrscheinlich an verschiedene Tools gewöhnt: Ihren Texteditor zum Authoring, einen Browser zum Testen und Debuggen und das Terminal zum Aktualisieren von Paketen, Curling-Header oder sogar einen Build-Prozess mit Grunt.

Grunt wird im Entwicklertools-Terminal ausgeführt.
Build-Aufgaben mit Grunt ausführen, ohne den Browser verlassen zu müssen.

Wenn während der Entwicklung der Kontext zwischen den Tools gewechselt werden muss, kann das ablenkend sein und zu Ineffizienz führen. Wir haben bereits darüber gesprochen, wie Sie (für bestimmte Arten von Projekten) Code direkt in den Chrome-Entwicklertools mithilfe von Arbeitsbereichen debuggen und erstellen können, ohne den Browser zu verlassen.

Git-Workflow
Es ist auch ein vollständiger Git-Workflow möglich. Ideal für Git-Differenzen nach dem Erstellen in einem Arbeitsbereich.

Das DevTools Terminal (von Dmitry Filimonov) vervollständigt diese Geschichte und ermöglicht es, im selben Fenster zu programmieren, zu debuggen und zu erstellen. Sie erhalten Zugriff auf Tab-, Strg- und sogar Git-Farben, sodass es dem Terminal vertraut wird, das Sie in Ihrem täglichen Workflow verwendet haben.

Workflow

Erstellungsworkflow.
Starten Sie neue Projekte mit einem git clone, yeoman oder einem anderen Tool, auf das über das Terminal zugegriffen werden kann.

Mein persönlicher Workflow zum Erstellen von Inhalten in Chrome sieht jetzt etwa so aus:

  • DevTools Terminal verwenden, um ein GitHub-Repository git clone, touch eine neue Datei oder yo (yeoman) auszuführen, um eine App zu erstellen. Wenn ich möchte, kann ich auch einen neuen Server starten, um die App in der Vorschau anzusehen.
  • Arbeitsbereiche:Meine Web-App in Chrome bearbeiten und debuggen. Wenn ich einen Server zuvor gestartet habe, kann ich mein lokales Projekt meinen Netzwerkdateien zuordnen. Ich kann SASS oder Less verwenden und meine Änderungen am CSS-Präprozessor meinen CSS-Dateien zuordnen.
  • DevTools-Terminal:Ich kann jetzt die Versionsverwaltung festlegen, einen Paketmanager (npm, bower) verwenden, um Abhängigkeiten abzurufen, oder meinen Build-Prozess ausführen (grunt, make), um eine optimierte Version derselben App zu generieren.
  • Obwohl es eine Weile dauern kann, sich an die Anordnung der Fenster zu gewöhnen, ist es schön, dass ich die meisten Dinge, die ich brauche, aus dem Browser erledigen kann.
„ls“ im Terminal verwenden.
Sie können die Dateinamen im aktuellen Arbeitsverzeichnis mit ls auflisten. Ideal für die Visualisierung von Verzeichnissen außerhalb Ihres Arbeitsbereichs.

Installation

Das DevTools Terminal kann über den Chrome Web Store installiert werden. Als Mac- oder Linux-Nutzer können Sie nach dem Hinzufügen zu Chrome einfach „Element untersuchen“ oder Ctrl + Shift + I öffnen, um die Entwicklertools zu öffnen und über den neuen Tab „Terminal“ darauf zuzugreifen. Windows-Nutzer müssen die Erweiterung über einen Node.js-Proxy mit dem Systemterminal verbinden. Installieren Sie für diese Einrichtung das Modul devtools-terminal von npm: npm install -g devtools-terminal

Öffnen Sie dann ein neues Befehlszeilenfenster und führen Sie devtools-terminal aus. Öffnen Sie als Nächstes die Entwicklertools und stellen Sie auf der Registerkarte „Terminal“ mithilfe der Standardkonfigurationsoptionen eine Verbindung zum Server her. Bei Bedarf können Sie den Port und die Adresse weiter anpassen.

Das DevTools Terminal unterstützt das Anpassen von Verbindungsdetails während der Einrichtung.

Beschränkungen

Für das DevTools-Terminal gelten einige Einschränkungen. Im Gegensatz zu Terminal.app oder iTerm2 auf dem Mac werden hier noch keine Tabs, mehrere Fenster oder die Verlaufswiedergabe unterstützt. Sie können jedoch beliebig viele neue Tabs in Chrome öffnen. Jeder Tab kann eine eigene DevTools-Terminalinstanz haben. Dies ist über den Bildschirm „Chrome-Apps“ möglich:

Das DevTools-Terminal unterstützt sowohl ein helles als auch ein dunkles Design.
Derzeit unterstützt die Erweiterung sowohl das standardmäßige helle als auch ein dunkles Design.

Diese Erweiterung basiert derzeit auf NPAPI, die im Laufe des nächsten Jahres zugunsten der Native Messaging API eingestellt wird. Dmitry Fillimonov, Autor des Entwicklertools-Terminals, plant, in naher Zukunft entweder diese API oder die Native Client API von NPAPI zu entfernen.

Ergebnisse

Mit dem DevTools-Terminal und ähnlichen Erweiterungen wie Auxilio können Sie während der Entwicklung den Wechsel zwischen Editor, Browser und Befehlszeile vermeiden. Auch wenn ein Browser-Terminal nicht für alle Nutzer interessant ist, finden Sie die Erweiterung möglicherweise als nützliche Ergänzung zu Ihrem Workflow. Probieren Sie sie aus und überzeugen Sie sich selbst.