¿Los puntos de interrupción del depurador javascript de Chrome no hacen nada?

Parece que no puedo entender la herramienta de depuración de Chrome.

Tengo la versión de Chrome 21.0.1180.60 m.

Pasos que tomé:

1. Presioné ctrl-shift-i para abrir la consola.
2. Hice clic en Fuentes y luego seleccione el archivo JavaScript relevante que quiero depurar.
3. Establezco puntos de interrupción donde quiero que se detenga el código colocando una etiqueta azul en la canaleta junto a la línea de la izquierda.
4. Hice clic en el botón de mi página web (que es una página renderizada en php) que inicia el código javascript.
5. El código se ejecutó correctamente sin detenerse.

También noté que Watch Expressions tampoco funciona. Me sigue diciendo que la variable que quiero ver no está definida.

Más pruebas encontraron que es mi código el que está causando que falle el punto de interrupción. Parece que falla en la línea "$ (" # frmVerification "). Submit (function () {". No entra en los puntos de interrupción dentro de esa función ().

Abajo esta el:

//function to check name and comment field 
var test = "this is a test";
var test2 = "this is another test";

function validateLogin(){
    //if(userEmail.attr("value") && userPass.attr("value"))
        return true;
    //else
        //return false;
}

//onclick on different buttons, do different things.
function ajaxRequest(){

}
$(document).ready(function(){
  //When form submitted
    $("#frmVerification").submit(function(){
        var username = $("#username");
        var token = $("#token");
        var action = $("#action");
        var requester = $("#requester");
        if(validateLogin()){
            $.ajax({
            type: "post",
            url: "verification.php",
            data: "username="+username.html()+"&token="+token.val()+"&action="+action.val()+"&requester="+requester.val(),
            success: function(data) {
                try{
                    var jsonObj = $.parseJSON(data); //convert data into json object, throws exception if data is not json compatible
                    if(jsonObj.length > 0){//if there is any error output all data
                        var htmUl = $('<ul></ul>');
                        $.each(jsonObj, function(){
                            htmUl.append('<li>' + this + '</li>');
                        });
                        $("#errOut").html(htmUl);
                    }else{
                        alert("Your account is now activated, thank you. If you have already logged in, press OK to go to the home page. If not, you must log in first.");
                        window.location.replace("home.php");
                    }
                }
                catch(e){//if error output error to errOut]
                    $("#errOut").html("PHP module returned non JSON object: <p>"+data+"</p>");
                }
            }
        });
    }
    else alert("Please fill UserName & Password!");
        return false;
    });
});

No estoy seguro de por qué sus puntos de interrupción no funcionan, pero una forma segura de ingresar a su código es escribir

debugger;

donde desea que se detenga el código y luego vuelva a ejecutarlo con la ventana de herramientas de desarrollo de Chrome abierta.

Solo una pequeña cosa a tener en cuenta, asegúrese de limpiar después de terminar y eliminar las líneas del depurador. Si alguna vez ejecuta archivos JavaScript a través del compresor YUI, la existencia de una debugger;línea provocará un error.

Esta es una respuesta tardía, pero tuve el mismo problema, pero la respuesta fue diferente.

En mi caso, había una referencia sourceURL en mi código:

//@ sourceURL=/Scripts/test.js

Cuando este archivo Javascript es minificado y cargado por el navegador, normalmente le dice a Chrome Dev Tools dónde está la versión no minificada.

Sin embargo, si está depurando la versión no minimizada y esta línea existe, Chrome Dev Tools se asigna a esa ruta sourceURL en lugar de a la ruta "normal".

Por ejemplo, si trabaja localmente en un servidor web, en la pestaña Fuentes en Chrome Dev Tools, la ruta a un archivo JS determinado será http://localhost/Scripts/test.js

Si test.js tiene esto en la parte inferior

//@ sourceURL=/Scripts/test.js

entonces los puntos de interrupción solo funcionarán si la ruta del archivo es /Scripts/test.js, no la URL completa dehttp://localhost/Scripts/test.js

En Chrome 38, siguiendo mi ejemplo anterior, si observa la pestaña Fuentes, todos los archivos se ejecutan http://localhost/, por lo que cuando hace clic en test.js, Chrome se cargahttp://localhost/Scripts/test.js

