Novedades de Herramientas para desarrolladores (Chrome 68)

Kayce Basques

Novedades de las Herramientas para desarrolladores en Chrome 68:

• Evaluación detallada. A medida que escribes expresiones, la consola muestra una vista previa del resultado.
• Sugerencias de argumentos A medida que escribes funciones, la consola te muestra los argumentos esperados para esa función.
• Autocompletado de funciones Después de escribir una llamada a una función, como document.querySelector('p'), la consola te muestra las funciones y las propiedades que admite el valor de retorno.
• Palabras clave de ES2017 en la consola Las palabras clave, como await, ahora están disponibles en la IU de autocompletado de la consola.
• Lighthouse 3.0 en el panel Audits Auditorías más rápidas y coherentes, una nueva IU y auditorías nuevas
• BigInt asistencia. Prueba el nuevo número entero de precisión arbitraria de JavaScript en la consola.
• Cómo agregar rutas de propiedad al panel Watch Agrega propiedades del panel Scope al panel Watch.
• La opción"Mostrar marcas de tiempo" se movió a Configuración.

Sigue leyendo o mira la versión en video de las notas de la versión a continuación.

Consola de asistencia

Chrome 68 incluye algunas funciones nuevas de la consola relacionadas con la función de autocompletar y la vista previa.

Evaluación detallada

Cuando escribes una expresión en la consola, esta ahora puede mostrar una vista previa del resultado de esa expresión debajo del cursor.

Figura 1. La consola imprime el resultado de la operación sort() antes de que se haya ejecutado de forma explícita.

Para habilitar la evaluación detallada, haz lo siguiente:

1. Abre la consola.
2. Abre Console Settings .
3. Habilita la casilla de verificación Evaluación eager.

Las Herramientas para desarrolladores no realizan una evaluación anticipada si la expresión causa efectos secundarios.

Sugerencias de argumentos

Mientras escribes funciones, la consola ahora te muestra los argumentos que espera la función.

Figura 2. Varios ejemplos de sugerencias de argumentos en la consola

Notas:

• Un signo de interrogación antes de un argumento, como ?options, representa un argumento opcional.
• Los puntos suspensivos antes de un argumento, como ...items, representan una propagación.
• Algunas funciones, como CSS.supports(), aceptan varias firmas de argumentos.

Autocompletar después de las ejecuciones de funciones

Después de habilitar la evaluación anticipada, la consola ahora también te muestra qué propiedades y funciones están disponibles después de que escribes una función.

Figura 3. La captura de pantalla superior representa el comportamiento anterior, y la captura de pantalla inferior representa el nuevo comportamiento que admite la función de autocompletado.

Palabras clave de ES2017 en Autocompletar

Las palabras clave de ES2017, como await, ahora están disponibles en la IU de autocompletar de la consola.

Figura 4. Ahora, la consola sugiere await en su IU de autocompletado.

Auditorías más rápidas y confiables, una nueva IU y auditorías nuevas

Chrome 68 incluye Lighthouse 3.0. En las siguientes secciones, se resumen algunos de los cambios más importantes. Consulta Anuncio de Lighthouse 3.0 para conocer la historia completa.

Auditorías más rápidas y confiables

Lighthouse 3.0 tiene un nuevo motor de auditoría interno, cuyo nombre en clave es Lantern, que completa tus auditorías más rápido y con menos variaciones entre ejecuciones.

Nueva IU

Lighthouse 3.0 también incluye una nueva IU gracias a la colaboración entre los equipos de Lighthouse y UX de Chrome (investigación y diseño).

Figura 5. La nueva IU de informes en Lighthouse 3.0

Auditorías nuevas

Lighthouse 3.0 también incluye 4 auditorías nuevas:

• First Contentful Paint
• robots.txt no es válido
• Usa formatos de video para incluir contenido animado
• Evita viajes de ida y vuelta múltiples y costosos a cualquier origen

Compatibilidad con BigInt

Chrome 68 admite un nuevo tipo primitivo numérico llamado BigInt. BigInt te permite representar números enteros con precisión arbitraria. Pruébalo en la consola:

Figura 6. Un ejemplo de BigInt en la consola

Agregar ruta de propiedad para supervisar

Mientras se detiene en un punto de interrupción, haz clic con el botón derecho en una propiedad del panel Alcance y selecciona Agregar ruta de propiedad para supervisar para agregar esa propiedad al panel Supervisar.

Figura 7. Ejemplo de Agregar ruta de propiedad para supervisar

La opción "Mostrar marcas de tiempo" se trasladó a la configuración

La casilla de verificación Mostrar marcas de tiempo que antes se encontraba en Configuración de la consola se movió a Configuración.

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 analizar las nuevas funciones, las actualizaciones o cualquier otro tema relacionado con las 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 DevTools de YouTube o en los videos de Sugerencias de DevTools de YouTube.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se abordó en la serie Novedades de las Herramientas para desarrolladores