Terminal des outils de développement

Addy Osmani

Le terminal des outils pour les développeurs est une nouvelle extension des outils pour les développeurs Chrome, qui offre la puissance du terminal à votre navigateur. S'il vous arrive de passer de Chrome à la ligne de commande pour effectuer des tâches telles que l'extraction de composants, l'utilisation de git, grunt, wget ou même Vim, cette extension vous fera peut-être gagner du temps.

Le terminal des outils de développement est utile pour effectuer des ajustements rapides de la ligne de commande depuis Chrome pendant que vous travaillez sur votre application Web.

Après avoir utilisé l'option Copier en tant que cURL dans le panneau "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 ?

Pendant le développement, vous avez probablement l'habitude de travailler avec différents outils: votre é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, le curling des en-têtes ou même un processus de compilation utilisant Grunt.

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

Le fait de devoir changer de contexte entre les outils pendant le développement peut être une source de distraction et d'inefficacité. Nous avons déjà expliqué comment (pour certains types de projets) vous pouvez déboguer et écrire du code directement dans les outils pour les développeurs Chrome à l'aide d'espaces de travail, sans quitter le navigateur.

Un workflow Git complet est également possible. Idéal pour exécuter une commande git diff après avoir créé le fichier dans un espace de travail.

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

Workflow

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

Voici à quoi ressemble désormais mon workflow personnel de création dans Chrome:

• Le terminal des outils de développement 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 le veux, je peux lancer un nouveau serveur pour prévisualiser l'application aussi.
• 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 du préprocesseur CSS à mes fichiers CSS.
• Terminal DevTools:je peux maintenant effectuer le contrôle des sources, utiliser un gestionnaire de paquets (npm, bower) pour extraire les dépendances ou exécuter mon processus de compilation (grunt, make) pour générer une version optimisée de la même application.
• Même s'il faut un certain temps pour s'habituer à la disposition des fenêtres, c'est un plaisir de pouvoir faire la plupart des choses dont j'ai besoin depuis le navigateur.

Listez les noms de fichiers dans le répertoire de travail actuel à l'aide de la commande ls. C'est idéal pour visualiser les répertoires en dehors de votre espace de travail.

Installation

Le terminal des outils de développement peut être installé depuis le Chrome Web Store. Si vous utilisez Mac ou Linux, une fois l'élément ajouté à Chrome, il vous suffit de cliquer sur "Inspecter l'élément" ou sur Ctrl + Shift + I pour ouvrir les outils de développement. Vous pourrez alors y accéder via le nouvel onglet "Terminal". Les utilisateurs de Windows devront 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, puis, dans l'onglet "Terminal", connectez-vous au serveur à l'aide des options de configuration par défaut. Si nécessaire, vous pouvez personnaliser davantage le port et l'adresse.

Limites

Le terminal des outils de développement présente quelques limites qu'il convient de noter. Contrairement à Terminal.app ou iTerm2 sur Mac, il ne prend pas encore en charge les onglets, les fenêtres multiples ni la lecture de l'historique. Vous pouvez toutefois ouvrir autant d'onglets que vous le souhaitez dans Chrome. Chacun d'eux peut avoir sa propre instance de terminal des outils de développement. à partir de l'écran des applications Chrome:

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

Cette extension repose actuellement sur l'API NPAPI, qui sera supprimée au cours de l'année prochaine au profit de l'API de messagerie native. Dmitry Fillimonov, auteur du terminal des outils de développement, prévoit de ne plus utiliser 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 les extensions similaires, telles qu'Auxilio) peuvent vous aider à éviter de jongler entre votre éditeur, le navigateur et la ligne de commande pendant le développement. Même si un terminal intégré dans un navigateur n'est pas forcément destiné à tout le monde, vous trouverez peut-être cette extension un complément utile à votre flux de travail. Nous vous encourageons à l'essayer et à voir ce que vous en pensez.