Puede poner todos los puntos de interrupción que desee en este archivo, y Chrome nunca llega a ninguno de ellos. Si coloca un punto de interrupción en su JS antes de que llame a cualquier función en test.js y luego ingresa a esa función, verá que Chrome abre una nueva pestaña cuya ruta es /Scripts/test.js. Poner puntos de interrupción en este archivo detendrá el flujo del programa.

Cuando me deshice de la @ sourceURLlínea del archivo JS, todo vuelve a funcionar con normalidad (es decir, de la forma esperada).

Probablemente este error https://code.google.com/p/chromium/issues/detail?id=278361

Esto se reproduce con mi Chrome 31.0.1650.57 (compilación oficial 235101) en Linux.

Estoy reiniciando el navegador para solucionarlo.

Tengo un problema similar. Los puntos de interrupción no funcionan a menos que use debugger;. Arreglé mi problema de puntos de interrupción con "Restaurar valores predeterminados y recargar". Se encuentra en las Herramientas para desarrolladores de Chrome, Configuración, Restaurar valores predeterminados y recargar.

Asegúrese de que la secuencia de comandos con el "depurador"; La declaración que contiene no está incluida en la caja negra de Chrome. Puede ir a la pestaña Fuentes para verificar y desactivar la caja negra si es así.

EDITAR: captura de pantalla agregada.

Me encontré con esto varias veces, al principio funciona bien por localhost, de repente, los puntos de interrupción no funcionan, cambio a 127.0.0.1, luego funciona de nuevo. La esperanza ayuda.

Encontré problemas similares tanto en Chrome como en Firefox, aunque puede que no sea la solución para su problema. Estoy compartiendo aquí con la esperanza de que pueda ayudar a otros. Me he encontrado con esta situación antes en otros proyectos no relacionados, pero nunca entendí por qué hasta que volvió a surgir hoy.

Guión:

Tengo una página que usa dos modales de arranque que provienen de la misma fuente y un conjunto de archivos javascript (el impresionante archivo jquery de blueimp).

• BS Modal 1 se procesa al cargar la página (a través de php) y siempre está presente en la página. Se utiliza para agregar un nuevo registro relacionado. (CakePHP ... piensa en cosas de tipo SalesForcey)

• BS Modal 2 se usa para editar registros relacionados existentes y su contenido html se extrae de una llamada ajax y se agrega al DOM a través de jQuery.

• Javascript que admite ambos modales incluidos a través de <script>etiquetas html estándar .

Noté que los puntos de interrupción solo se activan en el Modal 1. No funcionan cuando el código se está ejecutando en el Modal 2 agregado dinámicamente, aunque es bastante obvio que el código está siendo evaluado y ejecutado. Aparecen cuadros de alerta, las cosas de tipo de código se ejecutan y la salida sigue la lógica establecida en el código.

No he profundizado para investigar más porque tengo poco tiempo, pero quería publicarlo y retribuir a la comunidad.

PD: uso SO todo el tiempo, pero esta es mi primera publicación, así que ten cuidado conmigo :-)

Asegúrese de estar utilizando el mismo host en la URL que estaba cuando configuró la asignación. Por ejemplo, si estaba en el http://127.0.0.1/my-appmomento en que configuró y asignó el espacio de trabajo, los puntos de interrupción no funcionarán si ve la página a través de http://localhost/my-app. Además, gracias por leer hasta aquí. Vea mi respuesta al problema de Chromium aquí .

asegúrese de haber abierto la consola javascript (o fuentes) en su ventana de Chrome. de lo contrario, nunca llegará al límite. puede abrir la consola javascript con el botón de opción en la esquina superior derecha -> herramientas -> consola javascript.

Tuve un problema en el que los puntos de interrupción de Chrome no disparaban nada. Cuando intenté usar 'depurador' en mi código, solo pude revisar el código en la versión de VM de mi código. Mi problema fue que estaba mapeando los recursos incorrectamente. El re-mapeo solucionó mi problema.

Mi solución fue borrar el almacenamiento local, el almacenamiento de sesión y las cookies de la pestaña Aplicaciones. Después de eso, Chrome pausaría la ejecución del script en los puntos de interrupción definidos en Fuentes.

1. Haga clic en la pestaña Aplicaciones de Google Chrome
2. Haga clic derecho en la URL debajo de cada carpeta> Borrar

Captura de pantalla: pestaña Aplicaciones

Tenía un minificador que debuggereliminaba las declaraciones ¯_ (ツ) _ / ¯

Asegúrese de poner el punto de interrupción en el archivo fuente correcto. Algunas herramientas crean múltiples copias de código y probamos en diferentes archivos fuente.

