Terminal de Herramientas para desarrolladores

Addy Osmani
Addy Osmani

Terminal de Herramientas para desarrolladores es una extensión nueva de Chrome para desarrolladores que lleva la potencia de la terminal a su navegador. Si alguna vez necesitas cambiar de contexto entre Chrome y la línea de comandos para tareas como la extracción de recursos, usar git, grunt, wget o incluso vim, esta extensión puede ayudarte a ahorrar tiempo.

La terminal de Herramientas para desarrolladores es ideal para realizar ajustes rápidos en la línea de comandos.
La terminal de Herramientas para desarrolladores es útil para realizar ajustes rápidos en la línea de comandos desde Chrome mientras trabajas en tu aplicación web.
Cómo usar cURL en la terminal de Herramientas para desarrolladores
Después de usar Copy as cURL en el panel Network, puedo pegar fácilmente el comando completo en la terminal de Herramientas para desarrolladores y ejecutarlo.

¿Por qué usar una terminal en el navegador?

Durante el desarrollo, es probable que estés acostumbrado a trabajar con algunas herramientas diferentes: tu editor de texto para la creación, un navegador para pruebas y depuración, y la terminal para actualizar paquetes, encabezados de curling o incluso un proceso de compilación con Grunt.

Cómo ejecutar Grunt en la terminal de Herramientas para desarrolladores
Cómo ejecutar tareas de compilación con Grunt sin tener que salir del navegador

Tener que cambiar de contexto entre herramientas durante el desarrollo puede distraer y llevar a una ineficiencia. Anteriormente, hablamos sobre cómo (para ciertos tipos de proyectos) puedes depurar y crear código directamente en las Herramientas para desarrolladores de Chrome usando lugares de trabajo sin salir del navegador.

Flujo de trabajo de Git.
También es posible tener un flujo de trabajo de Git completo. Ideal para una diferencia de git después de crear un lugar de trabajo.

La terminal de Herramientas para desarrolladores (de Dmitry Filimonov) completa esa historia y permite programar, depurar y compilar desde la misma ventana. Obtienes acceso a los colores de Tab, Ctrl e incluso Git, lo que te hace familiarizarse con la terminal que solías usar en tu flujo de trabajo diario.

Flujo de trabajo

Flujo de trabajo de creación
Comienza proyectos nuevos con un git clone, yeoman o cualquier otra herramienta accesible a través de la terminal.

Mi flujo de trabajo personal para la creación en Chrome ahora se ve algo así:

  • La terminal de Herramientas para desarrolladores lo usa para git cloneun repositorio de GitHub, touch un archivo nuevo o para ejecutar yo (yeoman) a fin de crear una app. Si quiero, también puedo iniciar un servidor nuevo para obtener una vista previa de la app
  • Lugares de trabajo: Edita y depura mi aplicación web en Chrome. Si inicié un servidor antes, puedo asignar mi proyecto local a mis archivos de red. Puedo usar Sass o Less y hacer que los cambios de mi preprocesador de CSS se asignen a mis archivos de CSS.
  • Terminal de Herramientas para desarrolladores: Ahora puedo comprometerme con el control de código fuente, usar un administrador de paquetes (npm, Bower) para desplegar dependencias o ejecutar mi proceso de compilación (grunt, make) para generar una versión optimizada de la misma app.
  • Aunque puede llevar un tiempo acostumbrarme a la disposición de la ventana, es agradable poder hacer todo lo que necesito dentro del navegador.
Usa ls en la terminal.
Usa ls para obtener una lista de los nombres de archivo del directorio de trabajo actual. Es ideal para visualizar directorios fuera de Workspace.

Instalación

La terminal de Herramientas para desarrolladores se puede instalar desde Chrome Web Store. Si usas Mac o Linux, una vez que lo hayas agregado a Chrome, puedes simplemente "Inspeccionar elemento" o Ctrl + Shift + I para abrir las Herramientas para desarrolladores y podrás acceder a ella a través de la nueva pestaña "Terminal". Los usuarios de Windows deberán conectar la extensión a la terminal del sistema con un proxy de Node.js. Para realizar esta configuración, instala el módulo devtools-terminal de npm: npm install -g devtools-terminal

Luego, abre una ventana de línea de comandos nueva y ejecuta devtools-terminal. Luego, abre las Herramientas para desarrolladores y, en la pestaña “Terminal”, conéctate al servidor usando las opciones de configuración predeterminadas. De ser necesario, podrás personalizar aún más el puerto y la dirección.

La terminal de Herramientas para desarrolladores admite la personalización de los detalles de la conexión durante la configuración.

Limitaciones

La terminal de Herramientas para desarrolladores tiene algunas limitaciones que vale la pena mencionar. A diferencia de Terminal.app o iTerm2 en Mac, todavía no admite pestañas, múltiples ventanas ni la reproducción del historial. Sin embargo, puedes abrir tantas pestañas nuevas de Chrome como desees, cada una de las cuales puede tener su propia instancia de Terminal de Herramientas para desarrolladores. Esto se puede hacer desde la pantalla Apps de Chrome:

La terminal de Herramientas para desarrolladores admite un tema claro y uno oscuro.
Por el momento, la extensión admite el tema claro predeterminado y uno oscuro.

Actualmente, esta extensión se basa en NPAPI, que se eliminará gradualmente durante el próximo año a favor de la API de mensajería nativa. Dmitry Fillimonov, autor de la terminal de Herramientas para desarrolladores, planea dejar de utilizar NPAPI para favorecer esta API o la API de Native Client en un futuro cercano.

Conclusiones

La Terminal de Herramientas para desarrolladores (y extensiones similares a ella, como Auxilio) pueden ayudarte a evitar alternar entre tu editor, el navegador y la línea de comandos durante el desarrollo. Aunque una terminal en el navegador puede no ser de utilidad, puede que la extensión te resulte útil para tu flujo de trabajo y te recomendamos que la pruebes y descubras si te gusta.