Chrome DevTools

¿Cómo obtener por consola y de forma unívoca un elemento del DOM?

• Ejecutando jQuery.$(“#elemento”)

• Tab Elements -> Menú X -> Copy JS Path

• Tab Elements -> Menú X -> Copy JS Selector

¿Cómo ocultar un elemento seleccionado desde el tab Styles?

• selected { display:none}

• #elementId {display:hide}

• element.style { display:none}

¿Para qué sirve el botón ".cls" del tab Styles?

• Permite agregar una nueva clase al elemento seleccionado

• Muestra las clases definidas en el tag seleccionado

• Ambas opciones son correctas

¿Cuál es el shortcut para obtener por consola el último elemento seleccionado?

• $0

• $last

• #0

Los "Event Listener Breakpoints" sirven para detener la ejecución cuando:

• Se ejecuta el evento seleccionado sobre cualquier elemento

• Se ejecuta el evento seleccionado sobre el elemento que tiene el foco

• Depende, se indica por script

Para guardar una captura de pantalla de toda la página se debe ejecutar:

• Tecla “Impr Pant”

• Ctrl + Shift + P -> Capture full size screenshot

• Ctrl + Shift + P -> Capture area screenshot

¿Cómo evitar en debug que el proceso ingrese a archivos JS de terceros?

• Seteando la opción “Debug only my code”

• Excluyendo de la solución los archivos de terceros

• Usando la opción “Blackbox script” sobre cada archivo

¿Cómo identificar en qué vista se hizo la inclusión de un archivo estático?

• Desde el tab Network -> Columna “Initiator”

• Desde el tab “Sources”

• Escribiendo por consola: console.findStatic(“nombreArchivo.js”)

¿Cómo se puede medir el tiempo que demora en procesar una función?

• Desde el tab “Performance” -> Opción “Timing”

• Usando las funciones console.time("funcion()") + console.timeEnd("funcion()")

• Usando las funciones console.timeElapsed("funcion()")

¿Para qué sirve Lighthouse?

• Para medir la performance de la app

• Para medir el SEO de la app

• Para obtener un informe de auditoría completo de la app

• Todas son correctas