Solución: en lugar de abrir el archivo con un acceso directo como Ctrl+Po Ctrl+R, ábralo desde el Navegador de archivos. En la pestaña Fuente, hay un icono en la parte superior izquierda. Usándolo podemos abrir el archivo fuente correcto.

Entonces, además de la respuesta de Adam Rackis, si tiene errores en su archivo javascript por encima del punto de interrupción, no lo alcanzará independientemente de si lo marca o agrega debugger;.

He aquí un ejemplo:

if (nonExistentVar === "something") {
  console.log("this won't happen as the above errors out");
}
debugger;
console.log("this won't print either")

como experimenté con Chrome, necesitamos abrir la consola del navegador para que el depurador se ejecute al cargar la página.

poner esto en algún lugar del archivo javascript que desea ejecutar

debugger

abra la consola del navegador y vuelva a cargar la página.

el depurador se ejecutará como la imagen de ejemplo a continuación

No estoy seguro de cómo funcionó, pero presionar F1 para la configuración y en la parte inferior derecha, presionar "Restaurar valores predeterminados y recargar" funcionó para mí.

Respuesta bastante tardía, pero nada de lo anterior ayudó a mi caso y fue algo diferente

mientras hacía referencia al tipo de archivo javascript = "texto / javascript" faltaba en la aplicación heredada en la que estaba trabajando

<script  src="ab.js" ></script>

debajo de uno funcionó y los puntos de interrupción llegaron como se esperaba

 <script  src="ab.js" type="text/javascript"></script>

¡Necesito mis malditos puntos de ruptura! Comportamiento muy extraño: la mancha normalmente roja en Sources se estaba volviendo gris; estos y los debugger;puntos de interrupción seguirían apareciendo, pero aparecerían en algún lugar de HTML no ejecutable.

Después de un par de horas de piratear el código, los puntos de interrupción finalmente se alcanzaron correctamente, sin embargo, quedaba más o menos el equivalente de "Hola mundo". Jajaja.

Así que tenía algunos datos del lado del servidor en la página (en mi caso en una declaración de @razor), pero sería lo mismo en cualquier caso similar.

Hubo algunos caracteres 0A / 0D formados incorrectamente en la salida del servidor, los retornos de carro antiguos, lo que provocó la confusión de Chrome con su propia numeración de líneas.

Limpiar el HTML inyectado en el servidor y obtuve mi punto de interrupción.

Ahora veamos cuánto de este código puedo devolver CTRL-Z ...

Agregaré otra respuesta aleatoria solo porque esta pregunta surgió en respuesta a mis varias búsquedas. Tengo objetos jQuery que tienen métodos públicos y privados. El patrón es:

myObject = (function($){
  function publicFunction() {}
  function privateFunction() {}
  return {
    theOnlyMethod: publicFunction
  }
})(jQuery);

Si pongo un punto de interrupción en una línea dentro de una función privada, Chrome no lo depurará, ¡la línea se mueve hacia abajo hasta la declaración de retorno! Entonces, para depurar, ¡tengo que exponer las funciones privadas! Esto es nuevo para mí esta mañana (20/8/2020, versión 84.0.4147.125 (compilación oficial) (64 bits)), no puedo creer que no me haya encontrado con esto en 3 años.

Esto puede ser un error de Chrome. Desafortunadamente, Chrome rompe rutinariamente la depuración. A menudo tiene algún tipo de pérdida de memoria y, a menudo, se rompe o cambia cada pocas versiones.

La depuración con fuentes formateadas actualmente es extremadamente poco confiable.

Es posible que también esté intentando romper un código muerto.

Para estar seguro de que no es el navegador, también debe intentar depurarlo en Firefox.

Tuve el mismo problema en un archivo de línea de 10K. Se ignoraron los puntos de interrupción,
las declaraciones _debugger codificadas de forma rígida funcionaron, pero no se pueden alternar y pueden ser molestas cuando se colocan en un bucle. Mi solución, que es un truco pero funciona, es agregar lo siguiente en la parte superior del archivo:

let myDebuggerFlag = false;
let myDebugger = function () {
    if (myDebuggerFlag) {
        debugger;
    }
}

luego agrego un myDebugger (); en línea donde normalmente usaría un punto de interrupción.

para activar la depuración, simplemente ingrese myDebuggerFlag = true; en la línea de la consola. (tienes que salir primero de myDebugger, por supuesto.