Novedades de Herramientas para desarrolladores (Chrome 60)

¡Te damos la bienvenida! Las nuevas funciones y los cambios importantes que llegarán a las Herramientas para desarrolladores en Chrome 60 incluyen lo siguiente:

• Un nuevo panel de Auditorías, que incluye pruebas para aplicaciones web progresivas, rendimiento, accesibilidad y prácticas recomendadas.
• Insignias de terceros. Descubre qué terceros realizan solicitudes de red, registran información en la consola y ejecutan JavaScript.
• Continuar aquí. Un nuevo gesto que puede acelerar tu flujo de trabajo de depuración de JavaScript.
• Depuración predecible para JavaScript asíncrono.
• Vistas previas de objetos en la consola
• Actualizaciones en tiempo real en la pestaña Cobertura
• Un nuevo menú para seleccionar contextos en la consola
• Opciones de limitación de red más simples
• Los seguimientos de pila asincrónicos están activados de forma predeterminada.

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 Audits con tecnología de Lighthouse

El panel Audits ahora cuenta con la tecnología de Lighthouse. Lighthouse proporciona un conjunto integral de pruebas para medir la calidad de tus páginas web.

Las puntuaciones que se muestran en 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. Mejora la calidad de tu página web corrigiendo las pruebas que fallaron.

Figura 1. Un informe de Lighthouse

Para auditar una página, haz lo siguiente:

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 Herramientas para desarrolladores 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

Mira la charla sobre 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 puedes contribuir, consulta la charla de Lighthouse de Google I/O 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, registran información en la consola y ejecutan JavaScript.

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

Figura 3. Cómo colocar el cursor sobre una insignia de terceros en la consola

Para habilitar las 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 grabación del rendimiento por las entidades externas que causaron las actividades. Consulta Cómo comenzar a analizar el rendimiento del tiempo de ejecución para obtener información sobre cómo analizar el rendimiento con Herramientas para desarrolladores.

Figura 4. Agrupación por producto en la pestaña Bottom-Up

Un nuevo gesto para Continuar aquí

Supongamos que estás en la línea 25 de un guion y quieres ir 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í. Pero ahora hay un gesto más rápido para controlar este flujo de trabajo.

Cuando ejecutes el código paso a paso, mantén presionada la tecla Comando (Mac) o Control (Windows, Linux) y, luego, haz clic para continuar a esa línea de código. Las Herramientas para desarrolladores destacan los destinos a los que se puede saltar en azul.

Figura 5. Continuar hasta aquí

Consulta Comienza a depurar JavaScript para aprender los conceptos básicos de la depuración en DevTools.

Cómo comenzar a usar async

Un tema importante para el equipo de Herramientas para desarrolladores en el futuro cercano es hacer que la depuración del 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 en verde los destinos asíncronos a los que se puede saltar.

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 registraba o evaluaba un objeto en la consola, esta solo mostraba Object, lo que no era particularmente útil. Ahora, la consola proporciona más información sobre el contenido del objeto.

Figura 6. Cómo se usaba la consola para obtener 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ú de selección de contexto de la consola ahora proporciona más información sobre los contextos disponibles.

• El título describe qué es cada elemento.
• El subtítulo que se encuentra debajo del título describe el dominio del que proviene el elemento.
• Coloca el cursor sobre el contexto de un iframe para destacarlo en el viewport.

Figura 8. Cuando colocas el cursor sobre un iframe en el nuevo menú Context Selection, se destaca en la ventana gráfica.

Actualizaciones en tiempo real en la pestaña Cobertura

Cuando se registraba la cobertura del código en Chrome 59, la pestaña Coverage solo mostraba el mensaje "Recording…", 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.

Figura 9. Cómo cargar una página e interactuar con ella usando la pestaña Coverage anterior

Figura 10: Cómo cargar una página e interactuar con ella usando la nueva pestaña Coverage

Opciones de limitación de red más sencillas

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

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. Las Herramientas para desarrolladores ya no muestran 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 asincrónicas activadas de forma predeterminada

Se quitó la casilla de verificación Async del panel Fuentes. Los seguimientos de pila asíncronos ahora están activados de forma predeterminada. Anteriormente, 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 inhabilitar 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 lo que el equipo de Herramientas para desarrolladores ha estado trabajando durante el último año y los grandes temas que abordarán en el 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 vanguardia de la plataforma web y te ayudan a encontrar problemas en tu sitio antes de que lo hagan tus usuarios.

Comunícate con el equipo de Herramientas para desarrolladores de Chrome

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

• Envíanos tus comentarios y solicitudes de funciones a crbug.com.
• Informa un problema de Herramientas para desarrolladores con more_vert Más opciones > Ayuda > Informar un problema de Herramientas para desarrolladores en Herramientas para desarrolladores.
• Envía un tuit a @ChromeDevTools.
• Deja comentarios en los videos de Novedades de las Herramientas para desarrolladores de YouTube o en los videos de Sugerencias sobre las Herramientas para desarrolladores de YouTube.

Novedades de Herramientas para desarrolladores

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