Uso profesional de las herramientas para desarrolladores de Chrome: 13 consejos

El autor del artículo, cuya traducción publicamos hoy, quiere compartir consejos para trabajar profesionalmente con herramientas de desarrollo de navegadores. Es decir, estos consejos están dirigidos a programadores que, por alguna razón, decidieron que Google Chrome sería su navegador principal.

Información general

Utiliza las herramientas de desarrollo de Chrome para depurar su código.





El comando para abrir herramientas de desarrollador



A veces, ingresa al panel de la Consola para usar las capacidades de la consola para examinar los datos que genera su programa. A veces, miras el panel Elementos para ver el CSS utilizado para diseñar los elementos DOM.





Panel de consola ¿



Pero conoces bien las herramientas de desarrollo de Chrome? De hecho, existen muchas funciones poderosas, pero no conocidas, que pueden mejorar significativamente su productividad.



Aquí voy a hablar sobre las características más útiles que espero les resulten útiles.

1. Elemento de menú Ejecutar comando

Para empezar, me gustaría contarles brevemente sobre el elemento del menú de herramientas del desarrollador llamado comando Ejecutar. Este elemento de menú para Chrome es como un shell para Linux. Te permite ingresar comandos para controlar Chrome.



Para acceder a este elemento de menú, abra las herramientas de desarrollador, después de lo cual puede usar inmediatamente el atajo de teclado apropiado:

• En Windows - Ctrl + Shift + P.
• En MacOS - Cmd + Shift + P.

O simplemente puede hacer clic en los tres puntos en el lado derecho del área del encabezado de las herramientas de desarrollador y seleccionar Ejecutar comando en el menú que aparece.





Ejecutar elemento del menú de comandos



Después de eso, se abrirá el panel de comandos, en el que puede encontrar muchos comandos que le permiten realizar muchas cosas interesantes.





Panel de comandos



Hablemos de algunos comandos de este panel.

2. Mecanismos avanzados para crear capturas de pantalla

Un desarrollador web a veces necesita tomar una captura de pantalla de una parte de la pantalla. Estoy seguro de que ya tiene un programa muy conveniente para resolver este problema. Estas son algunas de las tareas típicas para tomar capturas de pantalla:

• Tomar capturas de pantalla de páginas enteras, incluso de aquellas partes que no son visibles en la ventana del navegador.
• Capture una copia de un área de la pantalla que sea específica de un elemento DOM específico.

Estas son tareas comunes, pero no son fáciles de realizar con todo tipo de software de captura de pantalla. Para hacer frente a ellos, podemos utilizar las capacidades del comando de menú Ejecutar descrito anteriormente. En particular, estamos hablando de los siguientes comandos:

• Captura de pantalla Captura de pantalla a tamaño completo
• Captura de pantalla Captura de pantalla del nodo

▍ Ejemplo

Abra una página, como la sección Medio del contenido JavaScript más popular.



Ahora abra la barra de comandos y seleccione un comando en ella Screenshot Capture full size screenshot.





El comando para tomar una captura de pantalla de toda la página



Tendremos una captura de pantalla de toda la página, que irá a la carpeta de descargas.





Captura de pantalla de toda la página



Como puede ver, la imagen es muy alta. Lo he reducido aquí, por conveniencia. De hecho, esta es una imagen de gran calidad.



Asimismo, si necesitas hacer una captura de pantalla de un elemento DOM, puedes utilizar un programa de terceros, que, sin embargo, no te permitirá obtener una imagen que se corresponda exactamente con el elemento deseado. El equipo nos ayudará a solucionar este problemaScreenshot Capture node screenshot.



Lo usan así: primero, seleccionan el elemento deseado en el panel Elementos y luego ejecutan el comando.





Capturar una captura de pantalla de un área de la pantalla asociada con un elemento DOM específico



Así es como se ve la captura de pantalla cuando se toma en la imagen animada anterior.





