Novedades de Herramientas para desarrolladores (Chrome 60)

Kayce Basques
Kayce Basques

¡Te damos la bienvenida! Entre las nuevas funciones y los cambios importantes que se agregarán a DevTools en Chrome 60, se incluyen los siguientes:

Mira la versión en video de estas notas de la versión a continuación o sigue leyendo para obtener más información.

Nuevas funciones

Nuevo panel de auditorías con tecnología de Lighthouse

El panel Auditorías ahora se basa en Lighthouse. Lighthouse proporciona un conjunto completo de pruebas para medir la calidad de tus páginas web.

Las puntuaciones de la parte superior para App web progresiva, Rendimiento, Accesibilidad y Prácticas recomendadas son tus puntuaciones agregadas para cada una de esas categorías. El resto del informe es un desglose de cada una de las pruebas que determinaron tus puntuaciones. Corrige las pruebas que fallaron para mejorar la calidad de tu página web.

Un informe de Lighthouse

Figura 1. Un informe de Lighthouse

Para auditar una página, sigue estos pasos:

  1. Haz clic en la pestaña Auditorías.
  2. Haz clic en Realizar una auditoría.
  3. Haz clic en Ejecutar auditoría. Lighthouse configura DevTools para emular un dispositivo móvil, ejecuta una serie de pruebas en la página y, luego, muestra los resultados en el panel Auditorías.

Lighthouse en Google I/O 2017

Consulta la charla de DevTools de Google I/O 2017 a continuación para obtener más información sobre la integración de Lighthouse en DevTools.

Cómo contribuir a Lighthouse

Lighthouse es un proyecto de código abierto. Para obtener más información sobre cómo funciona y cómo contribuir a él, consulta la charla de Lighthouse de Google I/O de 2017 a continuación.

¿Tienes una idea para una auditoría de Lighthouse? Publícalo aquí.

Insignias de terceros

Usa insignias de terceros para obtener más información sobre las entidades que realizan solicitudes de red en una página, acceden a la consola y ejecutan JavaScript.

Colocar el cursor sobre una insignia de terceros en el panel Network

Figura 2. Colocar el cursor sobre una insignia de terceros en el panel Network

Colocar el cursor sobre una insignia de terceros en Play Console

Figura 3. Colocar el cursor sobre una insignia de terceros en Play Console

Para habilitar insignias de terceros, haz lo siguiente:

  1. Abre el menú de comandos.
  2. Ejecuta el comando Show third party badges.

Usa la opción Agrupar por producto en las pestañas Árbol de llamadas y De abajo hacia arriba para agrupar la actividad de registro de rendimiento por las entidades de terceros que causaron las actividades. Consulta Cómo comenzar a analizar el rendimiento del tiempo de ejecución para aprender a analizar el rendimiento con DevTools.

Cómo agrupar por producto en la pestaña Bottom-Up

Figura 4. Cómo agrupar por producto en la pestaña Bottom-Up

Un nuevo gesto para Continuar aquí

Supongamos que estás en pausa en la línea 25 de una secuencia de comandos y quieres saltar a la línea 50. En el pasado, podías establecer una interrupción en la línea 50 o hacer clic con el botón derecho en la línea y seleccionar Continuar hasta aquí. Sin embargo, ahora, hay un gesto más rápido para controlar este flujo de trabajo.

Cuando analices el código, mantén presionado Comando (Mac) o Control (Windows, Linux) y haz clic para continuar con esa línea de código. DevTools destaca los destinos a los que se puede saltar en azul.

Continuar aquí

Figura 5. Continuar aquí

Consulta Comienza con la depuración de JavaScript para obtener información básica sobre la depuración en DevTools.

Cómo entrar en un evento asíncrono

Un tema importante para el equipo de DevTools en un futuro cercano es hacer que la depuración de código asíncrono sea predecible y proporcionarte un historial completo de la ejecución asíncrona.

