Entwicklertools-Terminal

Addy Osmani

DevTools Terminal ist eine neue Chrome-Entwicklertools-Erweiterung, die die Funktionen des Terminals in Ihren Browser bringt. Wenn Sie häufig zwischen Chrome und der Befehlszeile wechseln müssen, um Aufgaben wie das Herunterladen von Assets, die Verwendung von Git, Grunt, Wget oder sogar Vim auszuführen, kann diese Erweiterung Ihnen Zeit sparen.

Das DevTools-Terminal eignet sich hervorragend für schnelle Anpassungen über die Befehlszeile.
Das DevTools-Terminal ist nützlich für schnelle Anpassungen über die Befehlszeile in Chrome, während Sie an Ihrer Webanwendung arbeiten.
cURL im DevTools-Terminal verwenden
Nachdem ich im Bereich „Netzwerk“ die Option Als cURL kopieren 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 daran gewöhnt, mit verschiedenen Tools zu arbeiten: Ihrem Texteditor zum Erstellen, einem Browser zum Testen und Entfernen von Fehlern und dem Terminal zum Aktualisieren von Paketen, Curl-Headern oder sogar einem Build-Prozess mit Grunt.

Grunt im DevTools-Terminal ausführen
Build-Aufgaben mit Grunt ausführen, ohne den Browser verlassen zu müssen.

Wenn Sie während der Entwicklung zwischen Tools wechseln müssen, kann das ablenken und zu Ineffizienz führen. Wir haben bereits darüber gesprochen, wie Sie (bei bestimmten Arten von Projekten) mithilfe von Workspaces Code direkt in den Chrome-Entwicklertools debuggen und schreiben können, ohne den Browser zu verlassen.

Git-Workflow
Ein vollständiger Git-Workflow ist ebenfalls möglich. Ideal für einen Git-Diff nach der Erstellung in einem Arbeitsbereich.

Das DevTools-Terminal (von Dmitry Filimonov) rundet das Ganze ab und ermöglicht es, im selben Fenster zu programmieren, zu debuggen und zu bauen. Sie haben Zugriff auf die Tabulatortaste, die Strg-Taste und sogar Git-Farben, sodass es sich wie das Terminal anfühlt, das Sie in Ihrem täglichen Workflow gewohnt sind.

Workflow

Workflow für die Erstellung
Neue Projekte mit git clone, yeoman oder einem anderen Tool beginnen, auf das über das Terminal zugegriffen werden kann

Mein persönlicher Workflow für die Erstellung in Chrome sieht jetzt so aus:

  • DevTools-Terminal: Damit kann ich git clone ein GitHub-Repository touch eine neue Datei erstellen oder yo (yeoman) ausführen, um eine App zu erstellen. Wenn ich möchte, kann ich auch einen neuen Server starten, um eine Vorschau der App zu sehen.
  • Arbeitsbereiche:Bearbeiten und debuggen meiner Webanwendung in Chrome. Wenn ich zuvor einen Server gestartet habe, kann ich mein lokales Projekt meinen Netzwerkdateien zuordnen. Ich kann Sass oder Less verwenden und die Änderungen meines CSS-Präprozessors auf meine CSS-Dateien zurückmappen.
  • DevTools-Terminal:Ich kann jetzt Commits zur Quellcodeverwaltung vornehmen, einen Paketmanager (npm, bower) verwenden, um Abhängigkeiten herunterzuladen, oder meinen Buildprozess (grunt, make) ausführen, um eine optimierte Version derselben App zu generieren.
  • Es kann zwar etwas dauern, sich an die Fensteranordnung zu gewöhnen, aber es ist angenehm, die meisten Dinge direkt im Browser erledigen zu können.
Mit dem Befehl „ls“ im Terminal
Mit ls Dateinamen im aktuellen Arbeitsverzeichnis auflisten. Ideal zum Visualisieren von Verzeichnissen außerhalb Ihres Workspace.

Installation

Das DevTools-Terminal kann über den Chrome Web Store installiert werden. Wenn Sie Mac oder Linux verwenden, können Sie die DevTools nach dem Hinzufügen einfach über „Element untersuchen“ oder Ctrl + Shift + I öffnen. Sie können dann über den neuen Tab „Terminal“ darauf zugreifen. Windows-Nutzer müssen die Erweiterung über einen Node.js-Proxy mit dem Systemterminal verbinden. Installiere dazu das devtools-terminal-Modul über 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 DevTools und stellen Sie auf dem Tab „Terminal“ mit den Standardkonfigurationsoptionen eine Verbindung zum Server her. Sie können den Anschluss und die Adresse bei Bedarf weiter anpassen.

Das DevTools-Terminal unterstützt die Anpassung von Verbindungsdetails während der Einrichtung.

Beschränkungen

Das DevTools-Terminal hat einige Einschränkungen, die Sie beachten sollten. Im Gegensatz zu Terminal.app oder iTerm2 auf dem Mac unterstützt es noch keine Tabs, mehrere Fenster oder die Wiedergabe des Verlaufs. Sie können jedoch beliebig viele neue Tabs in Chrome öffnen, von denen jeder eine eigene DevTools-Terminalinstanz haben kann. Das geht über den Chrome Apps-Bildschirm:

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

Diese Erweiterung basiert derzeit auf NPAPI, das im Laufe des nächsten Jahres zugunsten der Native Messaging API eingestellt wird. Der Entwickler des DevTools-Terminals, Dmitry Fillimonov, plant, in naher Zukunft von NPAPI zu dieser API oder zur Native Client API überzugehen.

Ergebnisse

Mit dem DevTools-Terminal und ähnlichen Erweiterungen wie Auxilio können Sie während der Entwicklung vermeiden, zwischen Ihrem Editor, dem Browser und der Befehlszeile hin- und herzuwechseln. Ein In-Browser-Terminal ist vielleicht nicht jedermanns Sache, aber die Erweiterung kann eine nützliche Ergänzung für Ihren Workflow sein. Wir empfehlen Ihnen, sie auszuprobieren und sich selbst ein Bild zu machen.