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 darnos cuenta de muchas más funciones alucinantes que se lanzan en silencio.
¡Vamos a descubrir algunas de estas 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 para todos: ¡están ejecutando el navegador Chrome y solo el navegador Chrome! Creo que es seguro decir que la guerra de los navegadores ha 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), en los que 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 un derivado compatible con Chrome, como Bravo o Vivaldi. Sí, lo sé, técnicamente, estos navegadores no están basados en Chrome, pero esa es otra discusión. El usuario promedio puede estar usando 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 memoria. La razón es simple: Herramientas para desarrolladores de Chrome.
Fuente de la imagen: documentos oficiales de Chrome DevTools
Ahora, si está leyendo este artículo, es seguro asumir que es un usuario avanzado, un manitas, un desarrollador web o algo similar. Como tal, ninguno de nosotros necesita una introducción a DevTools, cómo abrirlo, sus diversas características, etc.
En cambio, sin perder tiempo, profundicemos directamente en algunas de las características menos conocidas pero asombrosamente útiles de Chrome DevTools.
Tabla de contenido
Modo de diseño
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 fácil que existe: navegar a través de la sopa de etiquetas, forzar la vista tratando de encontrar el paréntesis de apertura/cierre correcto y lidiar con una cantidad ridícula de espacios en blanco mientras edita texto (espacio en blanco que claramente falta en el documento que está viendo), son algunos de los problemas con los que puede tener que lidiar. Es aún peor si eres diseñador y no quieres filtrar el desorden.
Aquí hay una captura de pantalla de una de las páginas de este mismo sitio web (kirukiru.es):
El HTML profundamente anidado y las clases de CSS misteriosas y confusas son típicas 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 función de DevTools llamada Modo de diseño, que puede aliviar el dolor en muchos casos. Usando el modo de diseño (por cierto, ese no es el nombre oficial; es solo el nombre que la gente le ha dado debido a cómo se activa y lo que hace; ¡no se preocupe, lo veremos muy pronto!), cambia el La página se puede hacer 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 puede 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 de la forma habitual (método abreviado de teclado, clics del ratón, lo que sea). Me gusta usar métodos abreviados de teclado y, en Mac, Opt + Cmd + I hace el trabajo.
- Ahora, con DevTools abierto, vaya a la pestaña llamada «Consola». Algunos de ustedes pueden estar poniendo los ojos en blanco por 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 al lado del 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/escribir es muy breve y directo: 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 Entrar/Regresar.
«¡¿¿Eso es todo??!»
¡Sí, eso es todo!
Ahora puede editar libremente la página como si fuera un documento. Mire este video de ejemplo donde edito en vivo el sitio web de Spotify usando el modo de diseño:
La característica del modo de diseño, por emocionante que sea, no es una panacea; no puede, por ejemplo, copiar y pegar botones fácilmente, cambiar su apariencia, etc. La cantidad real de cosas que puede hacer en comparación con un editor de páginas web visual de ensueño es muy baja; 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 buen caso de uso, ¡es razonable esperar que pronto sigan 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 quizás 20-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 discutiendo; Es posible que no hayas 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. el rendimiento en redes lentas o el comportamiento de la aplicación web cuando está fuera de línea (suponiendo que se agregaron tales capacidades).
Vamos a tomar esto para un giro. Configuraré la red en «3G lento» y volveré a cargar la misma página de la captura de pantalla anterior. Antes de hacerlo, 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!
Tenga en cuenta que el tiempo de carga de los activos ahora está en el rango de 5 a 10 segundos. Además, ¡el sitio terminó de cargarse por completo 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 desea una carga rápida en redes lentas es otra cosa, aunque en general, tiene que ser una decisión comercial donde 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ó un cambio persistente no predeterminado y, a menos que sepa lo que está haciendo, tal vez debería restablecerlo.
Selector de color interactivo
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 inmediatamente.
Una pequeña comodidad escondida entre todo esto es que si hace clic en una propiedad de color CSS, aparecerá una interfaz de selección de color familiar.
Tenga en cuenta que no es un selector de color básico y básico. Le permite controlar la transparencia, cambiar los sistemas de color que se utilizan, seleccionar 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 calcular 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. 🙂
Monitoreo de elementos de eventos en la página
A menudo nos encontramos en una situación en la que nos gustaría saber qué está pasando con ese elemento específico que nos interesa. Esto es especialmente cierto cuando usamos 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 función ingeniosa para esto. Observará el elemento indicado por usted y registrará los eventos en la consola. Pero hay un poco de decepción: esta característica no tiene capacidades de selección de elementos basadas en nombres de clase CSS. Por lo tanto, la forma jQuery de $(“#email”) no está disponible. 🙂
Dicho esto, veamos cómo hacerlo funcionar. Comenzamos haciendo un simple «elemento de inspección» usando 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, he usado la herramienta de inspección para resaltar la entrada de texto. Por «resaltar» no quiero decir que el elemento en 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 JavaScript especial llamada $0. A continuación, 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 «ratón» aquí le dice a Chrome que solo estoy interesado en observar eventos basados en el mouse.
Tan pronto como presiono Enter/Return, se activa el monitoreo, y si ahora paso el cursor por encima o hago clic en la entrada de texto, esos eventos se registran en la consola como objetos de 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 del teclado, no se registraron). Los eventos son objetos de JavaScript en sí mismos, como se desprende de la captura de pantalla; cada objeto de evento contiene una gran cantidad de información. Por ejemplo, expandí el objeto de evento de «clic», ¡y la cantidad de propiedades no podía caber todas en una sola captura de pantalla!
¡Le recomiendo 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
En estos días, el rendimiento del sitio web hace o deshace un negocio/sitio web. Incluso un pequeño aumento en el rendimiento se traduce en ganancias masivas de SEO, así como en la satisfacción del usuario. Pero, ¿cómo sabe 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 las últimas versiones de Chrome (finales de 2020), encontrará una pestaña Lighthouse 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. De todos modos, el punto es que Lighthouse solía ser un sitio web de moda para verificar el rendimiento del sitio web de forma gratuita, pero luego Google lo eliminó (no se dieron razones). Afortunadamente, la misma potente funcionalidad volvió a aparecer 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 de la captura de pantalla, hay algunas opciones para controlar la cantidad de información que desea (y, por supuesto, lo que desea probar). Una vez que esté satisfecho con la configuración, presione ese gran botón azul, siéntese y relájese. Unos segundos más tarde, tendrá un informe beneficioso similar a este:
Los números que ve en la captura de pantalla anterior muestran el puntaje general para cada categoría. La categoría de aplicaciones web progresivas (PWA) está atenuada, 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 diré que Lighthouse y sus sugerencias sean el santo grial del rendimiento del sitio web, pero son extremadamente útiles; eso 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 especializaciones. Como tal, Lighthouse es una herramienta poco conocida y poco apreciada, ahora parte de Chrome DevTools, que es de gran utilidad para propietarios de negocios y desarrolladores/administradores de sistemas por igual.
Habilidad 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 edición de 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 de 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 de las disputas de códigos. Por ejemplo, Ctrl + D (o Cmd + D en Mac) se puede usar para resaltar varias apariciones de una palabra. De manera similar, mantener presionada la tecla Ctrl (o Cmd en Mac) y hacer clic en varios lugares del código le brinda múltiples cursores. Echa un vistazo al siguiente vídeo 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 el estado del elemento DOM
A veces estamos probando o depurando algo, pero el comportamiento que perseguimos solo está disponible en un estado de elemento particular. Dependiendo del estado en el que se encuentre, podría terminar pasando un mal momento; para mí, es el estado de «desplazamiento», ya que recuerdo perder incontables minutos tratando de cronometrar la acción de desplazamiento o agregando CSS temporal adicional, etc.
Afortunadamente, Chrome DevTools tiene una manera fácil de cambiar el estado de un elemento inspeccionado. Es má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 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 estado diferente.
Panel de herramientas
Por último, pero definitivamente no menos importante en esta lista, está el panel Herramientas. Es otra de esas características 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 donde 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 Herramientas está lleno de capacidades y sorpresas. Por ejemplo, ¿sabía que puede 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 descubrirlo:
También notará varias opciones para tomar capturas de pantalla, ¡incluida una para el nodo DOM seleccionado! Explore más el panel 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 kirukiru.es.
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 características bien escondidas, y otras ocultas a simple vista, que la gran mayoría de los usuarios no conocen. ¿Por qué están ocultas estas características?
Supongo que algunos de estos son muy experimentales (como el modo de diseño) y los desarrolladores de Chrome quieren dificultar que los usuarios habituales 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, algunas de las cuales tienen subfunciones, etc., es prácticamente imposible diseñar la interfaz de usuario correcta para tales un escenario Además, Google históricamente no ha hecho un gran trabajo con la UX de sus productos, así que eso es todo. 🤷🏻♂️
De todos modos, espero que hayas encontrado útiles algunas de estas características. 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 «cavar en profundidad». 😆