online - Los puntos de interrupción del depurador JavaScript de Chrome no hacen nada?

javascript console chrome

Question

Parece que no puedo descifrar 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 que aparezca la consola.
2. Haga clic en Fuentes y luego seleccione el archivo JavaScript correspondiente que quiero depurar.
3. Establecí puntos de corte donde quiero que el código se detenga poniendo una etiqueta azul en el canal al lado de la línea de la izquierda.
4. Hice clic en el botón de mi página web (que es una página de php prestado) que inicia el código de JavaScript.
5. El código se ejecutó con éxito sin detenerse.

También noté que las Expresiones de observación tampoco funcionan. Me sigue diciendo que la variable que quiero ver no está definida.

Pruebas posteriores descubrieron que es mi código el que causa el error del punto de interrupción. Parece que falla en la línea "$ (" # frmVerification ") submit (función () {". 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;
    });
});

Answer 1

Asegúrese de estar utilizando el mismo host en la URL que era cuando configura la asignación. Por ejemplo, si estuvo en http://127.0.0.1/my-app cuando configuró y mapeó el área de trabajo, los puntos de interrupción no funcionarán si visualiza la página a través de http://localhost/my-app . Además, gracias por leer esto ahora. Vea mi respuesta al problema de Chromium here .

Answer 2

Asegúrese de que la secuencia de comandos con el "depurador"; declaración en él no es blackboxed por Chrome. Puede ir a la pestaña Fuentes para verificar y desactivar el blackbox si es así.

EDITAR: Se agregó una captura de pantalla.

Answer 3

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

Guión:

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

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

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

• Javascript es compatible con ambos modales incluidos a través de etiquetas estándar html <script> .

Noté que los puntos de interrupción solo se activan en 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 se está evaluando y ejecutándose. Aparecen cuadros de alerta, se ejecutan cosas de tipo de código y la salida sigue la lógica establecida en el código.

No me he zambullido más para investigar más porque estoy presionado por el tiempo, pero quería ponerlo allí y devolverlo a la comunidad.

PD: Uso SO todo el tiempo, pero esta es mi primera publicación, así que no me molestes :-)

Answer 4

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 minimizado y cargado por el navegador, normalmente le dice a Chrome Dev Tools dónde está la versión no miniaturizada.

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

Por ejemplo, si trabaja localmente en un servidor web, en la pestaña Fuentes en Herramientas de desarrollo de Chrome, 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 totalmente calificada de http://localhost/scripts/test.js

En Chrome 38, manteniéndome en mi ejemplo anterior, si miras la pestaña Fuentes, todos los archivos se ejecutan en http://localhost/ , de modo que cuando haces clic en test.js, Chrome carga http://localhost/scripts/test.js

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

Cuando me deshice de la línea @ sourceURL del archivo JS, todo vuelve a funcionar normalmente (es decir, de la manera que cabría esperar).

Answer 5

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

Answer 6

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

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

Answer 7

No estoy seguro de por qué sus puntos de interrupción no están llegando, pero una forma segura de entrar en su código es escribir

debugger;

donde desea que se detenga el código, y luego ejecutar nuevamente con la ventana de herramientas de desarrollo de Chrome abierta.

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

Answer 8

Por lo tanto, además de la respuesta de Adam Rackis, si tiene errores en su archivo javascript por encima del punto crítico, no lo alcanzará, independientemente de si lo marca, o lo instala en el debugger; .

Aquí hay un ejemplo:

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

Answer 9

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 arreglarlo.

Answer 10

Tengo un problema similar. Los puntos de interrupción no funcionan a menos que use debugger; . Solucioné el problema de mi punto de interrupción con "Restaurar valores predeterminados y volver a cargar". Se encuentra en Chrome Developer Tools, Settings, Restore defaults y reload.

Answer 11

Tuve el mismo problema en un archivo de línea de 10K. Los puntos de ruptura estaban siendo ignorados,
Las instrucciones _debugger codificadas funcionaban, 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 al principio 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 ingreso myDebuggerFlag = true; en la línea de la consola (Primero tiene que salir de myDebugger, por supuesto.

Answer 12

Tuve un problema donde los puntos de interrupción de Chrome no estaban disparando nada. Cuando traté de usar ''depurador'' en mi código, solo pude recorrer el código en la versión VM de mi código. Mi problema era que estaba mapeando los recursos incorrectamente. Re-mapping solucionó mi problema.

Answer 13

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

Answer 14

como lo experimenté con Chrome, debemos abrir la consola del navegador para ejecutar el depurador al cargar la página.

pon esto en algún lugar del archivo javascript que quieras ejecutar

debugger

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

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