Novedades de Herramientas para desarrolladores (Chrome 60)

Kayce Basques
Kayce Basques

Bienvenida Las nuevas funciones y los principales cambios que llegarán a Herramientas para desarrolladores en Chrome 60 incluyen lo siguiente:

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

Funciones nuevas

Nuevo panel Audits, con la tecnología de Lighthouse

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

Las puntuaciones en la parte superior de App web progresiva, Rendimiento, Accesibilidad y Prácticas recomendadas son las 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 fallidas para mejorar la calidad de tu página web.

Un informe de Lighthouse

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 las Herramientas para desarrolladores para emular un dispositivo móvil, ejecuta varias pruebas en la página y, luego, muestra los resultados en el panel Auditorías.

Faro en Google I/O 2017

A continuación, consulta la charla sobre Herramientas para desarrolladores de Google I/O 2017 para obtener más información sobre la integración de Lighthouse en Herramientas para desarrolladores.

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 a ello, mira la charla de Lighthouse de Google I/O 2017 a continuación.

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

Insignias de terceros

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

Coloca el cursor sobre una insignia de terceros en el panel de red

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

Coloca el cursor sobre una insignia de terceros en la consola

Figura 3. Coloca el cursor sobre una insignia de terceros en la consola

Para habilitar insignias de terceros:

  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 Bottom-Up para agrupar la actividad de registro de rendimiento realizada por las entidades de terceros 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.

Agrupación por productos en la pestaña Bottom-Up

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

Un nuevo gesto para Continuar hasta aquí

Digamos que estás haciendo una pausa en la línea 25 de una secuencia de comandos y quieres saltar a la línea 50. Antes, podías establecer un punto de interrupción en la línea 50 o hacer clic con el botón derecho en la línea y seleccionar Continue to here. Pero ahora hay un gesto más rápido para controlar este flujo de trabajo.

Mientras recorres el código, mantén presionado Comando (Mac) o Control (Windows y Linux) y, luego, haz clic para continuar a esa línea de código. Las Herramientas para desarrolladores destacan en azul los destinos que se pueden saltar.

Continuar hasta aquí

Figura 5. Continuar aquí

Consulta Cómo comenzar a depurar JavaScript para conocer los conceptos básicos de la depuración en Herramientas para desarrolladores.

Entrar en modo asíncrono

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

El gesto nuevo para Continue to Here también funciona con código asíncrono. Si mantienes presionado Command (Mac) o Control (Windows y Linux), Herramientas para desarrolladores destaca los destinos asíncronos que se pueden saltar en verde.

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

Cambios

Vistas previas de objetos más informativas en la consola

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

Cómo se usa la consola para obtener una vista previa de los objetos

Figura 6. Cómo se usa la consola para obtener una vista previa de los objetos

Cómo ahora la consola obtiene vistas previas de los objetos

Figura 7: Cómo ahora la consola obtiene vistas previas de los objetos

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

El menú de selección contextual de la consola 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 de donde provino el elemento.
  • Coloca el cursor sobre un contexto de iframe para destacarlo en el viewport.

El nuevo menú de selección contextual

Figura 8: Cuando colocas el cursor sobre un iframe en el nuevo menú de selección de contexto, se destaca en el viewport.

Actualizaciones en tiempo real en la pestaña Cobertura

Cuando se registra la cobertura de código en Chrome 59, la pestaña Cobertura solo muestra "Grabando...", sin visibilidad del código que se usa. Ahora, en la pestaña Cobertura, se muestra en tiempo real qué código se usa.

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

Figura 9: Cómo interactuar con una página y cargarla con la pestaña Cobertura anterior

Cómo cargar una página e interactuar con ella mediante la nueva pestaña Cobertura

Figura 10: Cómo interactuar con una página y cargarla con la nueva pestaña Cobertura

Opciones de limitación de red más simples

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 India, y 3G rápida, que es común en lugares como Estados Unidos.

Nuevas opciones de limitación de red

Figura 11: Nuevas opciones de limitación de red

Las opciones de limitación se modificaron para que coincidan con otras herramientas de limitación a nivel del kernel. Herramientas para desarrolladores ya no muestra las métricas de latencia, descarga y carga junto a cada opción, porque esos valores eran engañosos. El objetivo es hacer coincidir la experiencia real de cada opción.

Pilas asíncronas activadas de forma predeterminada

Se quitó la casilla de verificación Async del panel Fuentes. Los seguimientos de pila asíncrono ahora están activados de forma predeterminada. Antes, esta opción era opcional debido a un problema de rendimiento. Ahora la sobrecarga 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 la Configuración o mediante la ejecución del comando Do not capture async stack traces en el Menú de comandos.

Herramientas para desarrolladores en Google I/O 2017

Consulta la charla del mítico Paul Ireland a continuación para obtener más información sobre en qué estuvo trabajando el equipo de Herramientas para desarrolladores durante el último año y los grandes temas que abordarán en el futuro cercano.

Descarga los canales de vista previa

Considera usar Canary, Dev o Beta de Chrome como tu navegador de desarrollo predeterminado. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueba APIs de plataformas web de vanguardia y encuentra problemas en tu sitio antes que tus usuarios.

Cómo comunicarse con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para analizar las nuevas funciones y los cambios en la publicación, o cualquier otra cosa relacionada con Herramientas para desarrolladores.

  • Envíanos tus sugerencias o comentarios a través de crbug.com.
  • Informa un problema en Herramientas para desarrolladores mediante Más opciones   Más   > Ayuda > Informar problemas con Herramientas para desarrolladores en Herramientas para desarrolladores.
  • Envía un tweet a @ChromeDevTools.
  • Deja comentarios en los videos de YouTube de las Novedades de las Herramientas para desarrolladores o en las sugerencias de Herramientas para desarrolladores (videos de YouTube).

Novedades de Herramientas para desarrolladores

Una lista de todos los temas abordados en la serie Novedades de Herramientas para desarrolladores.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Se canceló Chrome 82.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59