8 características menos conocidas pero más asesinas de Chrome DevTools

Chrome DevTools es una de las principales razones por las que los desarrolladores se niegan a tocar cualquier otro browser.

Pero la mayoría de nosotros usamos solo un puñado de funciones, sin prestar atención a muchas más funciones alucinantes que se lanzan silenciosamente.

Descubramos algunos de estos gemas ocultas!

Cada uno tiene su sistema operativo y hardware favorito. platforma, tipo de dispositivo, factor de forma del dispositivo, etc. Pero una cosa es común a todos: ejecutan Chrome browser y sólo el Chrome brows¡eh! Creo que es seguro decir que la browsTodas las guerras han terminado y Chrome ha ganado de manera convincente.

Windows los usuarios usan el b predeterminadorowser solo para descargar Chrome y luego usar Chrome, ignorando todas las "recomendaciones" de Windows. Lo mismo ocurre con los dispositivos de Apple (especialmenteally MacBooks y dispositivos de pantalla más grande), donde los usuarios y desarrolladores evitan Safari, a pesar de las muchas afirmaciones y tácticas de conversión de Apple.

Y si un dispositivo no ejecuta Chrome, es muy probable que esté ejecutando una derivación compatible con Chrome, como Brave or Vivaldi. Sí, lo sé, técnica.ally, estos browslos demás no lo son basado en Chrome, pero esa es otra discusión. El usuario medio puede estar utilizando estos otro browsERS por razones ideológicas o especiales, pero cuando se trata de desarrolladores, no hay otra browser a la vista excepto Chrome.

Incluso se ignora el hecho de que es un monstruo devorador de recuerdos. La razón es simple: DevTools de Chrome.

Ahora, si está leyendo este artículo, es seguro asumir que es un usuario avanzado, un manipulador, un desarrollador web, o algo a lo largo de esas alineaciones. Como tal, ninguno de nosotros necesita una introducción a DevTools, cómo abrirlo, sus diversas funciones, etc.

En cambio, sin perder tiempo, vamos a sumergirnos directamente en algunas de las características menos conocidas pero asombrosamente útiles de Chrome DevTools.

Modo de diseño

Una de las cosas que los desarrolladores hacen habitualmente es inspect un elemento en la página y luego modificar su HTML para prevVer algo o probar el efecto de un cambio.

Sin embargo, trabajar con HTML directamente en DevTools no es lo más sencillo que nunca: recorrer la sopa de etiquetas, forzar la vista tratando de encontrar el corchete de apertura / cierre correcto y lidiar con una cantidad ridícula de espacios en blanco mientras se edita el texto (espacios en blanco que claramente falta en el documento que está viendo), son algunos de los problemas con los que puede tener que lidiar. Es incluso peor si eres diseñador y no quieres analizar el desorden.

Aquí hay una captura de pantalla de una de las páginas de este mismo sitio web (Geekflare):

La deeplEl HTML anidado y las clases CSS misteriosas y confusas son típicos de cualquier sitio web no trivial hoy en día, que es donde la experiencia con DevTools es subóptima, por decir lo menos. 🤭

Pero hay una característica de DevTools llamada Modo de Diseño, que puede aliviar el dolor en muchos casos. Usar el modo de diseño (por cierto, ese no es el nombre oficial; es simplemente el nombre que la gente le da por cómo se activa).ated y lo que hace, no te preocupes, ¡lo veremos muy pronto!), se pueden realizar cambios en la página visually y en vivo, ¡como editar una hoja de cálculo o un editor de texto! El único inconveniente es que esta función no está activada de forma predeterminada y activarla es una bit de dolor de cabeza, especialmenteally para no desarrolladores.

En cualquier caso, hacerlo es bastante sencillo; todo lo que necesita hacer es seguir las instrucciones a continuación. Dependiendo de dónde se encuentre en la curva de sofisticación del usuario, esto puede ser ridículamente fácil o moderno.atemuy difícil. Esto es lo que debe hacer:

• Asegúrese de que la página web que desea editar esté cargada y que la esté viendo actualmente (es decir, la pestaña en cuestión es la activa).
• Abra el panel DevTools como lo hace habitualmente.ally hacer (atajo de teclado, clics del mouse, whatever). Me gusta usar atajos de teclado y en Mac, Opt + Cmd + I hace el trabajo.
• Ahora, con DevTools abierto, vaya a la pestaña llamada "Consola". Es posible que algunos de ustedes se pongan los ojos en blanco ante lo tonto y obvio que parece todo esto, pero bueno, pensemos también en los (¿cientos?) de miles de personas que luchan mientras trabajan con el b.rowsconsola er y JavaScript (por quéatevera razón).
• Haga clic en la primera línea junto al cursor, que luego presentará un mensaje de escritura, y ahora puede escribir código JavaScript allí (vea la captura de pantalla un poco más abajo).
• Ahora necesitamos escribir algo de código JavaScript. No se preocupe, ya que lo que necesita escribir / mecanografiar es muy breve y sencillo: document.designMode = "on". También puede copiar y pegar el código de esta página (si lo hace, asegúrese de que el formato no se copie; solo necesitamos texto sin formato) o, si se siente seguro, escríbalo.
• Presiona Enter / Return.

