Una lista de interesantes consejos y trucos de Chrome DevTools

Chrome DevTools proporciona un increíble conjunto de herramientas para ayudarlo a desarrollar en la plataforma web. Aquí hay algunos consejos que quizás aún no conozcas

Revisar ladescripción general de Chrome DevToolssi eres nuevo para ellos

Arrastrar y soltar en el panel Elementos

En el panel Elementos, puede arrastrar y soltar cualquier elemento HTML y cambiar su posición en la página.

Drag and Drop in the Elements Panel

Hacer referencia al elemento seleccionado actualmente en la consola

Seleccione un nodo en el panel Elementos y escriba$0en la consola para hacer referencia a él.

Reference elements in the Console

Consejo: si está usando jQuery, puede ingresar$($0)para acceder a la API de jQuery en este elemento.

Usa el valor de la última operación en la Consola

Usar$_para hacer referencia al valor de retorno de la operación anterior ejecutada en la consola

Use the last result

Agregue CSS y edite el estado del elemento

En el panel Elementos hay 2 botones súper útiles.

El primero le permite agregar una nueva propiedad CSS, con cualquier selector que desee, pero rellenando previamente el elemento seleccionado actualmente:

Add a CSS rule

El segundo le permite activar un estado para el elemento seleccionado, de modo que pueda ver los estilos aplicados cuando está activo, suspendido o enfocado.

Element state

Encuentra dónde se define una propiedad CSS

cmd-click(ctrl-clicken Windows) una propiedad CSS en el panel Elementos, DevTools le indicará el lugar donde se define, en el panel Fuente

Find where a CSS property is defined

Guardar para archivar el CSS modificado

Haga clic en el nombre del archivo CSS que editó. El inspector lo abre en el panel Fuentes y desde allí puede guardarlo con las ediciones en vivo que aplicó.

Este truco no funciona para nuevos selectores agregados usando +, o en las propiedades element.style, sino solo para los existentes modificados.

Save to File the modified CSS

Captura de pantalla de un solo elemento

Seleccione un elemento y presionecmd-shift-p(octrl-shift-pen Windows) para abrir el menú de comandos y seleccionarCapturar captura de pantalla del nodo

Screenshot a single element

Encuentra un elemento usando selectores CSS

Prensadocmd-f(ctrl-fen Windows) abre el cuadro de búsqueda en el panel Elementos.

Puede escribir cualquier cadena allí para que coincida con el código fuente, o también puede usar selectores CSS para que Chrome genere una imagen para usted:

Find an element using CSS selectors

Shift-enter en la consola

Para escribir comandos que abarquen varias líneas en la consola, presioneshift-enter.

Una vez que esté listo, presione enter al final del script para ejecutarlo:

Shift-enter in the Console

Limpiar la consola

Puede borrar la consola usando elClaroen la parte superior izquierda de la consola, o presionandoctrl-locmd-k.

Ir…

En el panel Fuentes:

cmd-o(ctrl-oen Windows), muestra todos los archivos cargados por su página.
cmd-shift-o(ctrl-shift-oen Windows) muestra los símbolos (propiedades, funciones, clases) en el archivo actual.
ctrl-gva a una línea específica.

Files list

Ver expresión

En lugar de escribir una y otra vez un nombre de variable o una expresión que va a comprobar mucho durante una sesión de depuración, agréguelo alVer expresiónlista.

Watch Expressions

Depuración de XHR / Fetch

Desde el depurador, abra elXHR / Fetch Breakpointspanel.

Puede configurarlo para que se rompa en cualquier momentoXHR/Ha podido recuperarse envía la llamada, o solo en determinadas:

XHR and Fetch debugging

Depurar modificaciones DOM

Haga clic con el botón derecho en un elemento y habiliteRomper en modificaciones de subárbol: siempre que un script atraviesa los elementos secundarios y los modifica, el depurador se detiene automáticamente para permitirle inspeccionar lo que está sucediendo.

Debug on DOM modifications