Red de conocimiento informático - Material del sitio web - Cómo dominar las habilidades de depuración de las herramientas de desarrollo del navegador Google Chrome

Cómo dominar las habilidades de depuración de las herramientas de desarrollo del navegador Google Chrome

1. Embellezca Javascript

Los archivos Js generalmente se comprimen antes de conectarse. El javascript comprimido es casi imposible de leer y es casi imposible establecer puntos de interrupción. Hay un hermoso botón de impresión (el símbolo es {}) debajo del panel de secuencia de comandos. Después de hacer clic en él, el archivo js comprimido se formateará en un archivo con sangría ordenada y se establecerán puntos de interrupción en él. La legibilidad mejorará enormemente.

2. Vea qué eventos están vinculados al elemento

En el panel de elementos, seleccione un elemento y luego, debajo del detector de eventos a la derecha, verá los eventos relacionados con el elemento por tipo. Una lista de eventos relacionados con el elemento, es decir, eventos que pasan a través del nodo durante las fases de captura y difusión de eventos.

A la derecha del detector de eventos, puede seleccionar "Solo nodos seleccionados" para enumerar solo los eventos en ese nodo.

Al expandir un evento se mostrarán los eventos vinculados a ese archivo de evento. Al hacer clic en el nombre del archivo, se saltará directamente a la línea donde está el controlador de eventos vinculado, o si el js está comprimido, puede hacer clic en el nombre del archivo primero y luego ver los eventos vinculados.

3.Punto de interrupción Ajax

En el punto de interrupción XHR en el lado derecho del panel de script, haga clic en + a la derecha para agregar un punto de interrupción xhr. El punto de interrupción se basa en la URL. de xhr Para hacer coincidir el punto de interrupción, si no escribe una regla de coincidencia, coincidirá en todos los ajax. Esta coincidencia es solo una simple búsqueda de cadenas. Antes de enviar la interrupción, mire en la pila de llamadas de la interrupción para ver cuándo. comenzó. Compruebe en qué parte de la pila de llamadas se inició una solicitud ajax

4. Puntos de interrupción de eventos de página

Además de establecer puntos de interrupción regulares, también puede establecer puntos de interrupción cuando ocurre un evento específico (no específico de un elemento). ), hay un punto de interrupción del detector de eventos en el lado derecho del panel de secuencia de comandos que enumera todos los eventos admitidos, no solo los clics, las palabras clave, etc. En el lado derecho del panel de script, hay un punto de interrupción del detector de eventos, que enumera todos los eventos admitidos, incluidos no solo clics, pulsaciones de teclas, etc., sino también temporizadores (puntos de interrupción cuando el controlador setTimeout setInterval comienza a ejecutarse), carga, desplazamiento. y otros eventos.

5. Interrumpir cuando ocurre una excepción en javascript

El botón a la izquierda de Pretty print es un interruptor que se usa para habilitar la interrupción cuando js lanza una excepción. de interrupción: Interrupción en todas las excepciones o en excepciones no detectadas. Después de interrumpir la excepción, puede ver el motivo por el que se lanzó la excepción

6. Interrupción de evento de evento de capa 3 DOM

En el panel de elementos, haga clic derecho en el elemento, allí Hay dos opciones: Modificar, estas dos opciones corresponden al evento DOMSubtreeModified en el evento DOM de nivel 3. El punto de interrupción DOM del evento DOMSubtreeModified en el panel de script enumerará todas las interrupciones de eventos de nivel 3

7. expresiones

Buscar definición de función: ctrl + shift + 0 (en el panel de secuencias de comandos)

Buscar archivo: ctrl + o (en el panel de secuencias de comandos)

Más accesos directos: Presione? Ver ayuda

8. API de línea de comando

$(id_selector) Esto no tiene nada que ver con si jQuery está en la página

$(css_selector)

$0, 1, 2, 3, 4

Los 5 elementos seleccionados más recientemente, el último elemento seleccionado y el último elemento seleccionado en el panel de elementos. Los últimos 5 elementos seleccionados en el panel de elementos son $0

Estas 5 variables están en estado de primero en entrar, primero en salir

copiar(str) Copia str al portapapeles, para el punto de interrupción Copiar variables es muy útil

monitorEvents(object[, tipos])/unmonitorEvents(objeto[, tipos])/unmonitorEvents(objeto[, tipos])

Esta función está en el panel de elementos utilizado en , pero no tiene ningún efecto en el panel Elementos.

[,type])

Cuando ocurre un evento de tipo en el objeto, genera el objeto de evento en la consola

Para obtener más API de consola, use console.log(console) o haga clic en

Para obtener más API de línea de comando, haga clic en

9. La modificación en tiempo real del código js tendrá efecto

Los archivos JS fuera de la página se pueden modificar directamente en el panel de script Después de la modificación, presione ctrl + S para guardar y entrará en vigor inmediatamente

Nota

La prueba no admite la modificación de js en la página html

No admite la modificación del script en el formato de impresión Pretty

. 10.10. El código ejecutado en la consola puede ser descifrado

Agregue //@ sourceURL=filename.js a la última línea del código ingresado en la consola y aparecerá un archivo llamado filename.js en el script. panel. , el archivo se tratará como un archivo js externo.