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.
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.
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.
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
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 oderyo (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.
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.
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:
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.