Terminal de Herramientas para desarrolladores

Addy Osmani

DevTools Terminal es una nueva extensión de las Herramientas para desarrolladores de Chrome que lleva la potencia de la terminal a tu navegador. Si alguna vez tienes que cambiar de contexto entre Chrome y la línea de comandos para realizar tareas como descargar recursos, usar git, grunt, wget o incluso vim, esta extensión puede ser una herramienta útil para ahorrar tiempo.

La terminal de DevTools es ideal para realizar ajustes rápidos en la línea de comandos.
La terminal de DevTools es útil para realizar ajustes rápidos de la línea de comandos desde Chrome mientras trabajas en tu aplicación web.
Usa cURL en la terminal de DevTools.
Después de usar Copiar como cURL en el panel de red, puedo pegar fácilmente el comando completo en la terminal de DevTools 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 autoría, un navegador para pruebas y depuración, y la terminal para actualizar paquetes, encabezados de Curl o incluso un proceso de compilación con Grunt.

Ejecución de Grunt en la terminal de DevTools
Ejecuta tareas de compilación con Grunt sin tener que salir del navegador.

Tener que cambiar de contexto entre herramientas durante el desarrollo puede ser una distracción y puede generar ineficiencias. Anteriormente, hablamos de cómo (para ciertos tipos de proyectos) puedes depurar y crear código directamente en las Herramientas para desarrolladores de Chrome con Workspaces sin salir del navegador.

Flujo de trabajo de Git.
También es posible tener un flujo de trabajo de git completo. Es ideal para una comparación de git después de la autoría en un Workspace.

La terminal de DevTools (de Dmitry Filimonov) completa esa historia, lo que permite codificar, depurar y compilar desde la misma ventana. Obtienes acceso a la pestaña, Ctrl y hasta a los colores de Git, lo que te permite familiarizarte con la terminal que usas en tu flujo de trabajo diario.

Flujo de trabajo

Flujo de trabajo de autoría
Comienza proyectos nuevos con un git clone, yeoman o cualquier otra herramienta a la que se pueda acceder a través de la terminal.

Mi flujo de trabajo personal para la autoría en Chrome ahora se ve de la siguiente manera:

  • Terminal de DevTools úsala para git clone un repositorio de GitHub, touch un archivo nuevo o ejecutar yo (yeoman) para crear una app. Si quiero, también puedo iniciar un servidor nuevo para obtener una vista previa de la app.
  • Espacios de trabajo: Edita y depura mi app 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 del procesador de CSS se vuelvan a asignar a mis archivos CSS.
  • Terminal de DevTools: Ahora puedo confirmar el control de código fuente, usar un administrador de paquetes (npm, bower) para descargar 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 acostumbrarse a la disposición de las ventanas, es agradable poder lograr la mayor parte de lo que necesito desde el navegador.
Usar ls en la terminal
Enumera los nombres de archivo en el directorio de trabajo actual con ls. Es ideal para visualizar directorios fuera de tu lugar de trabajo.

Instalación

Puedes instalar la terminal de DevTools desde Chrome Web Store. Si eres usuario de Mac o Linux, una vez que lo agregues a Chrome, simplemente puedes hacer clic en "Inspeccionar elemento" o Ctrl + Shift + I para abrir las Herramientas para desarrolladores y acceder a ellas 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 obtener esta configuración, instala el módulo devtools-terminal desde npm: npm install -g devtools-terminal

Luego, abre una nueva ventana de línea de comandos y ejecuta devtools-terminal. A continuación, abre DevTools y, en la pestaña "Terminal", conéctate al servidor con las opciones de configuración predeterminadas. Si es necesario, podrás personalizar el puerto y la dirección.

La terminal de DevTools admite la personalización de los detalles de la conexión durante la configuración.

Limitaciones

La terminal de DevTools tiene algunas limitaciones que vale la pena tener en cuenta. A diferencia de Terminal.app o iTerm2 en Mac, aún no admite pestañas, varias 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 la terminal de DevTools. Puedes hacerlo desde la pantalla Apps de Chrome:

La terminal de DevTools admite temas claros y oscuros.
Por el momento, la extensión admite el tema claro predeterminado y un tema oscuro.

Actualmente, esta extensión se basa en NPAPI, que se eliminará gradualmente durante el próximo año en favor de la API de Native Messaging. Dmitry Fillimonov, autor de DevTools Terminal, planea dejar de usar NPAPI en favor de esta API o la API de Native Client en un futuro cercano.

Conclusiones

La terminal de DevTools (y extensiones similares, como Auxilio) pueden ayudarte a evitar tener que alternar entre el editor, el navegador y la línea de comandos durante el desarrollo. Si bien es posible que no a todos les guste usar una terminal integrada en el navegador, es posible que la extensión sea un complemento útil para tu flujo de trabajo. Te recomendamos que la pruebes y veas si te gusta.