Novedades de Herramientas para desarrolladores (Chrome 68)

Kayce Basques
Kayce Basques

Novedades de Herramientas para desarrolladores en Chrome 68:

Continúa leyendo o mira la versión en video de las notas de la versión que aparece a continuación.

Consola de asistencia

Chrome 68 incluye algunas funciones nuevas de la consola relacionadas con el autocompletado y la vista previa.

Evaluación pasiva

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 haya ejecutado explícitamente.

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

Para habilitar una evaluación veloz, siga estos pasos:

  1. Abra la consola.
  2. Abre Configuración de Console El botón Configuración de la consola.
  3. Habilita la casilla de verificación Evaluación inmediata.

Herramientas para desarrolladores no evalúa con anticipación si la expresión causa efectos secundarios.

Sugerencias de argumentos

A medida que escribas funciones, la consola te mostrará los argumentos que espera la función.

Sugerencias de argumentos en la consola

Figura 2. Varios ejemplos de sugerencias de argumentos en Console

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 extendido.
  • 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 inmediata, la consola ahora también muestra qué propiedades y funciones están disponibles después de escribir una función.

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

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

Palabras clave de autocompletado de ES2017

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

La consola ahora sugiere "await" en su IU de autocompletado.

Figura 4. La consola ahora sugiere await en su IU de autocompletado.

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

Chrome 68 se envía con Lighthouse 3.0. Las siguientes secciones son un resumen de algunos de los cambios más importantes. Consulta Anunciar 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 interna, con nombre interno, 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 ofrece una nueva IU, gracias a una colaboración entre Lighthouse y los equipos de UX (investigación y diseño) de Chrome.

La nueva IU de informes en Lighthouse 3.0.

Figura 5. La nueva IU de informes en Lighthouse 3.0

Auditorías nuevas

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 contenido animado
  • Evita los viajes de ida y vuelta costosos y múltiples 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ébalo en la consola:

Un ejemplo de BigInt en la consola.

Figura 6. Un ejemplo de BigInt en Console

Agregar la ruta de acceso de la propiedad a supervisar

Mientras la app está pausada en un punto de interrupción, haz clic con el botón derecho en una propiedad del panel Scope y selecciona Add property path to watch para agregar esa propiedad al panel Watch.

Un ejemplo de Agregar ruta de propiedad para observar.

Figura 7: Ejemplo de Cómo agregar la ruta de acceso de la propiedad a observación

Se movió “Mostrar marcas de tiempo” a la configuración

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

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