Terminal des outils de développement

Addy Osmani

Twitter GitHub

DevTools Terminal est une nouvelle extension des outils pour les développeurs Chrome, qui vous permet de profiter de la puissance du terminal dans votre navigateur. Si vous vous retrouvez à basculer entre Chrome et la ligne de commande pour des tâches telles que l'extraction d'éléments, l'utilisation de git, grunt, wget ou même Vim, cette extension vous fera peut-être gagner du temps.

Le terminal DevTools permet d'apporter rapidement des modifications à la ligne de commande depuis Chrome tout en travaillant sur votre application Web.

Après avoir utilisé l'option Copier en tant que cURL dans le panneau "Network" (Réseau), je peux facilement coller la commande complète dans le terminal des outils de développement et l'exécuter.

Pourquoi utiliser un terminal dans le navigateur ?

Lors du développement, vous avez probablement l'habitude de travailler avec différents outils: un éditeur de texte pour la création, un navigateur pour les tests et le débogage, et le terminal pour la mise à jour des packages, des en-têtes de curling ou même un processus de compilation avec Grunt.

Exécuter des tâches de compilation avec Grunt sans quitter le navigateur

Le changement de contexte entre les outils pendant le développement peut être une source de distraction et nuire à l'efficacité. Pour certains types de projets, nous avons vu précédemment comment déboguer et créer du code directement dans les outils pour les développeurs Chrome à l'aide des espaces de travail, sans quitter le navigateur.

Un workflow Git complet est également possible. Idéal pour les difficultés git après la création dans un espace de travail.

Le terminal des outils de développement (de Dmitry Filimonov) vient compléter cette histoire, ce qui permet de coder, de déboguer et de compiler depuis la même fenêtre. Vous avez accès aux couleurs de Tab, Ctrl et même Git, ce qui vous rend familier avec le terminal que vous avez l'habitude d'utiliser dans votre flux de travail quotidien.

Workflow

Lancez de nouveaux projets avec git clone, yeoman ou tout autre outil accessible via le terminal.

Mon workflow personnel de création dans Chrome ressemble désormais à peu près à ceci:

• Le terminal DevTools l'utilise pour git clone un dépôt GitHub, touch un nouveau fichier ou exécuter yo (yeoman) pour créer une application. Si je veux, je peux lancer un nouveau serveur pour prévisualiser l'application
• Espaces de travail:modifier et déboguer mon application Web dans Chrome Si j'ai lancé un serveur plus tôt, je peux mapper mon projet local à mes fichiers réseau. Je peux utiliser Sass ou Less, et faire correspondre les modifications apportées au préprocesseur CSS à mes fichiers CSS.
• Terminal DevTools:je peux désormais valider le contrôle des sources, utiliser un gestionnaire de packages (npm, bower) pour extraire les dépendances ou exécuter mon processus de compilation (gunt, make) pour générer une version optimisée de la même application.
• Même s'il faut parfois un certain temps pour s'habituer à la disposition des fenêtres, je suis agréable de pouvoir accéder à la plupart de mes besoins depuis le navigateur.

Répertoriez les noms de fichiers dans le répertoire de travail actuel avec ls. Idéal pour visualiser les répertoires en dehors de votre espace de travail.

Installation

Vous pouvez installer le terminal d'outils de développement à partir du Chrome Web Store. Si vous utilisez Mac ou Linux, une fois que vous l'avez ajouté à Chrome, il vous suffit d'"Inspecter l'élément" ou d'utiliser Ctrl + Shift + I pour ouvrir les Outils de développement. Vous pouvez alors y accéder via le nouvel onglet "Terminal". Les utilisateurs de Windows doivent connecter l'extension au terminal du système à l'aide d'un proxy Node.js. Pour obtenir cette configuration, installez le module devtools-terminal à partir de npm : npm install -g devtools-terminal

Ouvrez ensuite une nouvelle fenêtre de ligne de commande et exécutez devtools-terminal. Ouvrez ensuite les outils de développement et, dans l'onglet "Terminal", connectez-vous au serveur à l'aide des options de configuration par défaut. Vous pourrez personnaliser davantage le port et l'adresse si nécessaire.

Limites

Notez que le terminal des outils de développement présente certaines limites. Contrairement à Terminal.app ou iTerm2 sur Mac, il n'est pas encore compatible avec les onglets, les fenêtres multiples ni la lecture de l'historique. Toutefois, vous pouvez ouvrir autant de nouveaux onglets Chrome que vous le souhaitez. Chacun d'entre eux peut avoir sa propre instance du terminal des outils de développement. Pour cela, accédez à l'écran des applications Chrome:

À l'heure actuelle, l'extension est compatible avec le thème clair et le thème sombre par défaut.

Cette extension repose actuellement sur NPAPI, qui sera abandonné au cours de l'année prochaine au profit de l'API Native Messaging. L'auteur de DevTools Terminal, Dmitry Filmonov, prévoit d'abandonner NPAPI au profit de cette API ou de l'API Native Client dans un avenir proche.

Conclusions

Le terminal des outils de développement (et des extensions semblables, comme Auxilio) vous évitent de basculer entre l'éditeur, le navigateur et la ligne de commande pendant le développement. Même si un terminal intégré à un navigateur ne convient pas à tout le monde, cette extension peut compléter votre processus de travail. Nous vous encourageons à l'essayer et à découvrir ce que vous en pensez !