¡Sí, eso es todo!

Ahora puede editar libremente la página como si fuera un documento. Vea este video de ejemplo en el que edito en vivo el sitio web de Spotify usando el modo de diseño:

La función Modo de diseño, por muy interesante que sea, no es una solución milagrosa; no es posible, por ejemplo, copiar y pegar botones fácilmente, cambiar su apariencia, etc. La cantidad real de cosas que puede hacer en comparación con el editor visual de páginas web de un sueño es muy baja; sin embargo, resuelve casos de uso en los que es necesario cambiar el contenido visualmente.ally y sobre la marcha.

Dicho esto, no es demasiado descabellado afirmar que la gente de Chrome está probando qué tan bien se recibe esta función; si encuentra una buena recepción y un caso de uso sólido, es razonable esperar que pronto aparezcan capacidades de edición más potentes. 🤞🏻🤞🏻

Simulación de condiciones de red

La pestaña Red en Chrome DevTools es quizás la más utilizada (no tengo datos, por supuesto, pero como desarrollador web, tiendo a usar la pestaña Consola tal vez entre el 20 y el 30% del tiempo, y el Pestaña Red el resto del tiempo). Nos brinda todo tipo de información sobre las solicitudes que se realizan desde la página, su tipo, metadatos / encabezados, estado, progreso de descarga de activos (imágenes, hojas de estilo, etc.), tiempos de carga, etc. Con una utilidad tan increíble, no es de extrañar que la pestaña Red sea la más común.

Y, sin embargo, es fácil pasar por alto la característica que estamos analizando; es posible que no hayas notado un menú desplegable inofensivo que stateEs lo obvio: en línea.

Si hace clic aquí, verá un menú desplegable con varias opciones que le permiten acelerar la velocidad de la red: 3G rápido, 3G lento, sin conexión, etc. Si bien puede haber varios casos de uso para esta opción, el más común es probar el sitio web rendimiento en redes lentas o comportamiento de aplicaciones web sin conexión (suponiendo que se hayan agregado tales capacidades).

Echemos un vistazo a esto. Configuraré la red en "3G lento" y recargaré la misma página desde la previosa captura de pantalla. Antes de hacer eso, observe en la captura de pantalla anterior cómo en mi conexión de red actual (una banda ancha de 40 Mbps), la mayoría de los recursos se descargan en menos de 100 milisegundos.

Y ahora, es hora de ver qué le hace el 3G lento.

¡Que diferencia!

Observe que el Tiempo de carga para los activos ahora está en el rango de 5 a 10 segundos. Además, ¡el sitio terminó de cargarse completamente en 17.25 segundos! Sí, sé lo que estás pensando, pero debes tener en cuenta que en una red 3G lenta, cualquier sitio web moderno tardará varios segundos en cargarse. Si tu quieres La carga rápida en redes lentas es otra cosa, aunque en definitiva tiene que ser una decisión empresarial en la que las ganancias justifiquen el effort.

En la captura de pantalla anterior, observe el icono de advertencia en la pestaña Red. Esa es la forma en que Chrome le recuerda que realizó algún cambio persistente no predeterminado y, a menos que sepa lo que está haciendo, tal vez debería restablecerlo.

Selector de color interactivo

InspectIntegrar elementos DOM en DevTools es algo que todos hacemos prácticamente todos los días. También estamos acostumbrados a la sección de detalles de CSS que se muestra al lado y sabemos que podemos editarla y ver los resultados inmediatamente.ately.

Una pequeña conveniencia escondida entre todo esto es que si hace clic en una propiedad de color CSS, ¡aparecerá una interfaz de selector de color familiar!

Tenga en cuenta que no es un selector de color básico y escueto. Le permite controlar la transparencia, cambiar los sistemas de color que se utilizan, elegir un color directamente de la página y mucho más.

Así, la próxima vez que experimentes con los colores de acento de un sitio, por ejemplo, no necesitarás calcular ni adivinar el valor correcto para el tono que tienes en mente. De hecho, a muchas personas les gusta diseñar sitios web directamente en el b.rowsejem; ¡Para ellos, características como éstas son una bendición! 🙂

Monitorelementos de eventos en la página

