Novedades de Herramientas para desarrolladores (Chrome 68)

Kayce Basques
Kayce Basques
X GitHub Error

Novedades de DevTools en Chrome 68:

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

Consola de accesibilidad

Chrome 68 incluye algunas funciones nuevas de Console relacionadas con la finalización automática y la vista previa.

Evaluación anticipada

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

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

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

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

  1. Abre Console.
  2. Abre Configuración de la consola El botón Configuración de la consola.
  3. Habilita la casilla de verificación Eager evaluation.

DevTools no realiza una evaluación anticipada si la expresión causa efectos secundarios.

Sugerencias de argumentos

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

Sugerencias de argumentos en la consola

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 un rango.
  • 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, Console ahora también te muestra qué propiedades y funciones están disponibles después de escribir una función.

Después de ejecutar document.querySelector('p'), Console ahora puede mostrarte las propiedades y funciones disponibles para ese elemento.

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

Palabras clave de ES2017 en la función autocompletar

Las palabras clave de ES2017, como await, ahora están disponibles en la IU de autocompletado de Play Console.

Console ahora sugiere "await" en su IU de autocompletar.

Figura 4. Console ahora sugiere await en su IU de autocompletado.

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

Chrome 68 se envía con 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ía más rápida y confiable

Lighthouse 3.0 tiene un nuevo motor de auditoría interno, con el nombre en código Lantern, que completa las auditorías más rápido y con menos variación entre las ejecuciones.

IU nueva

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

La nueva IU de informes en Lighthouse 3.0.

Figura 5. La nueva IU de informes en Lighthouse 3.0

Auditoría nueva

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

  • Primer procesamiento de imagen con contenido
  • robots.txt no es válido
  • Usa formatos de video para incluir contenido animado
  • Evitar varios viajes de ida y vuelta costosos a cualquier origen

Compatibilidad con BigInt

Chrome 68 admite una nueva primitiva numérica llamada BigInt. BigInt te permite representar números enteros con precisión arbitraria. Pruébala en la consola:

Ejemplo de BigInt en la consola.

Figura 6. Ejemplo de BigInt en la consola

Agrega una ruta de propiedad para supervisar

Cuando la ejecución se detenga en un punto de interrupción, haz clic con el botón derecho en una propiedad del panel de alcance y selecciona Agregar ruta de propiedad para supervisar para agregarla al panel de supervisión.

Ejemplo de Add property path to watch.

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 Console El botón Configuración de la consola, se trasladó 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 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.