El autor de la publicaci贸n que estamos traduciendo utiliza las herramientas de desarrollador de Chrome casi todos los d铆as. Aqu铆 quiere hablar sobre las caracter铆sticas poco conocidas de estas herramientas. 脡l dice que si 茅l supiera sobre ellos antes, entonces definitivamente ser铆an 煤tiles para 茅l.
1. Una manera simple de obtener un enlace a cualquier elemento en estudio
Las herramientas de desarrollador de Chrome le permiten obtener un enlace a cualquier elemento bajo investigaci贸n en la consola. Para hacerlo, trabajando en el panel
Elements , haga clic con el bot贸n derecho en un elemento y seleccione
Store as global variable en el men煤 desplegable.
Una manera simple de obtener un enlace a cualquier elemento bajo investigaci贸n2. Crear expresiones interactivas conectadas a la consola
En las herramientas del desarrollador, puede crear expresiones interactivas adjuntas a la parte superior de la consola, cuyos valores se mantienen constantemente actualizados. El procedimiento para crear tales expresiones se muestra en la siguiente figura. Si sabe que ciertos elementos de la p谩gina deben actualizarse, esta funci贸n puede ser muy 煤til para observarlos.
Expresiones interactivas en Chrome3. Simular conexiones lentas a internet
La pesta帽a
Network de las Herramientas para desarrolladores de Chrome le permite simular una conexi贸n de navegador a varias redes. Esta caracter铆stica puede ser extremadamente 煤til para evaluar el comportamiento de una p谩gina en una situaci贸n en la que la carga tarda varios segundos.
Explorando una p谩gina que simula varias formas de conectarse a Internet4. Deshabilitar el cach茅, guardar registros al cambiar de p谩gina
Tuve que enfrentar muchos problemas que, como result贸, no fueron errores. Su causa fue la carga incorrecta del c贸digo en cach茅. Para deshacerse de tales problemas, puede deshabilitar por completo el almacenamiento en cach茅 utilizando las capacidades de la pesta帽a
Network . Esta es una casilla de verificaci贸n
Disable cache . Tenga en cuenta que el cach茅 no funciona solo cuando la barra de herramientas del desarrollador est谩 abierta.
Guardar registros es otra caracter铆stica 煤til debido a que la consola no se borra cuando se vuelve a cargar la p谩gina bajo investigaci贸n. Habilita esta casilla de verificaci贸n de funci贸n
Preserve log en la pesta帽a
Network .
Deshabilitar el cach茅 y guardar registros5. Hacer capturas de pantalla
Chrome Developer Tools incluye una herramienta de captura de pantalla integrada. Para usarlo, necesita, con la ventana de herramientas abierta, aplicar la combinaci贸n de
Ctrl+Shift+P , y luego ingresar la
screenshot de
screenshot la palabra clave en el campo que aparece y seleccionar el m茅todo deseado para crear una captura de pantalla.
Crear una captura de pantalla desde la barra de herramientas del desarrollador6. El comando console.log () est谩 lejos de ser la 煤nica forma de registrar algo en la consola
Todos usan el comando
console.log() para registrar datos de depuraci贸n. Sin embargo, este comando no agota las capacidades de registro. En particular, los comandos
console.warn() y
console.error() est谩n a disposici贸n del desarrollador.
Estos comandos muestran mensajes de diferentes niveles de registro en la consola; estos son, respectivamente, advertencias y mensajes de error. Se destacan en diferentes colores e 铆conos. Los mensajes que se muestran en la consola mediante diferentes comandos se pueden filtrar.
Console.warn () y console.error ()Puede usar el comando
console.table() para mostrar algunos datos estructurados formateados convenientemente en un formato de tabla.
Comando console.table ()Las posibilidades de trabajar con la consola no se limitan a estos comandos. Por ejemplo, tambi茅n hay comandos como
console.assert() y
console.group() .
Aqu铆 puede encontrar una historia detallada sobre dichos equipos.
7. La construcci贸n $ _ devuelve la expresi贸n calculada m谩s reciente
La construcci贸n
$_ se puede usar para devolver el valor de una operaci贸n anterior realizada en la consola.
Usando la construcci贸n $ _8. El comando $ () es una forma abreviada de document.querySelector ()
Puede usar el comando
$() en la consola para seleccionar r谩pidamente un elemento. Las caracter铆sticas de jQuery aqu铆, por cierto, no se aplican, aunque a primera vista puede parecer que esto no es as铆.
Del mismo modo, el comando
$$() es una abreviatura de
document.querySelectorAll() .
Usando $ ()9. Habilitar estados de elementos, como el desplazamiento o el foco, en el panel Estilos
Si durante el estudio de un elemento es necesario estudiar su comportamiento en el estado de
hover , esta puede ser una tarea desalentadora, ya que para traducir un elemento a este estado, ser铆a necesario tener un puntero del mouse sobre 茅l. La soluci贸n a este problema puede facilitarse aprovechando las capacidades del panel
Styles . Aqu铆 puede forzar la transferencia de elementos a estados como el
hover o el
focus .
Forzar elemento a estado10. La combinaci贸n de presionar la tecla Ctrl y hacer clic con el mouse ayuda a encontrar una definici贸n de regla CSS
驴Alguna vez has necesitado saber d贸nde se describe una regla CSS? Esta tarea es muy f谩cil de resolver presionando la tecla
Ctrl y haciendo clic en la regla que le interesa. MacOS usa
Cmd lugar de
Ctrl .
Ctrl + clic: busca la ubicaci贸n de definici贸n de regla CSSEstimados lectores! 驴Qu茅 agregar铆a a la lista de caracter铆sticas poco conocidas de las herramientas para desarrolladores de Chrome aqu铆?
