Terminal de Herramientas para desarrolladores

Addy Osmani

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

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 app web.

Después de usar Copy as cURL en el panel Network, puedo pegar el comando completo fácilmente 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: un editor de texto para la creación, un navegador para pruebas y depuración y la terminal para actualizar paquetes, curling de encabezados o incluso un proceso de compilación con Grunt.

Ejecución de tareas de compilación con Grunt sin tener que salir del navegador

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

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

La herramienta Terminal de Herramientas para desarrolladores (de Dmitry Filimonov) completa esa historia y hace posible programar, depurar y compilar desde la misma ventana. Puedes acceder a los colores Tab, Ctrl y hasta los colores de Git, que hacen que te resulte familiar para la terminal que solías usar en tu flujo de trabajo diario.

Flujo de trabajo

Inicia proyectos nuevos con git clone, yeoman o cualquier otra herramienta accesible a través de la terminal.

Mi flujo de trabajo personal para crear contenido en Chrome ahora se ve de la siguiente manera:

• La terminal de Herramientas de desarrolladores la usa 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: Editar y depurar mi aplicación web en Chrome Si inicia un servidor antes, puedo asignar mi proyecto local a mis archivos de red. Puedo usar Sass o Less y hacer que los cambios del preprocesador de CSS se vuelvan a asignar a mis archivos CSS.
• Terminal de Herramientas para desarrolladores: Ahora puedo confirmar 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) y 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 dentro del navegador.

Enumera los nombres de archivos en el directorio de trabajo actual con ls. Esta opción es ideal para visualizar directorios fuera de tu lugar de trabajo.

Instalación

La terminal de Herramientas para desarrolladores se puede instalar desde Chrome Web Store. Si eres usuario de 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 él 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 las Herramientas para desarrolladores y, en la pestaña “Terminal”, conéctate al servidor con las opciones de configuración predeterminadas. Podrás personalizar el puerto y la dirección aún más si es necesario.

Limitaciones

La terminal de Herramientas para desarrolladores tiene algunas limitaciones que vale la pena tener en cuenta. A diferencia de Terminal.app o iTerm2 en Mac, todavía 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 Herramientas para desarrolladores. Esto se puede hacer desde la pantalla Aplicaciones de Chrome:

Por el momento, la extensión admite el tema claro predeterminado y el tema oscuro.

Actualmente, esta extensión se basa en NPAPI, que se eliminará gradualmente durante el próximo año para favorecer la API de Native Messaging. Dmitry Fillimonov, autor de la terminal de Herramientas para desarrolladores, planea alejarse de NPAPI por usar esta API o la API de Native Client en un futuro cercano.

Conclusiones

La terminal de Herramientas para desarrolladores (y extensiones similares, como Auxilio) puede ayudarte a evitar alternar entre el editor, el navegador y la línea de comandos durante el desarrollo. Si bien es posible que una terminal en el navegador no sea de lo común, 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.