renderizado - ¿Cómo se puede depurar JavaScript que bloquea el navegador?

quitar el javascript que bloquea la visualización de contenido wordpress plugin (11)

Estoy trabajando en una aplicación de JavaScript de páginas web ricas sustancialmente grande. Por algún motivo, un cambio reciente hace que cuelgue aleatoriamente el navegador.

¿Cómo puedo reducir el problema? Como el navegador deja de responder, no veo ningún error y no puedo utilizar Break on next FireBug.

Creo que puedes usar el registro de la consola como este

console.log(new Date() + " started Function Name or block of lines from # to #"); // functions or few lines of code console.log(new Date() + " finished Function Name or block of lines from # to #")

Al final de ejecutar su página web, puede identificar el área que toma tanto tiempo durante las ejecuciones, b

En lugar de comentar el infierno de su código, debe usar un registro de consola de depuración .

Debería utilizar la funcionalidad console.log() proporcionada por la mayoría de los navegadores modernos, o emularla si usa un navegador que no la admite.

Cada vez que llame a console.log(''sometext'') , se console.log(''sometext'') una entrada de registro en la consola de depuración de su navegador con su texto especificado, normalmente seguido del tiempo real.

Debe establecer una entrada de registro antes de cada parte crítica del flujo de la aplicación, luego más y más hasta que encuentre qué registro no se está llamando. Eso significa que el código antes de ese registro cuelga el navegador.

También puede escribir su propia función de registro personal con funcionalidades adicionales, por ejemplo, el estado de alguna variable particular, o un objeto que contenga un aspecto más detallado del flujo de su programa, etc.

Ejemplo

console.log(''step 1''); while(1) {} console.log(''step 2'');

El ciclo infinito detendrá el programa, pero aún podrá ver el registro de la consola con el flujo de programa registrado hasta que se detenga el programa.

Por lo tanto, en este ejemplo, no verá el "paso 2" en el registro de la consola, pero verá el "paso 1". Esto significa que el programa se detuvo entre el paso 1 y el paso 2.

A continuación, puede agregar registro de consola adicional en el código entre los dos pasos para buscar profundamente el problema, hasta que lo encuentre.

En mi experiencia, los problemas que hacen que el navegador deje de responder suelen ser bucles infinitos o similares.

Como punto de partida, investigue sus bucles por cosas tontas como no incrementar algo en lo que luego confíe.

Como dijo un cartel anterior, aparte de eso, comente fragmentos de código para aislar el problema. Podrías "usar una metodología de dividir y conquistar y casi literalmente comentar la mitad de las páginas JS, si funcionara con un error diferente, probablemente hayas encontrado el bit correcto.

Luego divide eso por la mitad, etc. hasta que encuentres al culpable.

Instale Google Chrome , vaya a su página, presione f12 y aparecerá la consola del desarrollador. Luego seleccione el botón Scripts , luego seleccione su script (ej: myScript.js) del menú desplegable en la esquina superior izquierda de la consola. Luego haga clic en la primera línea (o una línea donde cree que no se cuelga) y se realizará un punto de interrupción . Después de que javascript llegue a su punto de ruptura, haga clic en uno de los botones de la esquina superior derecha de la consola (verá un botón como el símbolo Pausa y luego el otro botón 4). Presione el botón 2º (o el botón después de pausa para pasar) o el botón 3º (paso adentro). Pase el mouse sobre los botones y le explicarán lo que significan. Luego irás en tu código así hasta que se cuelgue y luego podrás depurarlo mejor.

El depurador de Google Chrome es mucho mejor que Firebug y más rápido. ¡Hice el cambio de Firebug y esto es realmente genial! ;)

Los navegadores de hoy Firefox / Seamonkey (Ctrl-Shift-I / Debugger / PAUSE-Icon), Chrome, ... generalmente tienen un depurador JS integrado con el botón PAUSE que funciona en cualquier momento. Simplemente presiona eso cuando estés en una página de bucle / CPU intensiva, y lo más probable es que el panel de "Pila de llamadas" te indique el problema, listo para una inspección adicional ...

Me encontré con el mismo problema y así fue como lo resolví.

Verifique la consola para detectar errores y solucionarlos

Alguna consola de tiempo incluso está colgando

Verifique todos los bucles si el uno es infinito
Verificar el código recursivo
Compruebe si el código está agregando dinámicamente elementos al documento
Usa puntos de quiebre en tu consola
Use un registro de consola, es decir, inicie sesión en los bloques de código sospechosos

Me sorprende que aún no se haya respondido correctamente, y la respuesta más votada es básicamente "poner los registros de la consola en todas partes hasta que lo descubras", lo que no es realmente una solución, especialmente con aplicaciones más grandes, a menos que realmente quieras gastar todo el tiempo copiando y pegando "registro de la consola".

De todos modos, todo lo que necesitas es debugger; alguien ya lo mencionó pero realmente no explicó cómo se podría usar:

En Chrome (y la mayoría de los otros navegadores), debugger; detendrá la ejecución, lo llevará a la consola de desarrollo y le mostrará el código que está ejecutando actualmente a la izquierda y el trazado de la pila a la derecha. En la parte superior derecha de la consola hay algunos botones con forma de flecha. El primero es "ejecución del script de reanudación". El que queremos es el siguiente "paso sobre la próxima llamada de función".

Básicamente, todo lo que necesita hacer es colocar un depurador en cualquier lugar de su código, en un punto donde sepa que la página aún no se ha congelado, y luego ejecutarlo, y hacer clic repetidamente en "paso sobre la próxima llamada de función" que se parece a una flecha saltando sobre un círculo. Irá línea por línea, llamada por llamada, a través de la ejecución de su secuencia de comandos hasta que se cuelgue / se atasque en un ciclo infinito. En este punto, podrá ver exactamente dónde se bloquea su código, así como todas las variables / valores actualmente en alcance, lo que le ayudará a comprender por qué el script está atascado.

Estaba trabajando en mi cerebro tratando de encontrar un lazo colgante en una JS bastante compleja en la que estoy trabajando, y logré encontrarla en aproximadamente 30 segundos usando este método.

Para aislar el problema, puede comenzar eliminando / inhabilitando / comentando diferentes secciones de su código hasta que haya reducido el código a una pequeña parte que le permita encontrar el error. Otra posibilidad es ver el historial de check-in del control de origen para los diferentes cambios que se han comprometido recientemente. Espero que comprendas de dónde viene el problema.

Puede agregar debugger; en cualquier parte de su código JS para establecer un punto de interrupción manualmente. Pausará la ejecución y le permitirá reanudar / inspeccionar el código (Firebug / FF).

Página Wiki de Firebug: http://getfirebug.com/wiki/index.php/Debugger;_keyword

Sé que es primitivo, pero me gusta rociar mi código js con ''alertas'' para ver qué tan lejos está mi código antes de que ocurra un problema. Si las ventanas de alerta son demasiado molestas, puede configurar un área de texto a la que pueda anexar registros:

<textarea id=''txtLog'' ...></textarea> <script> ... function log(str) { $(''#txtLog'').append(str + ''/n''); } log("some message, like ''Executing Step #2''..."); ... </script>

Sé que esta pregunta es antigua, pero en VS2013 y puede presionar el botón de pausa y obtener un seguimiento completo de la pila JS. Esto me estaba volviendo loco porque el lazo estaba en el interior angular, así que no pude poner alertas, puntos de ruptura, etc. porque no tenía ni idea de dónde colocarlos. No sé si funciona con la edición express gratuita, pero vale la pena intentarlo.

También he leído que Chrome tiene una función de pausa, por lo que podría ser una opción, pero yo no lo he probado.