El nuevo gesto para Continuar aquí también funciona con código asíncrono. Cuando mantienes presionada la tecla Comando (Mac) o Control (Windows, Linux), DevTools destaca los destinos asíncronos a los que se puede saltar en verde.

Consulta la siguiente demostración de la charla de DevTools en I/O para ver un ejemplo.

Cambios

Vistas previas de objetos más informativas en la consola

Anteriormente, cuando registrabas o evaluabas un objeto en la consola, esta solo mostraba Object, lo que no era muy útil. Ahora, la consola proporciona más información sobre el contenido del objeto.

Cómo se usaba la consola para obtener vistas previas de objetos

Figura 6. Cómo se usaba la consola para obtener vistas previas de objetos

Cómo la consola ahora muestra una vista previa de los objetos

Figura 7. Cómo la consola ahora muestra una vista previa de los objetos

Menú de selección de contexto más informativo en la Consola

El menú Selección de contexto de Play Console ahora proporciona más información sobre los contextos disponibles.

  • El título describe qué es cada elemento.
  • El subtítulo debajo del título describe el dominio del que proviene el elemento.
  • Coloca el cursor sobre un contexto de iframe para destacarlo en la ventana de visualización.

El nuevo menú de selección de contexto

Figura 8. Colocar el cursor sobre un iframe en el nuevo menú de selección de contexto lo destaca en el viewport

Actualizaciones en tiempo real en la pestaña Cobertura

Cuando se grababa la cobertura de código en Chrome 59, la pestaña Cobertura solo mostraba el mensaje "Grabando…", sin visibilidad sobre el código que se estaba usando. Ahora, la pestaña Cobertura te muestra en tiempo real qué código se está usando.

Cómo cargar una página y cómo interactuar con ella con la pestaña Cobertura anterior

Figura 9. Cargar una página y, luego, interactuar con ella mediante la pestaña Cobertura anterior

Carga y cómo interactuar con una página con la nueva pestaña Cobertura

Figura 10: Cargar una página y, luego, interactuar con ella mediante la nueva pestaña Cobertura

Opciones de limitación de la red más simples

Los menús de limitación de red en los paneles Red y Rendimiento se simplificaron para incluir solo tres opciones: Sin conexión, 3G lenta, que es común en lugares como India, y 3G rápida, que es común en lugares como Estados Unidos.

Las nuevas opciones de limitación de la red

Figura 11: Las nuevas opciones de limitación de la red

Se ajustaron las opciones de limitación para que coincidan con otras herramientas de limitación a nivel del kernel. DevTools ya no muestra las métricas de latencia, descarga y carga junto a cada opción, ya que esos valores eran engañosos. El objetivo es que coincida con la experiencia real de cada opción.

Pilas asíncronas activadas de forma predeterminada

Se quitó la casilla de verificación Async del panel Sources. Los seguimientos de pila asíncronos ahora están activados de forma predeterminada. En el pasado, esta opción era opcional debido a la sobrecarga de rendimiento. La sobrecarga ahora es lo suficientemente mínima como para habilitar la función de forma predeterminada. Si prefieres tener inhabilitados los seguimientos de pila asíncronos, puedes desactivarlos en Configuración o ejecutando el comando Do not capture async stack traces en el menú de comandos.

DevTools en Google I/O 2017

Mira la charla del mítico Paul Irish a continuación para obtener más información sobre en qué estuvo trabajando el equipo de DevTools durante el último año y los temas importantes que abordarán en un futuro cercano.

Descarga los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como tu navegador de desarrollo predeterminado. Estos canales de versión preliminar te brindan acceso a las funciones más recientes de DevTools, te permiten probar las APIs de plataformas web de vanguardia y te ayudan a encontrar problemas en tu sitio antes que tus usuarios.

Comunícate con el equipo de Chrome DevTools

Usa las siguientes opciones para hablar sobre las funciones nuevas, las actualizaciones o cualquier otro tema relacionado con DevTools.

Novedades de DevTools

Una lista de todo lo que se analizó en la serie Novedades de DevTools.