11 consejos para quienes usan Chrome como entorno de desarrollo.
Entonces, por una razón u otra, decidió enfocarse en Chrome al desarrollar. Abre las herramientas de desarrollo y comienza a depurar su código.
A veces abres la consola para ver la salida de tu programa, o la pestaña Elementos para verificar los estilos CSS de los elementos DOM.
¿Eres realmente bueno en Chrome DevTools? De hecho, las herramientas para desarrolladores tienen muchas funciones poderosas que facilitan la vida, pero pocas personas las conocen.
Te hablaré de los más útiles.
Comencemos mirando el menú de comandos. El menú de comandos en Chrome es como el shell de comandos en Linux. En él, puedes escribir comandos para controlar Chrome.
Abre Chrome Developer Tools. Para acceder al menú de comandos, use las teclas de acceso rápido:
- Windows: Ctrl + Shift + P
- macOS: Cmd + Mayús + P
También puede abrirlo a través de una interfaz gráfica, como esta:
En esta área puede ver una larga lista de comandos que le dan acceso a muchas funciones útiles.
Funciones de captura de pantalla avanzadas
Tienes que tomar capturas de pantalla de una parte de la pantalla con bastante frecuencia, y no tengo ninguna duda de que hay programas convenientes instalados en tu computadora para esto. Pueden ellos:
- tomar una captura de pantalla de toda la página, incluido el contenido fuera de la ventana gráfica?
- tomar el contenido de un solo elemento DOM?
Esta necesidad surge con bastante frecuencia, pero la mayoría de las herramientas del sistema para tomar capturas de pantalla no hacen frente a estas tareas. Afortunadamente, tenemos comandos de Chrome dedicados para tomar capturas de pantalla como esta.
Aquí están:
- Captura de pantalla Captura de pantalla a tamaño completo
- Captura de pantalla Captura de pantalla del nodo
Ejemplo
Abra cualquier página web, como los artículos de JavaScript más populares en Medium: medium.com/tag/javascript .
Abra el menú de comandos y ejecute el comando
Screenshot Capture full size screenshot.
Tomamos una instantánea de toda la página actual como un todo.
La captura de pantalla original tiene buena calidad, pero aquí he subido una imagen comprimida para ahorrar ancho de banda.
Si desea tomar una captura de pantalla de un elemento DOM, puede usar las herramientas del sistema, pero no podrán capturar el elemento perfectamente. Chrome tiene un comando dedicado para esto
Capture node screenshot.
Primero abra la pestaña Elementos y seleccione el elemento deseado. Luego ejecute el comando.
Aquí está el resultado:
Usando el resultado de la última operación en la consola
A menudo depuramos código en la consola. Digamos que quiere saber cómo invertir una cadena en JavaScript. Está buscando la información que necesita en Internet y se encuentra con este código. Sí, este código invierte la línea. Pero aún no está claro cómo funciona el método , , y qué resultado da cada uno de ellos. Puede recorrer este código paso a paso escribiéndolo de esta manera: Ahora sabemos qué valor devuelve cada método. Pero, ¿por qué escribir tanto? Es fácil equivocarse en una entrada tan larga y es difícil de entender. Déjame contarte un secreto: hay una variable mágica en la consola que almacena el resultado de la última operación.
'abcde'.split('').reverse().join('')
split()reverse()join()
$_
$_Es una variable especial cuyo valor siempre es igual al resultado de la última operación realizada en la consola. Este truco facilita mucho el proceso de depuración.
Reenviar solicitud XHR
En los proyectos de front-end, a menudo necesita usar XHR para enviar solicitudes para recibir datos del servidor. ¿Qué pasa si necesito reenviar mi solicitud?
Los desarrolladores sin experiencia actualizan la página, pero esto es muy inconveniente. En Chrome, podemos depurar el código directamente desde la pestaña Red.
- Abra la pestaña Red.
- Presione el botón XHR.
- Seleccione la solicitud XHR que desea reenviar.
- Seleccione Reproducir XHR en el menú contextual para reproducir la solicitud.
Aquí hay un ejemplo animado:
Seguimiento del estado de carga de la página
La página puede tardar más de diez segundos en cargarse por completo. En tales casos, debe controlar el proceso de carga de la página en cada momento por separado.
En Chrome DevTools, puede tomar capturas de pantalla de una página mientras se carga marcando la casilla junto
Capture Screenshotsa la pestaña Red.
Seleccione la captura de pantalla para ver información sobre las solicitudes de red correspondientes. Esta visualización le dará una mejor comprensión de las solicitudes de red que se envían al servidor en momentos específicos.
Copiar variables
¿Sabe cómo copiar el valor de una variable de JavaScript en el portapapeles?
Parece una tarea imposible, pero Chrome proporciona una función especial para solucionarlo
copy.
ECMAScript no contiene una definición para la función de copia, es una función de Chrome. Se puede usar para copiar el valor de una variable de JavaScript en el portapapeles.
Copiar una imagen como URI con el prefijo "data:"
Hay dos formas de insertar una imagen en una página: puede vincular a un archivo externo, o puede incrustar una imagen usando los datos: URL .
Datos: URL ( URL prefijada
data:) es un esquema que permite incrustar archivos pequeños en un documento como elementos en línea. Solía llamarse "datos: URI", pero el WHATWG eliminó ese nombre.
Incrustar imágenes pequeñas directamente en los datos: el esquema de URL reduce la cantidad de solicitudes HTTP al servidor, lo que hace que la página se cargue más rápido.
¿Cómo hago esto en Chrome?
Mira la animación:
Salida de una matriz de objetos a una tabla
Digamos que tenemos una matriz de objetos:
let users = [{name: 'Jon', age: 22},
{name: 'bitfish', age: 30},
{name: 'Alice', age: 33}]
Es difícil percibir dicha información en la consola. Y si la matriz es más larga y contiene elementos más complejos, es aún más fácil perderse en ella.
Afortunadamente, Chrome tiene una función que genera una matriz de objetos en una tabla.
Te será útil, y más de una vez.
Arrastrar en la pestaña Elementos
A veces es necesario mover algunos elementos DOM en la página para probar la interfaz de usuario. En la pestaña Elementos, puede arrastrar cualquier elemento HTML a cualquier parte del código:
en este ejemplo, arrastré un elemento en la pestaña Elementos y su posición en la página web también cambió instantáneamente.
Hacer referencia al elemento seleccionado actualmente en la consola
$0 Es otra variable mágica que contiene el elemento seleccionado en la pestaña Elementos.
Activando pseudoclases CSS
Las pseudoclases le permiten diseñar un elemento no solo en función de su ubicación en el árbol del documento, sino también en función de factores externos como el historial de navegación (por ejemplo : visitado ), el estado del contenido (por ejemplo : marcado en algunos formularios), la posición del puntero mouse (por ejemplo, la pseudoclase: hover cambia el estilo del elemento cuando pasa el mouse sobre él).
Se pueden escribir múltiples pseudoclases para un elemento. Para facilitar la prueba de estilos, las pseudoclases se pueden activar directamente desde la pestaña Elementos.
Ejemplo
Mira el código de la página:
<!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>Abrimos la página en un navegador, comprobamos cómo funcionan las pseudoclases en la pestaña Elementos y hacemos cambios si es necesario.
Tecla de acceso rápido para ocultar elementos
Al depurar estilos CSS, a menudo es necesario ocultar un elemento. Chrome hace esto rápidamente: solo necesita seleccionar un elemento y presionar una tecla
H.
Presione H en su teclado
Esta operación aplica un estilo a un elemento
visibility: hidden !important;.
Almacenamiento del elemento DOM como variable temporal global
Si queremos hacer referencia rápidamente a un elemento DOM en la consola, podemos hacerlo así:
- Selecciona un artículo.
- Abra el menú contextual con el botón derecho del ratón.
- Seleccione Almacenar como variable global.
