Entwicklertools-Terminal

Addy Osmani
Addy Osmani
X GitHub

DevTools Terminal ist eine neue Chrome-Entwicklertools-Erweiterung, mit der sich die Leistung des Terminals in Ihrem Browser nutzen lässt. Wenn Sie jemals im Kontext zwischen Chrome und der Befehlszeile für Aufgaben wie das Abrufen von Assets, die Verwendung von Git, Grun, Wget oder sogar Vim wechseln, könnte diese Erweiterung eine nützliche Zeitersparnis sein.

Das Entwicklertools-Terminal eignet sich hervorragend für schnelle Anpassungen der Befehlszeile.
Das Entwicklertools-Terminal ist nützlich für schnelle Änderungen an der Befehlszeile in Chrome, während Sie an Ihrer Webanwendung arbeiten.
Verwendung von cURL im Entwicklertools-Terminal.
Nachdem ich im Bereich „Network“ die Option Als cURL kopieren verwendet habe, kann ich den vollständigen Befehl einfach in das Entwicklertools-Terminal einfügen und ausführen.

Warum sollte ein Terminal im Browser verwendet werden?

Während der Entwicklung sind Sie wahrscheinlich an die Arbeit mit verschiedenen Tools gewöhnt: Ihrem Texteditor für die Erstellung, einem Browser zum Testen und Debuggen und dem Terminal zum Aktualisieren von Paketen, Curling-Headern oder sogar einem Build-Prozess mit Grunt.

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

Während der Entwicklung den Kontext zwischen den Tools wechseln zu müssen, kann ablenken und zu Ineffizienz führen. Wir haben bereits darüber gesprochen, wie Sie für bestimmte Projekttypen Fehler beheben und Code direkt in den Chrome-Entwicklertools mithilfe von Arbeitsbereichen erstellen können, ohne den Browser zu verlassen.

Git-Workflow.
Ein vollständiger Git-Workflow ist auch möglich. Sehr gut geeignet für einen Git-Diff nach dem Erstellen in einem Arbeitsbereich.

Das Entwicklertools-Terminal (von Dmitry Filimonov) vervollständigt diese Story und ermöglicht es, im selben Fenster programmieren, Fehler zu beheben und Builds zu erstellen. Sie erhalten Zugriff auf Tab-, Strg- und sogar Git-Farben, damit das Terminal dem Terminal vertraut ist, das Sie bereits in Ihrem täglichen Workflow verwendet haben.

Workflow

Erstellungsworkflow.
Beginnen Sie neue Projekte mit einem Git-Klon, yeoman oder einem anderen Tool, auf das über das Terminal zugegriffen werden kann.

Mein persönlicher Workflow für das Schreiben in Chrome sieht jetzt ungefähr so aus:

  • Das DevTools-Terminal kann damit git clone ein GitHub-Repository toucheine neue Datei touch 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:Meine Web-App in Chrome bearbeiten und Fehler beheben. Wenn ich früher einen Server gestartet habe, kann ich mein lokales Projekt meinen Netzwerkdateien zuordnen. Ich kann Sass oder Less verwenden und die Änderungen am CSS-Präprozessor meinen CSS-Dateien zuordnen.
  • DevTools-Terminal:Ich kann jetzt die Versionsverwaltung übernehmen, einen Paketmanager (npm, Bower) verwenden, um Abhängigkeiten abzurufen, oder meinen Build-Prozess (Grunz, Make) ausführen, um eine optimierte Version derselben App zu generieren.
  • Obwohl es eine Weile dauern kann, sich an die Fensteranordnung zu gewöhnen, ist es schön, dass ich die meisten Funktionen direkt im Browser erledigen kann.
Verwendung von ls im Terminal.
Listen Sie die Dateinamen im aktuellen Arbeitsverzeichnis mithilfe von ls auf. Ideal, um Verzeichnisse außerhalb von Workspace zu visualisieren.

Installation

Das Entwicklertools-Terminal kann über den Chrome Web Store installiert werden. Wenn ihr Mac- oder Linux-Nutzer seid und Chrome hinzugefügt habt, könnt ihr die Entwicklertools einfach über „Inspect Element“ oder Ctrl + Shift + I öffnen und über den neuen Tab „Terminal“ darauf zugreifen. 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 dem Tab „Terminal“ eine Verbindung zum Server mit den Standardkonfigurationsoptionen her. Bei Bedarf können Sie den Port und die Adresse weiter anpassen.

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

Beschränkungen

Für das Entwicklertools-Terminal gelten einige Einschränkungen. 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 von Chrome öffnen, die jeweils eine eigene Entwicklertools-Terminalinstanz haben. Dies ist über den Bildschirm „Chrome-Apps“ möglich:

Das Entwicklertools-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 der NPAPI, die im Laufe des nächsten Jahres zugunsten der Native Messaging API eingestellt wird. Der Terminal-Autor Dmitry Fillimonov in Entwicklertools plant, in naher Zukunft von NPAPI zu wechseln und entweder diese API oder die Native Client API zu verwenden.

Ergebnisse

Mit dem Entwicklertools-Terminal und ähnlichen Erweiterungen wie Auxilio können Sie während der Entwicklung nicht zwischen Editor, Browser und Befehlszeile hin- und herwechseln. Auch wenn ein In-Browser-Terminal möglicherweise nicht jedermanns Sache ist, kann die Erweiterung eine nützliche Ergänzung zu deinem Arbeitsablauf sein. Probiere sie aus und finde heraus, wie sie dir gefällt!