Captura de pantalla del elemento DOM

3. Refiriéndose a los resultados de la última operación en la consola

La consola se usa a menudo para depurar código. Imagine que necesita aprender a invertir una cadena usando JavaScript. Buscó en Internet y encontró este fragmento de código:

'abcde'.split('').reverse().join('')

Intentó ejecutar este código en la consola y parece funcionar correctamente.





Comprobando el código en la consola



Entonces, este código "cambia" la línea. Sin embargo, usted está confundido acerca de cómo elsplit(),reverse()ymétodos de trabajojoin(). No sabes exactamente con qué funcionan en las etapas intermedias de "voltear" la línea. Por lo tanto, decide recorrer este código. Empieza con el primer método, obtiene su resultado, ejecuta el segundo método en este resultado, y así sucesivamente.





Explorando el código



Después de completar estos experimentos, es muy posible comprender exactamente cómo funciona el código original.



Pero trabajar con este estilo implica muchas acciones innecesarias. Puedes cometer errores aquí, y todo parece bastante complicado. Para mejorar la situación, basta con saber que en la consola de herramientas del desarrollador se puede utilizar una variable "mágica"$_que permite hacer referencia al resultado de la última operación realizada.





Usando $ _



Como puede ver,$_esta es una variable especial, cuyo valor siempre es igual al resultado de la última operación realizada en la consola. Esta variable puede ayudarte mucho a la hora de depurar tu código.





Ejemplo de uso de $ _

4. Repita el envío de la solicitud XHR

Cuando se trabaja en proyectos de front-end, a menudo es necesario utilizar la API XHR para realizar solicitudes de datos al backend. ¿Qué sucede si necesita reenviar una solicitud XHR ya enviada?



Si un desarrollador novato resuelve este problema, simplemente actualizará la página. Pero actualizar constantemente las páginas para volver a enviar solicitudes puede resultar abrumador. De hecho, puede trabajar con consultas utilizando las herramientas del panel Red.





Comando de reintento de solicitud XHR



Para volver a ejecutar una solicitud XHR que ya se ha enviado, proceda de la siguiente manera:

• Abra el panel de Red.
• Haga clic en el botón XHR.
• Llame al menú contextual de la solicitud para que se repita.
• Seleccione Replay XHR en el menú.

Aquí hay un ejemplo animado de los pasos anteriores.





Reintentar solicitud XHR

5. Supervisión de la carga de la página

La página puede tardar más de diez segundos en cargarse por completo, desde el principio de este proceso hasta el final. Para saber qué sucede exactamente durante la carga de la página, puede organizar el seguimiento de este proceso.



En las herramientas para desarrolladores de Chrome, puede tomar capturas de pantalla de una página en diferentes momentos de carga configurando la marca Capturar capturas de pantalla en el panel Red.





Capturar capturas de pantalla marca y monitorizar la carga de la página



Al hacer clic en las capturas de pantalla, puede ver las solicitudes que se ejecutaron en los momentos correspondientes. Una representación visual del proceso de carga de la página le dará un mayor nivel de comprensión que antes de lo que está sucediendo exactamente en la carga de la página.





Análisis de carga de página

6. Copia del contenido de las variables de JavaScript

¿Es posible copiar el valor de una variable de JavaScript para su uso posterior? Es posible que tal tarea le parezca imposible, pero en la consola de Chrome puede usar un comando especial copy()que le permite copiar el contenido de las variables al portapapeles.





Copia de contenido variable JS



Esta función no está disponible en el estándar ECMAScript. Está disponible para nosotros gracias a Chrome.

7. Copiar la imagen como URL de datos

Hay dos formas de trabajar con imágenes que se muestran en páginas web. La primera forma es cargar imágenes de fuentes externas. El segundo es la codificación de imágenes en forma de las denominadas URL de datos . Puede leer en MDN que la URL de datos es una URL con el prefijo: datos. Estas URL permiten incrustar archivos pequeños directamente en el documento. Solían llamarse "URI de datos" hasta que WHATWG retiró ese nombre.



