Tales características interesantes aparecieron en la consola del desarrollador de la última versión de Chrome que quería traducir una publicación sobre este tema desde el blog oficial de desarrolladores.
Chrome Developer Console me ha impresionado durante mucho tiempo con la profundidad de su desarrollo. Érase una vez que me estaba alejando de Firebug, y ahora han llegado los días en que no puedo ver mi vida sin desarrollo en Chrome. Es bueno cuando las personas se esfuerzan por superarse unas a otras en los negocios.
- Ejecución anticipada . Tan pronto como escriba una expresión, la consola mostrará su resultado.
- Consejos de argumento . A medida que escribe el nombre de la función, la consola le mostrará los argumentos esperados para ella.
- Finalización de funciones . Después de marcar una llamada de función, por ejemplo,
document.querySelector('p') , la consola le mostrará las funciones y propiedades que admite el valor de retorno. - Palabras clave de ES2017 a la consola . Las palabras clave como
await ahora están disponibles en la consola en la interfaz de autocompletar. - Lighthouse 3.0 en el panel de auditoría . Auditoría más rápida y consistente, nueva interfaz de usuario y nuevos tipos de auditorías.
- Apoyo
BigInt . Pruebe el nuevo tipo entero en la consola. - Agregue rutas a la propiedad en el tablero . Agregue propiedades del panel de destino al panel de control.
- La opción "Mostrar marcas de tiempo" se ha movido a la sección de configuración.
Nota: compruebe qué versión de Chrome se está ejecutando actualmente en la página de chrome://version . Si está trabajando con una versión anterior, estas funciones no estarán presentes. Si está ejecutando una versión posterior, estas características pueden cambiar. Chrome se actualiza automáticamente a una nueva versión principal cada 6 semanas.
Lea o vea la versión en video de estas notas:
Consola Asistente
Chrome 68 viene con nuevas funciones de consola relacionadas con la finalización del código y una vista previa de su ejecución.
Ejecución anticipada
Cuando escribe una expresión específica en la Consola, a partir de ahora puede mostrarle el resultado de ejecutar esta expresión debajo del cursor:
Imagen 1 . La consola muestra el resultado de la operación sort() antes de que se ejecute explícitamente.
Para activar la ejecución proactiva:
- Consola abierta
- Abra su configuración (Configuración de la consola)
- Marque la casilla para la evaluación Eager
Las herramientas de desarrollador no realizan esas expresiones que pueden provocar efectos secundarios .
Consejos de argumento
Una vez que haya escrito la función, la consola le mostrará los argumentos que espera recibir.
Imagen 2 . Varios ejemplos de sugerencias de argumentos en la consola.
Notas:
- El signo de interrogación antes del argumento, como
?options , apunta a un argumento opcional . - Los puntos suspensivos antes de un argumento, como
...items , apuntan a un operador de extensión . - Algunas funciones, como
CSS.supports() , toman muchas firmas de argumentos.
Finalización automática después de la ejecución de la función.
Nota: esta función depende de la ejecución proactiva, que debe activarse en la configuración de las herramientas del desarrollador.
Después de activar la ejecución proactiva, la consola también comenzará a mostrarle qué propiedades y funciones están disponibles después de escribir la función.
Imagen 3 . La primera captura de pantalla muestra el comportamiento anterior, y la segunda muestra una nueva que admite la finalización.
Palabras clave de ES2017 a la consola
Las palabras clave como await ahora await disponibles en la consola en la interfaz de autocompletar.
Imagen 4 . La consola ahora ofrece await en su interfaz de autocompletar.
Auditorías más rápidas y confiables, una nueva interfaz y nuevos tipos de auditorías.
Chrome 68 viene con Lighthouse 3.0. Las siguientes secciones explican algunos de los cambios más importantes. Vea también un artículo separado que anuncia Lighthouse 3.0 para la historia completa.
Auditorías más rápidas y confiables
Lighthouse 3.0 tiene un nuevo motor de auditoría interna llamado Lantern, que completa sus auditorías más rápido y con menos errores entre ejecuciones.
Nueva interfaz
Lighthouse 3.0 también trae una nueva interfaz de usuario, gracias a la colaboración entre los equipos Lighthouse y Chrome UX (Desarrollo y Diseño).
Imagen 5 . Nueva interfaz de informes en Lighthouse 3.0.
Nuevos tipos de auditorias
Lighthouse 3.0 también le proporciona 4 nuevos tipos de auditorías:
- Primera representación de contenido
- el archivo robots.txt no es válido
- Use formatos de video para contenido animado
- Evite múltiples y costosas solicitudes de recursos web
Soporte BigInt
Nota: esta no es una característica completamente nueva de Developer Tools, es una nueva característica del lenguaje JavaScript que puede probar en la consola.
Chrome 68 admite una nueva primitiva entera llamada BigInt . BigInt permite representar números de precisión arbitrarios. Pruebe esta función en la consola:
Imagen 6 . Un ejemplo de uso de BigInt en la consola.
Agregar rutas de propiedad en el tablero
Cuando detuvimos la ejecución del código en el punto de interrupción, haga clic con el botón derecho en la propiedad en el panel de objetivos y seleccione Add property path to watch y agregar la propiedad al panel de monitoreo.
Imagen 7 . Un ejemplo de agregar una ruta a una lista de observación.
La opción "Mostrar marcas de tiempo" se ha movido a la sección de configuración
Ahora la opción Mostrar marcas de tiempo, que anteriormente estaba en la configuración de la consola, se ha movido a la configuración de las herramientas del desarrollador .