A menudo nos encontramos en una situación en la que desearíamos saber qué está pasando con ese elemento específico que nos interesa. Esto es especialmenteally true cuando se usa jQuery en un código base no trivial, ya sea el suyo o el de otros; Los controladores de eventos y la lógica están dispersos por todas partes, y rastrear un error puede ser una pesadilla.

Afortunadamente, Chrome DevTools tiene una función ingeniosa precisamente para esto. Se observará el indicaated elemento para usted y registrar los eventos en la consola. Pero hay un bit de decepción: esta característica no tiene capacidades de selección de elementos basadas en nombres de clases CSS. Entonces, la forma jQuery de $("#email") no está disponible. 🙂

Dicho esto, veamos cómo hacerlo funcionar. Empezamos haciendo un simple “inspect elemento” usando DevTools inspecto. Si, es lo mismo inspectherramienta de iones que utilizamos todos los días.

En la captura de pantalla siguiente, he usado el inspecto herramienta para resaltar la entrada de texto. Por “resaltar” no me refiero a que el elemento de la página esté resaltado (no lo está, como puedes ver); más bien, el inspecto se hizo clic con el cursor en la entrada de texto y se resalta el código HTML correspondiente en DevTools.

Hacer esto apunta a la situación actual inspectelemento ed para evento monitoring, lo que hace que el elemento sea accesible como una variable especial de JavaScript llamada $0. A continuación, asegurándome de no hacer clic en ningún otro lugar de la b.rowser window descuidadamente (específicamenteally la parte del código HTML), hago clic en la Consola y adjunto un detector de eventos para esta entrada de texto. Para esto, todo lo que necesito es una sola línea de código: monitorEvents($0, 'mouse'). La parte del "mouse" aquí le dice a Chrome que solo estoy interesado en ver eventos basados ​​en el mouse.

Tan pronto como presiono Enter/Return, monitorestá activoated, y si ahora paso el cursor sobre la entrada de texto o hago clic en ella, esos eventos se registran en la consola como objetos JavaScript:

Como puede ver en la captura de pantalla, se capturaron varios tipos de eventos del mouse cuando hice clic en el elemento, escribí mi nombre y luego alejé el mouse (los eventos de escritura, al ser eventos de teclado, no se registraron). Los eventos son objetos JavaScript en sí mismos, como se desprende de la captura de pantalla; cada objeto de evento contiene una enorme cantidad de información. Por ejemplo, expandí el objeto de evento "clic", ¡y la cantidad de propiedades no cabían todas en una sola captura de pantalla!

¡Le animo a que pruebe esta función de inmediato, ya que seguramente le ahorrará muchos dolores de cabeza en sus próximos proyectos!

Informes de rendimiento del sitio web

Actualmente, rendimiento del sitio web makes or breaks a business/website. Even a small increase in performance translates a ganancias masivas de SEO, así como a la satisfacción del usuario. Pero, ¿cómo saber qué partes de su sitio web necesitan atención y cuáles ya son buenas?

¿Necesitas contratar un equipo de expertos y esperar pacientemente unos días?

Bueno, hay casos en los que es necesario hacerlo, pero afortunadamente, Chrome DevTools nos cubre al resto. en elateprimeras versiones de Chrome (late 2020), encontrarás un Lighthouse pestaña en DevTools. Hace unos meses, se llamaba Auditorías y, de manera bastante confusa, ese es el nombre que encontrará en los documentos oficiales al momento de escribir este artículo. De todos modos, la cuestión es que Lighthouse solía ser un sitio web de moda para comprobar el rendimiento de un sitio web de forma gratuita, pero luego Google lo eliminó (no se dieron los motivos). Afortunadamente, la misma poderosa funcionalidad later resurgió en DevTools.

generarate Para obtener un informe de rendimiento, todo lo que necesita hacer es presionar un solo botón después de que se haya cargado la página que le interesa:

Como puede ver en el lado derecho de la captura de pantalla, hay algunas opciones para controlar cuánta información desea (y, por supuesto, qué desea probar). Una vez que esté satisfecho con la configuración, presione el gran botón azul, siéntese y relájese. Unos pocos segundos later, tendrá un informe beneficioso similar a este:

Los números que ve en la captura de pantalla anterior muestran la puntuación general de cada catesangriento. La Catesangriento por Aplicaciones web progresivas (PWA) está atenuado, probablemente porque este sitio web no tiene capacidades de PWA. Además, como puede ver por el tamaño de la barra de desplazamiento en la captura de pantalla (a la derecha), es un informe largo.

Así es como se ve una parte de la sección sobre rendimiento:

No afirmaré que Lighthouse y sus sugerencias sean el santo grial del rendimiento del sitio web, pero son extremadamente útiles; esto se debe a que los propietarios y desarrolladores de sitios web rara vez tienen idea de qué problemas existen y cómo abordarlos exactamente.