Convertir imágenes pequeñas como URL de datos e incrustarlas directamente en el código de la página reduce la cantidad de solicitudes HTTP que deben realizarse al cargar la página. Esto, como resultado, puede acelerar la carga de la página.



¿Cómo convierto una imagen en una URL de datos usando Chrome?



A continuación se muestra una demostración animada de este proceso.





Copiar una imagen como URL de datos

8. Representación conveniente de matrices de objetos

Imagina que tenemos una serie de objetos. Por ejemplo, así:

let users = [{name: 'Jon', age: 22},
  {name: 'bitfish', age: 30},
  {name: 'Alice', age: 33}]

Mostrémoslo en la consola.





Matriz de objetos mostrados en la consola



Como puede ver, no es muy conveniente verlo cuando se muestra en este formulario. Y si dicha matriz es más larga y los elementos que contiene tienen una estructura más compleja, será aún más difícil lidiar con ella.



Afortunadamente para nosotros, Chrome tiene una función especialtable()que le permite formatear matrices de objetos.





Matriz formateada de objetos



Esta función suele ser muy útil.

9. Arrastrar objetos en el panel Elementos

A veces, al probar la interfaz, es necesario cambiar la posición de algunos elementos DOM de la página. Para hacer esto, podemos usar la habilidad del panel Elementos, que es mover cualquier elemento HTML en el código de la página.





Arrastrar y soltar un elemento



La animación anterior muestra cómo arrastro un elemento<div>en el panel Elementos para cambiar la posición de ese elemento en la página web.

10. Refiriéndose al elemento actualmente seleccionado de la consola

Hablemos de otra variable "mágica" que se puede usar en la consola. Ésta es una variable $0. Permite acceder desde la consola a un elemento que está resaltado en el panel Elementos.





Refiriéndose a un elemento con $ 0

11. Explorando pseudoclases

En MDN, puede aprender lo siguiente acerca de las pseudoclases: Las



pseudoclases brindan la capacidad de diseñar un elemento basándose no solo en las relaciones en el árbol DOM, sino también en factores externos como el historial de visitas (por ejemplo: visitado), el estado del contenido (como: verificado en algunos elementos forma) o la posición del cursor del mouse (por ejemplo: hover determina si el cursor del mouse está sobre un elemento).



Para un elemento, puede proporcionar estilos relacionados con varias pseudoclases. Para probar estos estilos, puede manipular pseudoclases directamente desde el panel Elementos.





Gestionar pseudoclases

▍ Ejemplo

Aquí está el código de la página web:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body{
      font-size: 150px;
    }

    div:hover{
      color: red;
    }
    div:active{
      color: blue;
    }
    div:focus{
      color: brown;
    }
  </style>
</head>
<body>
  <div>hello world</div>
</body>
</html>

Necesitamos comprobar el estilo de las pseudoclases. Para hacer esto, podemos usar el panel Elementos.





Explorando estilos de pseudoclase

12. Elemento de ocultación rápida

Al depurar estilos de página, a menudo es necesario ocultar un elemento. Para hacer esto lo más rápido posible, simplemente seleccione un elemento y presione una tecla en el teclado H.





Ocultar rápidamente un elemento



Esto agregará un estilovisibility: hidden !important;al elemento correspondiente.

13. Guardar una referencia a un elemento DOM en una variable global temporal

Si necesitamos obtener rápidamente una referencia a un elemento DOM en la consola, podemos realizar la siguiente secuencia de acciones:

• Selecciona un artículo.
• Haga clic derecho sobre él para abrir el menú contextual.
• Seleccione el comando Almacenar como variable global en el menú.

Almacenamiento de una referencia de elemento DOM como una variable global temporal



¿Qué funciones poco conocidas de las herramientas de desarrollo de Chrome utiliza?