Chrome DevTools: 10 consejos y trucos útiles

He estado trabajando con Chrome durante más de una década, mucho antes de que Mozilla lograra solucionar sus problemas de pérdida de memoria. Y, como alguien que hace desarrollo front-end a diario, también he sido un ávido usuario de Chrome DevTools. Ya sea para hacer la forma más básica de inspeccionar CSS o hacer pruebas de rendimiento, DevTools es una parte indispensable de mi rutina como desarrollador.

Y a lo largo de los años he aprendido pero también he recopilado varios consejos y trucos, algunos de los cuales no son exactamente claros. Si desea repasar todo lo que DevTools puede hacer, le recomiendo consultar la documentación oficial. Pero lo que es más importante, la página Novedades de DevTools, ya que ahí es donde obtendrá todas las nuevas funciones y herramientas de un vistazo.

La mejor manera de explorar este recurso es CTRL+F y buscar "palabras clave" que le interesen o también puede alternar la Tabla de contenido anterior y luego saltar directamente a un ejemplo específico. Estoy seguro de que esta página crecerá con el tiempo a medida que aprenda cosas nuevas, así que siéntase libre de marcar esta página para futuras referencias. Comencemos con algo práctico pero muy útil.

Bloquear recursos para representar el sitio sin CSS/JavaScript

Damos por sentado JavaScript, pero hay muchas personas que bloquean JS en su navegador, y la mayoría lo hace por razones relacionadas con la accesibilidad, la privacidad y la seguridad.

Y también debe considerar los casos en los que es posible que no se pueda acceder a JS/CSS debido a problemas de red, o el navegador no puede obtener un recurso en particular. Entonces, ¿cómo se ve su sitio web cuando un archivo/biblioteca en particular está bloqueado?

• Abra DevTools y vaya a la pestaña Red .
• Vuelva a cargar la página en la que se encuentra para obtener todos los recursos.
• Haga clic en cualquier recurso y seleccione Bloquear URL de recurso .
• Vuelva a actualizar la página para ver el resultado.

Creo que esto también funciona dentro de las herramientas de desarrollo de Firefox y Edge.

Cambios CSS de un vistazo (con Exportar)

¿Alguna vez te has dejado llevar por cambiar CSS de DevTools solo para darte cuenta de que ahora tienes que retroceder a 10 propiedades diferentes para guardar esos cambios? Sí. He estado allí, hecho eso.

Afortunadamente, hay una mejor manera de abordar este problema.

• Vaya a Personalizar y controlar DevTools -> Más herramientas .
• Seleccione Cambios .
• Aparecerá una pestaña permanente dentro de DevTools que muestra los cambios de código que ha realizado.

También se puede acceder al panel Cambios a través de los atajos CTRL/CMD+Shift+P y luego escribiendo Cambios en la consola Ejecutar. En la parte inferior de la interfaz de Cambios, tiene un botón Copiar , que se puede usar para exportar directamente todos los cambios que realizó en esa sesión.

Cambiar la estructura de diseño de cuadrícula y Flexbox

Recientemente escribí un artículo sobre algunos de los mejores generadores de diseño de CSS, por lo que este próximo consejo va de la mano con ese artículo. Primero, inspeccione cualquier contenedor que sea compatible con Grid o Flexbox, y luego busque la propiedad asignada que tenga display: flex; o viceversa.

Junto a la propiedad, verá un pequeño ícono en el que se puede hacer clic (el editor); al hacer clic en este, se abrirá un panel desde el cual puede usar las propiedades de posicionamiento como se especifica en Grid o Flexbox.

Esta característica es útil cuando desea probar una nueva alineación de diseño en tiempo real. También hay una cosa llamada CSS Grid Inspector, para la cual el equipo de desarrollo de Chrome ha hecho una reseña.

Depuración de accesibilidad con herramientas integradas

La accesibilidad es un tema muy candente en los círculos de desarrolladores front-end. Tanto es así que la mayoría de las bibliotecas de componentes y los kits de interfaz de usuario vienen prediseñados con las mejores prácticas de accesibilidad. Las plataformas CMS como WordPress también han adoptado la accesibilidad y han comenzado a implementar funciones que priorizan la inclusión del diseño. Y DevTools no es una excepción a la regla.

» Habilitación del árbol de accesibilidad en Chrome DevTools

Después de seleccionar la casilla de verificación habilitar , deberá volver a cargar sus DevTools. En esta etapa, tendrá un icono de accesibilidad en la esquina superior derecha de la ventana Elementos. Al hacer clic en este ícono, se revelará la estructura completa del sitio en una vista de árbol DOM. Luego puede inspeccionar secciones y elementos individuales del sitio y ver si se les ha asignado una etiqueta ARIA.

» Visor de orden de origen

En el mismo panel que se muestra en el GIF anterior, hay otra casilla de verificación. Y esa casilla de verificación se llama Show source order . Lo que hace, una vez habilitado, es que le permite ver el orden en que aparecen los elementos para los visitantes que pueden visitar sus páginas utilizando herramientas de asistencia.

Una vez habilitado, puede seleccionar cualquier área de su página y ver el orden en que aparecerán los elementos.

Esto es especialmente útil cuando se trabaja con Grid o Flexbox, ya que ambos tienen propiedades para reorganizar el orden de visualización de los elementos. Por ejemplo order: 1;

