Google I/O 2016 finalizó. DevTools tuvo una gran presencia en I/O, incluida una charla de Paul Bakaus, Paul Irish y Seth Thompson en la que se describió el futuro de DevTools. Mira el siguiente video o sigue leyendo para obtener más información sobre el futuro de DevTools en 2016 y más allá.
Autoría
El objetivo de DevTools es facilitar cada etapa del ciclo de vida del desarrollo web. Es probable que sepas que DevTools puede ayudarte a depurar o generar un perfil de un sitio web, pero es posible que no sepas cómo usarlas para crear un sitio. Con "autoría", nos referimos al acto de crear un sitio. Uno de los objetivos en el futuro previsible es facilitarte la iteración, experimentación y emulación de tu sitio en varios dispositivos.
Modo del dispositivo
El equipo de DevTools sigue iterando en la experiencia del modo de dispositivo, que recibió su primera actualización importante en Chrome 49. Consulta la publicación de marzo (Un nuevo modo de dispositivo para un mundo centrado en los dispositivos móviles) para obtener una descripción general de las actualizaciones. El objetivo principal es proporcionar un flujo de trabajo sin interrupciones para ver y emular tu sitio en todos los factores de forma.
Este es un resumen rápido de algunas actualizaciones del modo de dispositivo que se lanzaron en Canary desde que publicamos el artículo en marzo.
Cuando ves una página como un dispositivo específico, puedes sumergirte más en la experiencia mostrando el hardware del dispositivo alrededor de la página.
El menú de orientación del dispositivo te permite ver tu página cuando están activos diferentes elementos de la IU del sistema, como la barra de navegación y el teclado.
La experiencia en computadoras de escritorio también mejoró. Gracias a la función de zoom del modo de dispositivo, puedes emular pantallas de computadoras de escritorio más grandes que la pantalla en la que estás trabajando, como una pantalla 4K (3840 px x 2160 px).
Puedes reducir la velocidad de la red directamente desde la IU del modo de dispositivo, en lugar de tener que cambiar al panel de red.
Diferencias de origen
Cuando iteras sobre el diseño de un sitio, es fácil perder el rastro de tus cambios. Para solucionar este problema, DevTools usará indicadores visuales en el margen de números de línea del panel Fuentes para ayudarte a hacer un seguimiento de tus cambios. Las líneas borradas se indican con una línea roja, las líneas modificadas se destacan en púrpura y las nuevas, en verde.
También podrás hacer un seguimiento de tus cambios en la nueva pestaña del panel lateral Fuente rápida:
Por primera vez, la pestaña Fuente rápida te permite enfocarte en tu código fuente HTML o JavaScript al mismo tiempo que en tus reglas CSS. Además, cuando haces clic en una propiedad CSS en el panel Estilos, la pestaña Fuente rápida salta automáticamente a la definición en la fuente y la destaca.
Habilita el experimento de diferencias entre fuentes en Chrome Canary para probarlo hoy mismo.
Edición en vivo de Sass
Aquí tienes 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 una etapa muy inicial de la fase experimental. Te informaremos en una publicación posterior cuando estén listos para que los pruebes.
Básicamente, DevTools te permitirá ver y editar variables de Sass como siempre quisiste. Haz clic en un valor que se compiló a partir de una variable Sass y la nueva pestaña Fuentes rápidas saltará a la definición de la variable.
Cuando editas un valor que se compiló a partir de una variable Sass, la edición actualiza la variable Sass, no solo la propiedad individual que seleccionaste.
Apps web progresivas
Consulta la lista de conferencias sobre la Web y Chrome en Google I/O 2016 y verás un tema importante que surge en el mundo del desarrollo web: las apps web progresivas.
A medida que surge el modelo de app web progresiva, DevTools itera rápidamente para proporcionar las herramientas que los desarrolladores necesitan para crear excelentes apps web progresivas. Nos dimos cuenta de que la compilación y depuración de estas aplicaciones modernas suele tener requisitos únicos, por lo que DevTools dedicó un panel completo 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 Recursos siguen disponibles. Solo hay algunos paneles nuevos diseñados específicamente para el desarrollo de apps web progresivas:
El panel Manifiesto te brinda 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 Service Workers te permite inspeccionar e interactuar con el service worker registrado para la página actual.
Además, el panel Liberar espacio de almacenamiento te permite borrar todo tipo de datos para que puedas ver una página en blanco.
JavaScript
Cruzar el límite entre el frontend y el 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 app web, significa que alcanzaste el límite de utilidad de DevTools, por lo que deberás cambiar de contexto 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 el frontend y el backend comienzan a difuminarse. Dado que Node.js se ejecuta en el motor de JavaScript V8 (el mismo motor que impulsa Google Chrome), queríamos permitir la depuración de Node.js desde DevTools. Gracias a V8, DevTools y Google Cloud Platform para equipos de Node.js, ahora puedes usar todas las potentes funciones de depuración de DevTools para inspeccionar una app de Node.js. La funcionalidad ya llegó a las compilaciones nocturnas de Node.js, aunque la integración de DevTools aún se está puliendo antes de incluirse en una versión principal. La depuración de tu app de Node.js desde DevTools algún día será tan simple como pasar node --inspect app.js y conectarse desde DevTools en cualquier ventana de Chrome.
Si bien las herramientas existentes, como Node Inspector, proporcionan experiencias de depuración basadas en GUI, la nueva integración de DevTools de Node.js se mantendrá actualizada con las funciones de depuración más recientes de DevTools, como la depuración de pila asíncrona, el entorno de pruebas y la compatibilidad con ES6.