Honestamente, incluso yo me siento perdido como desarrollador web, ya que el rendimiento y las pruebas tienden a ser una especie de especialización. Como tal, Lighthouse es una empresa poco conocida y poco apreciada.ated, que ahora forma parte de Chrome DevTools, que es de inmensa utilidad tanto para propietarios de empresas como para desarrolladores/administradores de sistemas.

Proeza de edición de código

La pestaña Fuentes en DevTools nos permite acceder a varios archivos cargados por el sitio web. También tiene capacidades como editar código, guardar fragmentos, etc. Esto no debería sorprendernos.rise a los desarrolladores web. Sin embargo, DevTools también tiene algunas comodidades integradas que facilitan la vida a los desarrolladores acostumbrados a sus IDE de código favoritos.

DevTools utiliza algunos métodos abreviados de teclado conocidos que le ahorrarán tiempo y minimizarán la frustración por la manipulación de códigos. Por ejemplo, Ctrl + D (o Cmd + D en Mac) se puede utilizar para resaltar varias apariciones de una palabra. Del mismo modo, sosteniendo Ctrl (o Cmd en Mac) y al hacer clic en varios lugares del código, obtendrá varios cursores. Eche un vistazo al video a continuación para tener una mejor idea:

Si cree que esto es genial, asegúrese de sumergirse en los documentos oficiales para aprovechar todas las funciones de edición de código que DevTools tiene para ofrecer.

Controlar elemento DOM state

A veces estamos probando o depurando algo, pero el comportamiento que buscamos solo está disponible en un elemento en particular.ate. Dependiendo de qué state lo es, podrías terminar pasándolo fatal; para mí, es la calle "hover"ate, ya que recuerdo haber perdido incontables minutos tratando de cronometrar la acción de desplazamiento o añadiendo CSS temporal adicional, etc.

Afortunadamente, Chrome DevTools tiene una manera fácil de cambiar el estado.ate de una inspectelemento editado. Es más, la opción para hacerlo está ahí si hacemos clic derecho en el elemento (en la pestaña Elementos), pero dada la cantidad de funciones y las presiones de un día de trabajo, es fácil pasar por alto esto:

Sí, es really ¡así de sencillo!

Ahora, no necesita incorporar lógica de prueba condicional en su código, escribir CSS adicional o pasar por otros obstáculos al observar un elemento en un estilo diferente.ate.

Panel de herramientas

Por último, pero definitivamente no menos importante en esta lista, está el panel Herramientas. Es otra de esas funciones increíblemente útiles que están bien ocultas y solo se pueden ver usando atajos de teclado. Como sugiere el nombre, el panel Herramientas no es una sola herramienta, sino una especie de tablero en el que casi todas las funciones de DevTool están disponibles. Dado que hay demasiadas funciones que ofrecen la funcionalidad general de DevTools, hay una barra de búsqueda disponible en la parte superior.

Para activarate el panel Herramientas, asegúrese de estar en el panel DevTools y luego presione Ctrl + Shift + P (o Cmd + Shift + P para usuarios de Mac):

El panel Herramientas está lleno de capacidades y sorpresas.rises. Por ejemplo, ¿sabías que puedes tomar una captura de pantalla directamente desde DevTools?

Apuesto a que no, porque tendrías que abrir el panel Herramientas y escribir "captura de pantalla" en la barra de búsqueda para descubrir eso:

También notará varias opciones para tomar capturas de pantalla, ¡incluida una para el nodo DOM seleccionado! Explore más el panel de Herramientas y le aseguro que no se sentirá decepcionado.

Si necesita tomar una captura de pantalla de cualquier página web de forma remota, consulte la Geekflare Herramienta de captura de pantalla.

Conclusión

El cromo browseso esself tiene muchas funciones, pero donde se encuentraally brilla es la oferta de DevTools. Como vimos en este artículo, hay bastantes funciones bien ocultas (y otras a plena vista) que la gran mayoría de los usuarios desconocen. ¿Por qué están ocultas estas funciones?

Supongo que algunos de estos son muy experimental (como el modo de diseño), y los desarrolladores de Chrome quieren dificultar que los usuarios cotidianos encuentren estas funciones. Para el resto de las muchas funciones, creo que es simplemente un caso de sobrecarga de información: si hay, digamos, 120 funciones, y algunas de ellas tienen subfunciones, etc., es prácticamente imposible diseñar la interfaz de usuario adecuada para tales funciones. un escenario. Además, Google históricoally no ha hecho un gran trabajo con su UX de productos, así que ahí está. 🤷🏻‍♂️

Independientemente, espero que algunas de estas funciones le hayan resultado útiles. Pero lo que es más importante, espero que este artículo le haya dado una idea de qué se esconde y dónde, de modo que la próxima vez que desee explorar o buscar algo en particular, sepa dónde ir para "profundizar". 😆