Terminal des outils de développement

Addy Osmani

Terminal DevTools est une nouvelle extension des outils pour les développeurs Chrome qui apporte la puissance du terminal à votre navigateur. Si vous passez souvent de Chrome à la ligne de commande pour effectuer des tâches telles que télécharger des composants, utiliser git, grunt, wget ou même vim, cette extension peut vous faire gagner du temps.

Le terminal DevTools est idéal pour effectuer des ajustements rapides de la ligne de commande.
Le terminal DevTools est utile pour effectuer des ajustements rapides de la ligne de commande depuis Chrome lorsque vous travaillez sur votre application Web.
Utiliser cURL dans le terminal DevTools
Après avoir utilisé Copier en tant que cURL dans le panneau "Network" (Réseau), je peux facilement coller la commande complète dans le terminal DevTools et l'exécuter.

Pourquoi utiliser un terminal dans le navigateur ?

Pendant le développement, vous êtes probablement habitué à utiliser plusieurs outils: votre éditeur de texte pour la création, un navigateur pour les tests et le débogage, et le terminal pour mettre à jour des paquets, curler des en-têtes ou même effectuer un processus de compilation à l'aide de Grunt.

Exécution de Grunt dans le terminal des outils de développement.
Exécuter des tâches de compilation avec Grunt sans avoir à quitter le navigateur.

Avoir à passer d'un contexte à un autre entre les outils pendant le développement peut être distrayant et peut entraîner une inefficacité. Nous avons déjà expliqué comment (pour certains types de projets) vous pouvez déboguer et créer du code directement dans les outils pour les développeurs Chrome à l'aide de espaces de travail sans quitter le navigateur.

Workflow Git
Un workflow Git complet est également possible. Idéal pour une différence Git après la création dans un espace de travail.

Le terminal DevTools (par Dmitry Filimonov) complète cette histoire en permettant de coder, de déboguer et de compiler dans la même fenêtre. Vous avez accès à la touche Tabulation, à la touche Ctrl et même aux couleurs Git, ce qui vous rappelle le terminal que vous utilisiez dans votre workflow quotidien.

Workflow

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

Voici à quoi ressemble mon workflow personnel pour la création dans Chrome:

  • Le terminal DevTools permet de git clone un dépôt GitHub, de touch un nouveau fichier ou d'exécuter yo (yeoman) pour créer une application. Si je le souhaite, je peux également lancer un nouveau serveur pour prévisualiser l'application.
  • Espaces de travail:modifiez et déboguez ma page Web dans Chrome. Si j'ai lancé un serveur précédemment, je peux mapper mon projet local sur mes fichiers réseau. Je peux utiliser Sass ou Less, et faire en sorte que les modifications apportées par le préprocesseur CSS soient mappées dans mes fichiers CSS.
  • Terminal DevTools:je peux désormais effectuer des commits dans le contrôle des sources, utiliser un gestionnaire de paquets (npm, bower) pour télécharger des dépendances ou exécuter mon processus de compilation (grunt, make) pour générer une version optimisée de la même application.
  • Bien qu'il puisse m'être difficile de m'habituer à l'agencement des fenêtres, je suis ravi de pouvoir effectuer la plupart de ce dont j'ai besoin depuis le navigateur.
Utilisation de ls dans le terminal.
Listez les noms de fichiers dans le répertoire de travail actuel à l'aide de ls. Idéal pour visualiser des répertoires en dehors de votre espace de travail.

Installation

Vous pouvez installer le terminal DevTools depuis le Chrome Web Store. Si vous utilisez un Mac ou Linux, une fois que vous l'avez ajouté à Chrome, vous pouvez simplement appuyer sur "Inspecter l'élément" ou Ctrl + Shift + I pour ouvrir les outils pour les développeurs. Vous pourrez y accéder via le nouvel onglet "Terminal". Les utilisateurs Windows devront connecter l'extension au terminal 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 pour les développeurs. Dans l'onglet "Terminal", connectez-vous au serveur à l'aide des options de configuration par défaut. Si nécessaire, vous pourrez personnaliser davantage le port et l'adresse.

Le terminal DevTools permet de personnaliser les informations de connexion lors de la configuration.

Limites

Le terminal DevTools présente quelques limites à noter. 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. Vous pouvez toutefois ouvrir autant d'onglets Chrome que vous le souhaitez, chacun pouvant avoir sa propre instance de terminal DevTools. Vous pouvez le faire depuis l'écran "Applications Chrome" :

Le terminal DevTools est compatible avec les thèmes clair et sombre.
Pour le moment, l'extension est compatible avec le thème clair par défaut et un thème sombre.

Cette extension repose actuellement sur NPAPI, qui sera progressivement abandonnée au cours de l'année prochaine au profit de l'API Native Messaging. L'auteur du terminal DevTools, Dmitry Fillimonov, prévoit de se passer de NPAPI au profit de cette API ou de l'API Native Client dans un avenir proche.

Conclusions

Le terminal DevTools (et les extensions similaires, comme Auxilio) peut vous aider à éviter de passer de votre éditeur au navigateur et à la ligne de commande pendant le développement. Bien qu'un terminal dans le navigateur ne soit pas du goût de tous, vous trouverez peut-être l'extension utile pour compléter votre workflow. Nous vous encourageons à l'essayer pour voir si elle vous convient.