» Sugerencias de color para texto de bajo contraste

El contraste de color es uno de los principales problemas de accesibilidad, incluso para las personas que no necesariamente padecen discapacidades visuales graves. He tenido casos en los que mi visión empezaba a empeorar y necesitaba obtener una nueva receta para mis anteojos, y lo que lo delataba eran los colores de contraste bajo/alto que me cansaban los ojos. Blanco sobre rojo, verde sobre azul, etc.

El equipo de web.dev ha realizado un informe completo sobre cómo funciona el siguiente método.

Este método funciona para cualquier elemento de la página. Incluso si cree que el contraste está bien, el algoritmo de relación de contraste puede hacer sugerencias sutiles para mejorar la visibilidad general del contraste.

Formatear JavaScript/CSS minimizado en código legible

Solo se necesitan unos segundos para importar código minificado en VS Code y luego aplicar Prettier, pero ¿por qué molestarse cuando puede formatear (desminificar) directamente desde la consola de DevTools?

Para que esto funcione:

• Abra el panel Fuentes dentro de DevTools.
• Abre cualquier archivo que haya sido minimizado.
• Haga clic en el icono { } en la parte inferior de la consola.
• El código ya está formateado.

Edición (texto) y eliminación de elementos con designMode

designMode es parte de la especificación Web API y le permite editar directamente elementos en la página, aunque con algunas limitaciones. Por ejemplo, solo se puede editar el texto, pero cualquier otro elemento se puede eliminar por completo. Tenga en cuenta que esta no es una función "oficial", pero es útil cuando se trabaja con cosas como funciones matemáticas CSS y otras propiedades específicas del texto.

Para probarlo usted mismo:

• Abre la Consola de DevTools.
• Escriba document.designMode=”on” y envíelo.
• Regrese a la página y comience a editar.

La propiedad off también es aplicable cuando desea deshabilitar designMode. Y en caso de que no te hayas dado cuenta en el GIF, esto también funciona muy bien para hacer revisiones ortográficas de tu contenido en la página.

Capture capturas de pantalla del emulador de dispositivo

Esta es una característica que me había eludido durante mucho tiempo. Mi flujo de trabajo habitual para tomar capturas de pantalla es Snip o Awesome Screenshot extension. Resulta que puede capturar capturas de pantalla de dispositivos móviles/tabletas y otras resoluciones directamente desde el emulador de dispositivo.

Pero esa no es la única razón por la que esta característica es útil. De hecho, puede capturar capturas de pantalla, incluido el marco del dispositivo . Antes de entrar en más detalles, aquí hay un ejemplo:

Entonces, ¿cómo habilita el marco del dispositivo para capturas de pantalla de dispositivos móviles/tabletas?

• Abra las herramientas de desarrollo.
• Haga clic en el icono de la barra de herramientas del dispositivo Alternar .
• Navegue hasta el ícono de menú superior derecho (tres puntos).
• Seleccione Mostrar marco de dispositivo .

Aquí hay una vista previa:

El problema es que, incluso si hace clic en el botón, el marco del dispositivo no se muestra. Y esto se debe a que solo unos pocos dispositivos muestran el marco. De hecho, deberá habilitar manualmente estos dispositivos desde el menú disponible en Dimensiones -> Editar . Estos tipos de dispositivos tienen un marco:

• iPhone 5/SE
• iPhone 6/7/8 y más
• Nexo 5 y 5x
• Nexo 6P
• iPad

Gracias al usuario de StackOverflow RoCk RoCk por la aclaración.

Seleccionar colores desde fuera del navegador

Esta es una de las características más recientes agregadas a DevTools. Suponiendo que ya esté familiarizado con el Selector de color , ahora es posible elegir colores que no están dentro del navegador. En otras palabras, puede seleccionar colores directamente desde su escritorio, ya sea una imagen o un icono específico.

Ahora puedes tomar los colores de tus fotos favoritas aún más rápido.

Use copy() como un pseudo-raspador

La función copy() se puede usar para obtener en masa objetos que se encuentran en la página. Para mí, esta es la forma más rápida de raspar rápidamente todas las URL que se encuentran en una página.

En tu consola escribe:

 copy($$('a').map(a => a.href).join('\n'))

Y el resultado es:

La función alternativa de JavaScript se vería así:

 var link_array = [], l = document.links; for(var i=0; i<l.length; i++) { link_array.push(l[i].href); } console.log(link_array)

Cómo cambiar el tema de color de Chrome DevTools

Me pregunto cuántos desarrolladores cambiaron el tema de su navegador Chrome a oscuro, pero no se dieron cuenta de que tenían que hacerlo por separado para DevTools. Estoy seguro de que ha habido unos cuantos.

Con DevTools abierto, puede presionar F1 para abrir la configuración. Esto abrirá el panel de Preferencias predeterminado donde puede elegir entre el tema Claro u Oscuro, o usar las Preferencias del Sistema.

Un vistazo al interior de una potencia de desarrollo

Esta no es una lista exhaustiva de todo lo que DevTools puede hacer. Y con el tiempo espero ir añadiendo más trucos interesantes que vaya encontrando. Espero que al menos uno o dos de estos consejos hayan sido lo suficientemente interesantes como para agregarlos a sus notas. Y si no, ¡compruébalo más tarde!