Chrome DevTools es una de las principales razones por las que los desarrolladores se niegan a tocar cualquier otro navegador.
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!
Todos tienen su sistema operativo favorito, plataforma de hardware, tipo de dispositivo, factor de forma del dispositivo, etc. Pero una cosa es común a todos: ¡están ejecutando el navegador Chrome y solo el navegador Chrome! Creo que es seguro decir que las guerras de navegadores han terminado y Chrome ha ganado de manera convincente.
Los usuarios de Windows usan el navegador predeterminado solo para descargar Chrome y luego usan Chrome, ignorando todas las "recomendaciones" de Windows. Lo mismo ocurre con los dispositivos de Apple (especialmente MacBooks y dispositivos de pantalla más grande), donde los usuarios y desarrolladores evitan Safari, a pesar de las fuertes 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écnicamente, estos navegadores no son basado en Chrome, pero esa es otra discusión. El usuario medio puede estar utilizando estos otros navegadores por razones ideológicas o especiales, pero cuando se trata de desarrolladores, no hay otro navegador 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.
Design Mode
Una de las cosas que los desarrolladores hacen habitualmente es inspeccionar un elemento en la página y luego modificar su HTML para obtener una vista previa de 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):
El HTML profundamente anidado y las clases de CSS misteriosas y confusas son típicas de cualquier sitio web no trivial actual, que es donde la experiencia con DevTools es subóptima, por decir lo menos. 🤭
Pero hay una función de DevTools llamada Modo de diseño, que puede aliviar el dolor en muchos casos. Usando el Modo de Diseño (ese no es el nombre oficial, por cierto; es solo lo que la gente lo ha llamado debido a cómo se activa y qué hace; no se preocupe, ¡lo veremos muy pronto!), Cambios en el La página se puede crear visualmente 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 un dolor de cabeza, especialmente para los que no son 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 sienta en la curva de sofisticación del usuario, esto podría ser ridículamente fácil o moderadamente 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 (atajo de teclado, clics del mouse, lo que sea). Me gusta usar atajos de teclado y en Mac
Opt + Cmd + Ihace el trabajo. - Ahora, con las DevTools abiertas, vaya a la pestaña llamada "Consola". Algunos de ustedes pueden estar poniendo los ojos en blanco ante lo tonto y obvio que parece todo esto, pero bueno, también pensemos en los (cientos de?) Miles de personas que luchan mientras trabajan con la consola del navegador y JavaScript (por cualquier 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 del modo de diseño, por emocionante que sea, no es una fórmula mágica; no puede, por ejemplo, copiar y pegar botones, cambiar su apariencia, etc. El número real de cosas que puede hacer en comparación con un editor visual de páginas web de ensueño es muy bajo; sin embargo, resuelve casos de uso en los que el contenido debe cambiarse visualmente 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. 🤞🏻🤞🏻
Simulating network conditions
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 sencillo perderse la función que estamos discutiendo; es posible que no haya notado un menú desplegable inofensivo que dice 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).
Vamos a probar esto. Configuraré la red en "3G lento" y volveré a cargar la misma página de la captura de pantalla anterior. 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 activos 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 general, tiene que ser una decisión empresarial en la que las ganancias justifiquen el esfuerzo.
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.
Interactive color picker
Inspeccionar 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 de inmediato.
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.
Por lo tanto, la próxima vez que experimente con los colores de acento de un sitio, por ejemplo, ¡no necesita hacer ejercicio o adivinar el valor correcto para el tono que tiene en mente! De hecho, a muchas personas les gusta diseñar sitios web directamente en el navegador; para ellos, características como estas son un regalo del cielo. 🙂
Monitoring events on-page elements
A menudo nos encontramos en una situación en la que desearíamos saber qué estaba pasando con ese elemento específico que nos interesa. Esto es especialmente cierto cuando se usa jQuery en una base de código no trivial, ya sea la suya o la de otros; los controladores de eventos y la lógica están repartidos por todas partes, y rastrear un error puede ser una pesadilla.
Afortunadamente, Chrome DevTools tiene una característica ingeniosa solo para esto. Observará el elemento indicado por usted y registrará los eventos en la consola. Pero hay un poco de decepción: esta función 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. Comenzamos haciendo un simple "elemento de inspección" utilizando el inspector de DevTools. Sí, es la misma herramienta de inspección que usamos todos los días.
En la captura de pantalla a continuación, utilicé la herramienta de inspección 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 puede ver); más bien, se hizo clic en el cursor del inspector en la entrada de texto y se resalta el código HTML correspondiente en DevTools.
Hacer esto apunta al elemento actualmente inspeccionado para el monitoreo de eventos, lo que hace que el elemento sea accesible como una variable especial de JavaScript llamada $0. Luego, asegurándome de no hacer clic en otra parte de la ventana del navegador por descuido (especialmente en 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, se activa el monitoreo, y si ahora coloco 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!
Website performance reports
Actualmente, rendimiento del sitio web hace o deshace un negocio / sitio web. Incluso un pequeño aumento en el rendimiento se traduce en enormes ganancias de SEO, así como en 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 tiene al resto de nosotros cubierto. En las últimas versiones de Chrome (finales de 2020), encontrará un Lighthouse pestaña en DevTools. Hace unos meses, se llamaba Auditorías y, lo que es bastante confuso, ese es el nombre que encontrará en los documentos oficiales al momento de escribir. De todos modos, el punto es que Lighthouse solía ser un sitio web moderno para verificar el rendimiento del sitio web de forma gratuita, pero luego Google lo eliminó (no se dieron razones). Afortunadamente, la misma poderosa funcionalidad resurgió más tarde en DevTools.
Para generar 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 en 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 segundos más tarde, tendrá un informe beneficioso con el siguiente aspecto:
Los números que ve en la captura de pantalla anterior muestran el puntaje general para cada categoría. La categoría para 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 herramienta poco conocida y poco apreciada, que ahora forma parte de Chrome DevTools, que es de gran utilidad tanto para los propietarios de negocios como para los desarrolladores / administradores de sistemas.
Code-editing prowess
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 sorprender 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.
Control DOM element state
A veces estamos probando o depurando algo, pero el comportamiento que perseguimos solo está disponible en un estado de elemento en particular. Dependiendo del estado en el que se encuentre, podría terminar pasando un momento terrible; para mí, es el estado "hover", ya que recuerdo haber perdido incontables minutos tratando de cronometrar la acción de hover o agregar CSS temporal adicional, etc.
Afortunadamente, Chrome DevTools tiene una manera fácil de cambiar el estado de un elemento inspeccionado. Además, la opción para hacerlo está ahí mismo si hacemos clic con el botón derecho en el elemento (en la pestaña Elementos), pero dada la cantidad de funciones y las presiones del trabajo de un día, es fácil pasar por alto esto:
¡Sí, es realmente así de simple!
Ahora, no necesita integrar la lógica de prueba condicional en su código, escribir CSS adicional o pasar por otros aros cuando observe un elemento en un estado diferente.
Tools panel
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 activar 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 de herramientas está lleno de capacidades y sorpresas. Por ejemplo, ¿sabía que podía 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 Herramienta de captura de pantalla Geekflare.
Conclusión
El navegador Chrome en sí es rico en funciones, pero donde realmente brilla es la oferta de DevTools. Como vimos en este artículo, hay bastantes funciones bien ocultas, y otras que se esconden a plena vista, que la gran mayoría de los usuarios no conocen. ¿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óricamente 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". 😆
