👩🏼‍🎤 🅾️ 🚴 Mis herramientas de desarrollador de Chrome favoritas 🦕 ⏺️ 👉🏽

¡Buen dia amigos!

Chrome Developer Tools es un kit de herramientas muy potente para desarrollar aplicaciones web. Con estas herramientas, podemos navegar por el DOM, verificar las solicitudes del servidor, ajustar el rendimiento de la aplicación, etc.

Entre las muchas funciones disponibles, hay varias realmente interesantes. Estas "funciones" ayudan a hacer uno o dos clics menos, ¿no es por eso que nos reunimos aquí?

Estilo JQuery para acceder al DOM

jQuery es una biblioteca increíble. Ella ha estado administrando la web durante toda una era. Según algunos informes, más del 70% de los sitios web más populares del mundo usan esta o aquella versión de jQuery. Este es un logro increíble para una biblioteca escrita en 2006.

La API más popular proporcionada por jQuery es $, utilizada para seleccionar elementos DOM. En la consola de la herramienta para desarrolladores de Chrome (en adelante, la consola), es posible usar el selector $, que es un alias de document.querySelector ().

Por ejemplo, para hacer clic en un botón, debe hacer lo siguiente:

$$ es sinónimo de document.querySelectorAll ():

Hay un par de trucos más para trabajar con $. A veces, el selector es demasiado complejo para escribir manualmente, o simplemente no podemos determinar la especificidad suficiente del selector. Si seleccionamos un elemento en la pestaña "Elementos", podemos obtenerlo en la consola usando la variable $ 0: de

hecho, la consola le permite acceder a los últimos 5 elementos seleccionados. Estos elementos están disponibles a través de las variables $ 0- $ 4, respectivamente:

Copiar propiedades del elemento

La pestaña Elementos es muy útil. Almacena el árbol DOM de nuestro sitio, le permite ver los estilos de los elementos y hacer cambios en ellos sobre la marcha.

Lo realmente genial que descubrí es la capacidad de copiar las propiedades de un elemento (y no solo) usando el menú contextual.

Por ejemplo, puede copiar un selector de elementos:

este selector puede no ser lo suficientemente específico o demasiado específico, pero de todos modos ayuda a depurar el código.

Como puede ver, también podemos copiar estilos de elementos, la "ruta" JS (document.querySelector (SELECTOR)) o XPath.

Filtro de solicitud de red

A veces tenemos que trabajar con una página que envía muchas solicitudes al servidor. Quiero decir, muchas solicitudes.

Vadear por estos bosques en busca de una solicitud específica no es una ocupación agradable. Afortunadamente, puede filtrar las consultas.

Un conjunto de filtros le permite mostrar consultas por tipo, por ejemplo, XHR / Fetch, hojas de estilo, scripts JS, imágenes, etc.:

También puede especificar sus propios criterios en el campo de entrada ubicado arriba de los filtros:

Emulando diferentes velocidades de conexión de red

Usando la pestaña "Red", podemos probar nuestro sitio en condiciones de diferentes velocidades de conexión. El valor predeterminado se establece en línea, en el que disfruta plenamente el ancho de banda de su conexión.

Además de en línea, hay disponibles "presets" como Fast 3G, 3G lento y sin conexión, que difieren en la velocidad de carga de la página, la velocidad de descarga de archivos y el retraso de tiempo. Si necesita emular algo más, puede usar el botón Agregar ... para agregar su propio perfil:

Usar expresiones en vivo en la consola

¿Qué son las expresiones en vivo?

Las expresiones en vivo son expresiones que son constantemente "evaluadas" en la consola. Suponga que desea rastrear el valor de una variable. Puede ingresarlo una y otra vez:

gracias a Live Expressions, puede enfocarse en el código y permitir que Chrome controle los cambios de forma independiente:

esta función está disponible tanto para las variables declaradas en la consola como para las variables declaradas en el script.

Emula varios dispositivos

Aquellos que trabajan con aplicaciones receptivas están familiarizados con la sensación que experimenta cuando trabaja duro y durante mucho tiempo en la belleza del diseño de la página solo para ver cómo todo se desmorona en el dispositivo con una resolución diferente.

No estoy aquí para hablar sobre consultas de los medios, sino para mostrar una forma de probar su trabajo.

Si hace clic en el botón que parece una tableta y un teléfono, verá cómo cambia el área de visualización del navegador de acuerdo con los tamaños de varios dispositivos.

Puede seleccionar un dispositivo de la lista de ajustes preestablecidos que contienen dispositivos populares como iPhone X, iPad Pro, Pixel 2, Pixel 2 XL, etc. Esta lista está lejos de ser completa (no muy relevante), pero es suficiente para resolver la mayoría de los problemas.

Si el dispositivo que necesita no aparece en la lista, puede configurar la resolución manualmente. Como puede ver, configuré mi propio permiso para emular OnePlus 6 (mi gadget diario):

Cambiar estado del artículo

¿Te has encontrado con una situación en la que quieres jugar con los estilos aplicados a un elemento cuando pasas el cursor sobre él (: desplazarte), pero cada vez que mueves el cursor a la pestaña de estilos, el elemento pierde el cursor?

Las herramientas de desarrollador le permiten corregir el estado de un elemento. Podemos habilitar / deshabilitar fácilmente estados tales como: activo,: pasar el mouse,: enfocar, enfocar dentro y: visitado:

Estas son mis herramientas favoritas para desarrolladores de Chrome. Gracias por su atención.

¡Feliz codificación!

Mis herramientas de desarrollador de Chrome favoritas