Using Your Terminal From The DevTools

HTML5 Rocks

Introducción

Terminal de DevTools es una nueva extensión de Chrome DevTools que lleva el poder de la terminal para su navegador. Si alguna vez se encuentra cambiando de contexto entre Chrome y la línea de comandos para tareas como: tirar abajo los activos, usando git, ronco, wget o incluso vim - puede encontrar esta extensión útil para ahorrarse tiempo.

DevTools Terminal is great for quick command-line tweaks
La Terminal de DevTools is útil para modificaciones de línea de comandos rápidas desde interior de Chrome mientras trabajando en su aplicación de web
Using cURL in DevTools Terminal
Después de usar Copiar como cURL en el panel Red, puedo pegar fácilmente el comando completo en la Terminal de DevTools y ejecutarlo.

¿Por qué utilizar un terminal en el navegador?

Durante el desarrollo, probablemente estás acostumbrado a trabajar con algunas herramientas diferentes: el editor de texto para la escritura, un navegador para la prueba y la depuración y el terminal para la actualización de los paquetes, cURLing headers o incluso un proceso de construcción usando Grunt.

Running Grunt in DevTools Terminal
Correr tareas con Grunt sin tener que salir del navegador.

Tener que cambiar contextos entre las herramientas durante el desarrollo puede ser una distracción y puede llevar a la ineficiencia. Hemos hablado previamente acerca de cómo (para ciertos tipos de proyectos) puede depurar y escribir código directamente en el interior de los DevTools Chrome utilizando Workspaces sin salirse del navegador.

Git workflow
Un flujo de trabajo git completo también es posible. Ideal para un git diff después de escribir en un área de trabajo.

La Terminal de DevTools (por Dmitry Filimonov) completa esta historia, por lo que es posible codificar, depurar y construir desde dentro de la misma ventana. Usted consigue el acceso a la pestaña, ctrl, e incluso los colores de Git haciendo que se sienta familiarizado con el terminal que ha acostumbrado a usar en su flujo de trabajo diario.

Flujo de Trabajo

Authoring workflow
Empieze nuevos proyectos con un git clone, yeoman o cualquier otra herramienta accesible a través del terminal.

Mi flujo de trabajo personal para la escritura en Chrome ahora se ve un poco como esto:

  • Terminal de DevTools: úselo para git clone a un repositorio de GitHub, tocar un nuevo archivo o ejectuar yo (yeoman) para crear una aplicación. si quiero, puedo lanzar un nuevo servidor a una vista previa de la aplicación también

  • Espacios de trabajo: editar y depurar mi webapp dentro de Chrome. Si lancé un servidor anteriornente puedo mapear mi proyecto local a mis archivos de red. Puedo usar Sass o Less y tener mis cambios del Preprocesador de CSS mapeados de nuevo a mis archivos de CSS.

  • Terminal de DevTools: Ahora me puedo comprometer a control de código fuente, utilice un gestor de paquetes (npm, bower) para bajar dependencias o ejecutar mi proceso de construcción (grunt, make) para generar una versión optimizada de la misma aplicación.

Aunque puede tomar un tiempo para acostumbrarse a la organización de las ventanas, es agradable ser capaz de lograr más de lo que necesito dentro del navegador.

Using ls in the terminal
Apunta los nombres de archivos en el directorio actual utilizando ls. Excelente para visualizar directorios fuera de su área de trabajo.

Instalación

La Terminal de DevTools se puede instalar desde la tienda por la Red de Chrome. Si usted es un usuario de Mac o Linux, una vez que lo ha añadido a Chrome, simplemente puede "Inspect Element" o Ctrl + Shift + I para abrir las DevTools y usted será capaz de acceder a él a través de la nueva pestaña “Terminal”.

Usuarios de Windows tendrán que conectar la extensión a la terminal del sistema utilizando un apoderado de Node.js. Para obtener esta instalación, instale eldevtools-terminal módulo de npm:

npm install -g devtools-terminal

Luego, abra una nueva ventana de línea de comandos y ejecute devtools-terminal. A continuación, abre las DevTools y en la pestaña "Terminal", conectase al servidor utilizando las opciones de configuración por defecto. Usted será capaz de personalizar el puerto y la dirección aún más si es necesario.

DevTools Terminal supports customizing connection details during setup.

Limitaciones

La Terminal de DevTools tiene algunas limitaciones. A diferencia Terminal.app o iTerm2 en el Mac, al momento no soporta pestañas, múltiples ventanas, o reproducción de la historia. Sin embargo, puede abrir tantas nuevas pestañas de Chrome como quieras, cada uno de los cuales puede tener su propia instancia de la Terminal DevTools. Esto se puede hacer desde la pantalla de Chrome Apps:

DevTools Terminal supports both a light theme and a dark theme
Por el momento, la extensión es compatible con los dos temas: luz y oscuro.

Esta extensión se basa actualmente en laNPAPI, que se está eliminando gradualmente durante el próximo año a favor de la API de mensajería nativo. El autor de la Terminal de DevTools, Dmitry Filimonov, planea alejarse de NPAPI a favor de cualquiera de esta API o la API del cliente native en un futuro próximo.

Conclusiones

La Terminal de DevTools (y extensiones similares a ella, como Auxilio) ayudarle a evitar el cambio de ida y vuelta entre su editor, el navegador, y la línea de comandos durante el desarrollo.

Mientras que un in-browser puede ser poco atractivo algunos, usted puede encontrar la extensión ser un complemento útil a su flujo de trabajo y le animamos a probarlo, para ver si le gusta!

Comments

0