Google I/O 2016 terminó. Herramientas para desarrolladores tuvo una presencia importante en I/O, incluida una charla de Paul Bakaus, Paul Ireland y Seth Thompson, en la que se describe el futuro de Herramientas para desarrolladores. Mira el siguiente video o sigue leyendo para obtener más información sobre el futuro de Herramientas para desarrolladores a partir de 2016.
Autoría
El objetivo de Herramientas para desarrolladores es facilitar todas las etapas del ciclo de vida de desarrollo web. Probablemente sepas que Herramientas para desarrolladores puede ayudarte a depurar o perfilar un sitio web, pero es posible que no sepas cómo usarlo para ayudarte a crear un sitio. Por "creación" nos referimos al acto de crear un sitio. Uno de los objetivos en el futuro cercano es facilitarte la iteración, el experimento y la emulación de tu sitio en varios dispositivos.
Modo del dispositivo
El equipo de Herramientas para desarrolladores continúa iterando en la experiencia de Device Mode, que recibió su primera actualización importante en Chrome 49. Consulta la publicación de marzo (A new Device Mode for a mobile first world) para obtener una descripción general de las actualizaciones. El objetivo general es proporcionar un flujo de trabajo fluido para ver y emular tu sitio en todos los factores de forma.
A continuación, te mostramos un resumen breve de algunas actualizaciones de Device Mode que se realizaron en Canary desde que publicamos el artículo en marzo.
Mientras visualizas una página como un dispositivo específico, puedes sumergirte más en la experiencia mostrando el hardware del dispositivo alrededor de tu página.
El menú de orientación del dispositivo te permite ver la página cuando diferentes elementos de la IU del sistema, como la barra de navegación y el teclado, están activos.
También mejoró la versión para computadoras de escritorio. Gracias a la función de zoom del Modo de dispositivo, puedes emular pantallas de escritorio más grandes que la de la pantalla en la que estás trabajando, como una 4K (3840 px x 2160 px).
Puedes limitar la red directamente desde la IU de Device Mode, en lugar de tener que cambiar al panel Network.
Diferencias de fuentes
Cuando iteras según el diseño de un sitio, es fácil perder el registro de los cambios. Para solucionar esto, Herramientas para desarrolladores usará indicadores visuales en el margen del número de línea del panel Sources para ayudarte a realizar un seguimiento de tus cambios. Las líneas borradas se indican con una línea roja, las líneas modificadas se destacan en violeta y las nuevas se destacan en verde.
También podrás realizar un seguimiento de los cambios en la nueva pestaña del panel lateral de Fuente rápida:
Por primera vez, la pestaña Fuente rápida te permite centrarte en tu código fuente HTML o JavaScript al mismo tiempo que en las reglas de CSS. Además, cuando haces clic en una propiedad CSS en el panel Styles, la pestaña Fuente rápida salta y destaca la definición en la fuente automáticamente.
Habilita el experimento sources diff en Chrome Canary para probarlo hoy mismo.
Edición de Live Sass
Este es un adelanto de algunas de las próximas mejoras importantes en el flujo de trabajo de edición de Sass. Estas funciones se encuentran en las primeras etapas de la fase experimental. Te avisaremos en una publicación posterior cuando estén listas para que las pruebes.
Básicamente, Herramientas para desarrolladores te permitirá ver y editar variables de Sass como siempre esperabas que lo hiciera. Haz clic en un valor que se compiló a partir de una variable de Sass, y la nueva pestaña Fuentes rápidas salta a la definición de la variable.
Cuando se edita un valor que se compiló a partir de una variable de Sass, la edición actualiza la variable de Sass, no solo la propiedad individual que seleccionaste.
Apps web progresivas
Consulta la lista de charlas sobre la Web y Chrome en Google I/O 2016 y verás que surgió un gran tema en el mundo del desarrollo web: las apps web progresivas.
A medida que surge el modelo de aplicación web progresiva, Herramientas para desarrolladores realiza una iteración rápidamente con el objetivo de proporcionar las herramientas que los desarrolladores necesitan para crear aplicaciones web progresivas excelentes. Nos dimos cuenta de que compilar y depurar estas aplicaciones modernas a menudo conlleva requisitos únicos, por lo que Herramientas para desarrolladores dedicó todo un panel al desarrollo de aplicaciones web progresivas. Abre Chrome Canary y verás que el panel Recursos se reemplazó por el panel Aplicación. Todas las funciones anteriores del panel de Recursos aún están allí. Existen solo algunos paneles nuevos diseñados específicamente para el desarrollo de apps web progresivas:
El panel Manifest te ofrece una representación visual del archivo de manifiesto de la app. Desde aquí, puedes activar manualmente el flujo de trabajo “Agregar a la pantalla principal”.
El panel de Service Workers te permite inspeccionar el service worker registrado para la página actual e interactuar con él.
Y el panel Borrar almacenamiento te permite borrar todo tipo de datos para que puedas ver una página desde cero.
JavaScript
Cruzar el límite entre frontend y backend es una parte difícil del desarrollo web de pila completa. Si descubres que tu backend muestra un código de estado 500 mientras depuras una aplicación web, alcanzaste el límite de utilidad de Herramientas para desarrolladores, por lo que debes cambiar los contextos y activar tu entorno de desarrollo de backend para depurar el problema.
Sin embargo, con los backends escritos en Node.js, los límites entre frontend y backend están empezando a desdibujarse. Dado que Node.js se ejecuta en el motor V8 de JavaScript (el mismo motor que usa Google Chrome), queríamos que fuera posible depurar Node.js desde Herramientas para desarrolladores. Gracias a los equipos de V8, Herramientas para desarrolladores y Google Cloud Platform para Node.js, ahora puedes usar todas las potentes funciones de depuración de Herramientas para desarrolladores a fin de hacer una introspección a una app de Node.js. La funcionalidad ya llegó a las compilaciones nocturnas de Node.js, aunque la integración de Herramientas para desarrolladores aún se está mejorando antes de incluirse en una actualización importante. La depuración de tu app de Node.js desde Herramientas para desarrolladores será tan simple como pasar node --inspect app.js y conectarte desde Herramientas para desarrolladores en cualquier ventana de Chrome.
Aunque herramientas existentes como Node Inspector proporcionan experiencias de depuración basadas en GUI, la nueva integración de Node.js Herramientas para desarrolladores se mantendrá actualizada con las funciones de depuración más recientes de Herramientas para desarrolladores, como la depuración de pila asíncrona, el recuadro negro y la compatibilidad con ES6.