Cómo dominar las habilidades de depuración de las herramientas de desarrollo del navegador Google Chrome
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.