Novedades de Herramientas para desarrolladores (Chrome 68)

Kayce Basques

Nueva función de las Herramientas para desarrolladores en Chrome 68:

• Evaluación inmediata. A medida que escribes expresiones, la consola obtiene una vista previa del resultado.
• Sugerencias de argumentos. A medida que escribes funciones, la consola te muestra los argumentos esperados para esas .
• Función de autocompletado. Después de escribir una llamada a función, como document.querySelector('p'), haz lo siguiente: La consola te muestra las funciones y propiedades que admite el valor que se muestra.
• Palabras clave de ES2017 en la consola. Palabras clave como await ahora están disponibles en la consola Autocomplete.
• Lighthouse 3.0 en el panel Audits. Auditorías más rápidas y coherentes, una nueva IU y nuevas auditorías
• Compatibilidad con BigInt. Prueba el nuevo número entero de precisión arbitraria de JavaScript en la consola.
• Agrega rutas de propiedades al panel Watch. Cómo agregar propiedades del panel Scope a Watch del panel de control.
• "Mostrar marcas de tiempo" se movieron 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 incorpora algunas funciones nuevas de Console relacionadas con el autocompletado y la vista previa.

Evaluación ágil

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

Figura 1. La consola está imprimiendo el resultado de la operación sort() antes de que se haya ejecutado explícitamente

Para habilitar la evaluación inmediata, sigue estos pasos:

1. Abre la consola.
2. Abre la Configuración de la consola.
3. Habilita la casilla de verificación Evaluación urgente.

Las Herramientas para desarrolladores no evalúan con anticipación 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.

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.
• Una elipsis antes de un argumento, como ...items, representa un despliegue.
• Algunas funciones, como CSS.supports(), aceptan varias firmas de argumentos.

Autocompletar después de la ejecución de funciones

Luego de habilitar la Evaluación inmediata, la consola también muestra las propiedades y funciones disponible después de escribir una función.

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

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. La consola ahora sugiere await en su IU de autocompletado.

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

Chrome 68 se incluye con Lighthouse 3.0. Las siguientes secciones son un resumen de algunos de los cambios más importantes. Consulta Anuncio de Lighthouse 3.0 para ver la historia completa.

Auditorías más rápidas y confiables

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

Nueva IU

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

Figura 5. La nueva IU de informes en Lighthouse 3.0

Nuevas auditorías

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 el contenido animado
• Evita 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:

Figura 6. Un ejemplo de BigInt en Console

Agregar la ruta de la propiedad a supervisar

Mientras estás en pausa en un punto de interrupción, haz clic con el botón derecho en una propiedad del panel Alcance y selecciona Agregar propiedad path to watch para agregar esa propiedad al panel Watch.

Figura 7. Ejemplo de Agrega la ruta de acceso de una propiedad a la supervisión.

"Mostrar marcas de tiempo" se movió a la configuración

La casilla de verificación Mostrar marcas de tiempo anteriormente en la Configuración de Console se movió a Configuración.

Descarga los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como navegadores de desarrollo predeterminados. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueban API de plataformas web de vanguardia y detectan problemas en tu sitio antes que los usuarios.

Comunicarse con el equipo de Herramientas para desarrolladores de Chrome

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

• Para enviarnos sugerencias o comentarios, accede a crbug.com.
• Informa un problema en Herramientas para desarrolladores con Más opciones   > Ayuda > Informa problemas de Herramientas para desarrolladores en Herramientas para desarrolladores.
• Twittea a @ChromeDevTools.
• Deja comentarios en nuestros videos de YouTube de Herramientas para desarrolladores o en videos de YouTube de las Sugerencias de las Herramientas para desarrolladores.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se ha abordado en la serie Novedades de Herramientas para desarrolladores.