¿Cómo debuges los programas de JavaScript? El método más primitivo es usar alert () para imprimir contenido en la página, y un método ligeramente mejorado es usar console.log () para salir de contenido en la consola JavaScript. Bueno, el uso de estos dos métodos ha resuelto muchos problemas de depuración de pequeños scripts de JavaScript. Sin embargo, sería una pena no usar herramientas de desarrollador que se vuelvan cada vez más poderosas en Chrome. Este artículo presenta principalmente la configuración del punto de ruptura de JavaScript y las funciones de depuración, es decir, el panel de fuentes (anteriormente llamado Scripts). Si es competente en varias técnicas de depuración de Java en Eclipse, los conceptos aquí son similares. La versión de Chrome utilizada al escribir este artículo es 25.0.1364.172.
Entorno básico
A la izquierda de Sourcespanel está la fuente de contenido, incluidos varios recursos en la página. Entre ellos, se divide en fuentes y scripts de contenido. Las fuentes son varios recursos contenidos en la página misma. Están organizados de acuerdo con los dominios que aparecen en la página, que es a lo que debemos prestar atención. Los archivos JS cargados asíncronamente también aparecerán aquí después de la carga. Content Scripts es una extensión de Chrome que se organiza de acuerdo con la ID de extensión. Este tipo de extensión es en realidad un recurso integrado en la página, y también pueden leer y escribir DOM. Solo los desarrolladores que escriben y depuran extensiones como esta deberían preocuparse por ellos. Si su navegador no tiene ninguna extensiones instaladas, los scripts de contenido no verán nada.
El área principal del panel de fuentes se utiliza para mostrar el contenido del archivo de recursos a la izquierda.
En el lado derecho de las fuentes, el panel está el área funcional de depuración. La fila superior de los botones son pausa/continúa, paso a paso, salto paso a paso, salto paso a paso, desactivación/habilita todos los puntos de interrupción. A continuación hay varias áreas funcionales específicas. Esto se introducirá más tarde.
Tenga en cuenta que las áreas de ambos lados pueden encogerse de forma predeterminada y no mostrarse en ambos lados. Haga clic en los botones telescópicos en ambos lados para mostrar. Cuando se muestra el área izquierda, el valor predeterminado es encogerse automáticamente. Haga clic en el botón PIN al lado y no se retraerá.
También hay algunos botones de características en la parte inferior que son muy útiles.
Establecer puntos de interrupción en el código fuente
A través de la fuente de contenido a la izquierda, abra el archivo JavaScript correspondiente, haga clic en el número de línea de archivo y establezca y elimine los puntos de interrupción. Cada punto de interrupción agregado aparecerá en la lista de puntos de interrupción en el área de depuración de la derecha. Al hacer clic en el punto de interrupción de la lista, ubicará el punto de interrupción en el área de contenido. Si tiene varios archivos y múltiples puntos de interrupción, es muy conveniente localizar rápidamente los puntos de interrupción en la lista de puntos de interrupción.
Hay dos estados para cada punto de interrupción adicional: activar y deshabilitar. Los puntos de interrupción que se acaban de agregar son todos los estados activados, y el estado deshabilitado es retener el punto de interrupción pero cancelar temporalmente la función de punto de interrupción. Hay una casilla de verificación antes de cada punto de interrupción en la lista de puntos de interrupción, y la desactivación deshabilitará el punto de interrupción. Los puntos de interrupción también se pueden deshabilitar en el menú de clic derecho de la posición de punto de interrupción. También puede deshabilitar temporalmente todos los puntos de interrupción agregados en el botón en la cinta derecha y hacer clic en él para restaurar el estado original.
Punto de interrupción condicional : seleccione "Editar punto de interrupción ..." En el menú de clic derecho de la posición de punto de interrupción para establecer la condición para activar el punto de interrupción, es decir, escribir una expresión y el punto de interrupción se activará solo cuando la expresión sea verdadera. Verifique la pila de llamadas de entorno de los puntos de interrupción (pila de llamadas): cuando se detiene el punto de interrupción, la pila de llamadas en el área de depuración a la derecha mostrará la pila de llamadas de método donde está el punto de interrupción actual. Por ejemplo, hay una función g () en la que se llama la función f (), y establecí un punto de interrupción en f (). Luego, cuando ejecuto la función g () en la consola, el punto de interrupción se activará y la pila de llamadas se mostrará de la siguiente manera:
La parte superior es f () y luego g (). Cada capa de la pila de llamadas se llama marco. Al hacer clic en cada cuadro, puede saltar al punto de llamada de ese cuadro.
Además, puede reiniciar la ejecución del marco actual en el marco utilizando el menú de clic derecho, es decir, desde el comienzo del marco. Por ejemplo, en el marco de la función f (), el punto de interrupción saltará al comienzo de F () y volverá a ejecutar, y el valor variable en el contexto también se restaurará. De esta manera, combinando funciones como la modificación variable y la edición de código, puede depurar repetidamente en el marco actual sin actualizar la página y activar el punto de interrupción nuevamente. Ver variables
Debajo de la lista de Call Stack está la lista de variables de alcance, donde puede ver los valores de las variables locales y globales en este momento. Ejecutar el código seleccionado
Durante la depuración del punto de interrupción, puede usar el mouse para seleccionar la variable o la expresión que desea ver, y luego haga clic con el botón derecho en el menú para ejecutar "Evaluar en la consola" para ver el valor actual de la expresión. El botón "Interrupt/continuar" en la parte superior del área de depuración en el lado derecho de la declaración de JavaScript que se ejecutará la próxima vez tiene una función. Cuando no hay un punto de interrupción activado, hacer clic en este botón ingresará al estado de interrupción de "preparación". La próxima vez que la página ejecute la instrucción JavaScript, interrumpirá automáticamente, como el código que se ejecutará cuando se active una acción de clic. Modificando temporalmente el código JavaScript. Por lo general, nos acostumbramos a este bucle cuando el código de depuración: modifique el código → Actualizar la página → volver a verificar. Pero, de hecho, el contenido en el archivo JS se puede modificar temporalmente en Chrome. Save (Ctrl+S) puede entrar en vigencia de inmediato y volver a debatirlo inmediatamente con consola y otras funciones. Pero tenga en cuenta que esta modificación es temporal, y la modificación de la página de actualización desaparecerá.
Punto de quiebre en excepción
Puede ver el botón debajo de la interfaz. Es un interruptor que establece si el programa se interrumpe cuando encuentra una excepción cuando se está ejecutando. Al hacer clic en este botón, cambiará entre 3 estados:
Por defecto, no se encontrará interrupción
Todas las excepciones serán interrumpidas, incluidas situaciones capturadas
Solo interrumpe si se produce una excepción no captura
Explique principalmente la diferencia entre el estado 2 y el estado 3
intentar{
arrojar 'una excepción';
} catch (e) {
console.log (e);
}
El código en el intento anterior encontrará una excepción, pero el código de captura detrás puede detectar la excepción. Si se interrumpen todas las excepciones, el código interrumpirá automáticamente cuando se ejecute a la declaración de lanzamiento que producirá una excepción; Y si se interrumpe solo cuando se encuentra con una excepción no captura, entonces no interrumpirá aquí. En general, estaremos más preocupados por encontrar excepciones no capturas.
Establecer puntos de interrupción en los elementos DOM
A veces necesitamos escuchar a un cierto DOM modificado sin preocuparnos sobre qué línea de código se modifica (o puede haber muchos lugares que se modificarán). Entonces podemos establecer puntos de interrupción directamente en el DOM.
Como se muestra en la figura, en la revisión del Panel de Elementos de Elementos, puede establecer tres puntos de interrupción en el menú de clic derecho en un elemento: después de que el nodo infantil modifique sus propios atributos y modifique su propio nodo, el punto de interrupción DOM aparecerá en la lista de puntos de interrupción DOM en el lado derecho del panel de fuentes. Una vez ejecutado para realizar modificaciones correspondientes al DOM, el código se detendrá allí, como se muestra en la figura a continuación.
Punto de quiebre XHR
Hay puntos de interrupción XHR en el área de depuración a la derecha. Haga clic en + e ingrese la cadena contenida en la URL para escuchar la solicitud AJAX para la URL. El contenido de entrada es equivalente al filtro de la URL. Si no se llena nada, escuche todas las solicitudes de XHR. Una vez que se activa la llamada XHR, se romperá en el lugar donde se solicita request.send ().
Punto de interrupción del activador por tipo de evento
La lista de oyentes de eventos en el área de depuración a la derecha, donde se enumeran varios tipos de eventos posibles. Verifique el tipo de evento correspondiente e interrumpirá automáticamente cuando el código JavaScript que desencadena el evento de ese tipo.
Llaves de atajo de depuración
Las teclas de acceso directo en todas las herramientas de desarrollo se pueden encontrar en la configuración en la esquina inferior derecha de la interfaz. F8, F10, F11 o Shitf+F11 generalmente se usa al depurar puntos de interrupción, pero las teclas de función como F10 pueden entrar en conflicto con las teclas de acceso directo predeterminados del sistema. No importa, pueden ser reemplazados por CMD+/, CMD+', CMD+; , Shift+CMD+; respectivamente. //@ SourceUrl Nombre El código producido por Eval. A veces, se crea un código muy dinámico en el contexto de JavaScript actual en forma de una cadena a través de la función eval (), en lugar de cargarse como un archivo JS separado. De esta manera, no encontrará el archivo en el área de contenido a la izquierda, por lo que es difícil depurar. De hecho, solo agregamos una línea "//@ SourceUrl = nombre" al final del código creado por Eval para nombrar este código (el navegador tratará esta forma especial de comentarios específicamente), de modo que aparezca en el área de contenido a la izquierda, al igual que carga un archivo JS con un nombre específico, puede establecer puntos de interrupción y debug. En la figura a continuación, ejecutamos una pieza de código a través de Eval y usamos SourceUrl para nombrarlo DynamicScript.js. Después de la ejecución, este "archivo" aparece en el área de contenido a la izquierda, y su contenido es el contenido en eval. También puede echar un vistazo a este ejemplo de nombrar el código Coffeescript compilado dinámicamente:
var Coffee = Coffeescript.compile (code.value) + "//@ sourceUrl =" + (evalName.Value || "Coffeeeeeeee!");
eval (café);
De hecho, //@ SourceUrl no solo se puede usar en el código EVAL, sino que se puede usar cualquier archivo JS o incluso el código ingresado por la consola JavaScript, ¡con el mismo efecto! El botón Código de formato (Pretty Print) se usa para reformatear el código desordenado en un código hermoso, como algunos archivos JS comprimidos que son básicamente ilegibles o depurados. Haga clic en el formato y luego no lo formate. Antes de embellecer
Referencia embellecida: Documentación oficial de Herramientas para desarrolladores de Chrome