Chrome Javascript Debugger Haltepunkte machen nichts?

Ich kann das Chrome-Debugging-Tool anscheinend nicht herausfinden.

Ich habe Chromversion 21.0.1180.60 m.

Schritte, die ich unternommen habe:

1. Ich drückte Strg-Umschalt-I, um die Konsole aufzurufen.
2. Klicken Sie auf Quellen und wählen Sie die entsprechende Javascript-Datei aus, die ich debuggen möchte.
3. Ich setze Haltepunkte, an denen der Code gestoppt werden soll, indem ich ein blaues Tag auf die Rinne neben der Linie links setze.
4. Ich habe auf die Schaltfläche auf meiner Webseite (die eine PHP-gerenderte Seite ist) geklickt, die den Javascript-Code initiiert.
5. Der Code wurde erfolgreich ausgeführt, ohne anzuhalten.

Mir ist auch aufgefallen, dass die Watch Expressions auch nicht funktionieren. Es sagt mir immer wieder, dass die Variable, die ich beobachten möchte, undefiniert ist.

Weitere Tests ergaben, dass mein Code dazu führt, dass der Haltepunkt fehlschlägt. Es scheint, dass es in der Zeile "$ (" # frmVerification "). Submit (function () {" fehlschlägt. Es tritt nicht in die Haltepunkte innerhalb dieser Funktion () ein.

Unten ist die:

//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;
    });
});

Ich bin mir nicht sicher, warum Ihre Haltepunkte nicht erreicht werden, aber eine sichere Möglichkeit, in Ihren Code einzusteigen, ist die Eingabe

debugger;

Hier soll der Code angehalten und dann bei geöffnetem Fenster der Chrome Developer Tools erneut ausgeführt werden.

Nur eine kleine Sache, die Sie beachten sollten: Bereinigen Sie nach Abschluss des Vorgangs und entfernen Sie die Debugger-Zeilen. Wenn Sie jemals JavaScript-Dateien über den YUI-Kompressor ausführen, führt das Vorhandensein einer debugger;Zeile zu einem Fehler.

Dies ist eine späte Antwort, aber ich hatte das gleiche Problem, aber die Antwort war anders.

In meinem Fall gab es eine sourceURL-Referenz in meinem Code:

//@ sourceURL=/Scripts/test.js

Wenn diese Javascript-Datei vom Browser minimiert und geladen wird, teilt sie Chrome Dev Tools normalerweise mit, wo sich die nicht minimierte Version befindet.

Wenn Sie jedoch die nicht minimierte Version debuggen und diese Zeile vorhanden ist, werden die Chrome Dev Tools diesem Quell-URL-Pfad anstelle des "normalen" Pfads zugeordnet.

Wenn Sie beispielsweise lokal auf einem Webserver arbeiten, lautet der Pfad zu einer bestimmten JS-Datei auf der Registerkarte Quellen in den Chrome Dev Tools http://localhost/Scripts/test.js

Wenn test.js dies unten hat

//@ sourceURL=/Scripts/test.js

Haltepunkte funktionieren dann nur, wenn der Dateipfad /Scripts/test.jsund nicht die vollständig qualifizierte URL von lautethttp://localhost/Scripts/test.js

Wenn Sie in Chrome 38 in meinem obigen Beispiel auf die Registerkarte Quellen schauen, wird jede Datei ausgeführt. http://localhost/Wenn Sie also auf test.js klicken, wird Chrome geladenhttp://localhost/Scripts/test.js

Sie können alle gewünschten Haltepunkte in diese Datei einfügen, und Chrome trifft keinen von ihnen. Wenn Sie einen Haltepunkt in Ihr JS einfügen, bevor es eine Funktion in test.js aufruft, und dann in diese Funktion eintreten, wird Chrome eine neue Registerkarte öffnen, deren Pfad lautet /Scripts/test.js. Durch das Einfügen von Haltepunkten in diese Datei wird der Programmfluss gestoppt.

Wenn ich die @ sourceURLZeile aus der JS-Datei entfernt habe, funktioniert alles wieder normal (dh so, wie Sie es erwarten würden).

Wahrscheinlich dieser Fehler https://code.google.com/p/chromium/issues/detail?id=278361

Dies wird mit meinem Chrome 31.0.1650.57 (Official Build 235101) unter Linux reproduziert.

Ich starte den Browser neu, um das Problem zu beheben.

Ich habe ein ähnliches Problem. Haltepunkte funktionierten nur, wenn ich sie verwendete debugger;. Ich habe mein Haltepunktproblem mit "Standardeinstellungen wiederherstellen und neu laden" behoben. Es befindet sich in den Chrome Developer Tools, Einstellungen, Standardeinstellungen wiederherstellen und neu laden.

Stellen Sie sicher, dass das Skript mit dem "Debugger"; Aussage darin ist nicht von Chrome Blackbox. Sie können zur Registerkarte Quellen gehen, um das Blackboxing zu überprüfen und zu deaktivieren, wenn dies der Fall ist.

BEARBEITEN: Screenshot hinzugefügt.

Ich habe das mehrmals getroffen, zuerst funktioniert es gut von localhost, plötzlich funktionieren die Haltepunkte nicht mehr, ich wechsle zu 127.0.0.1, dann funktioniert es wieder. Hoffnung hilft.

Ich habe ähnliche Probleme sowohl in Chrome als auch in Firefox festgestellt, obwohl dies möglicherweise nicht die Lösung für Ihr Problem ist. Ich teile hier in der Hoffnung, dass es anderen helfen kann. Ich habe diese Situation schon in anderen Projekten erlebt, aber nie verstanden, warum, bis sie heute wieder auftauchte.

Szenario:

Ich habe eine Seite, die zwei Bootstrap-Modalitäten verwendet, die aus derselben Quelle stammen, und einen Satz von Javascript-Dateien (Blueimps fantastischer JQuery-Datei-Upload).

• BS Modal 1 wird beim Laden der Seite (über PHP) gerendert und ist immer auf der Seite vorhanden. Es wird zum Hinzufügen eines neuen zugehörigen Datensatzes verwendet. (CakePHP .... denke SalesForcey Typ Zeug)

• BS Modal 2 wird zum Bearbeiten vorhandener zugehöriger Datensätze verwendet. Der HTML-Inhalt wird aus einem Ajax-Aufruf abgerufen und über jQuery an das DOM angehängt.

• Javascript unterstützt beide Modalitäten, die über Standard-HTML- <script>Tags enthalten sind.

Ich habe festgestellt, dass Haltepunkte nur in Modal 1 ausgelöst werden. Sie funktionieren nicht, wenn der Code auf dem dynamisch hinzugefügten Modal 2 ausgeführt wird, obwohl es ziemlich offensichtlich ist, dass der Code tatsächlich ausgewertet und ausgeführt wird. Warnfelder werden angezeigt, Dinge vom Typ Codey werden ausgeführt und die Ausgabe folgt der im Code festgelegten Logik.

Ich bin nicht tiefer getaucht, um weitere Nachforschungen anzustellen, weil ich unter Zeitdruck stehe, sondern wollte es dort veröffentlichen und der Gemeinschaft etwas zurückgeben.

PS: Ich benutze SO die ganze Zeit, aber dies ist mein erster Beitrag, also mach es mir leicht :-)

Stellen Sie sicher, dass Sie denselben Host in der URL verwenden, die Sie beim Einrichten der Zuordnung verwendet haben. Wenn Sie sich beispielsweise beim http://127.0.0.1/my-appEinrichten und Zuordnen des Arbeitsbereichs befanden, funktionieren Haltepunkte nicht, wenn Sie die Seite über anzeigen http://localhost/my-app. Vielen Dank auch für das Lesen. Siehe meine Antwort auf das Chromium-Problem hier .

Stellen Sie sicher, dass Sie die Javascript-Konsole (oder Quellen) in Ihrem Chrome-Fenster geöffnet haben. Andernfalls wird der Haltepunkt niemals erreicht. Sie können die Javascript-Konsole über das Optionsfeld in der rechten oberen Ecke -> Tools -> Javascript-Konsole öffnen.

Ich hatte ein Problem, bei dem die Haltepunkte von Chrome nichts auslösten. Als ich versuchte, 'Debugger' in meinem Code zu verwenden, konnte ich den Code nur in der VM-Version meines Codes durchgehen. Mein Problem war, dass ich die Ressourcen falsch zugeordnet habe. Re-Mapping hat mein Problem behoben.

Ich hatte einen Minifier, der die debuggerAnweisungen ¯_ (ツ) _ / ¯ streifte

Meine Lösung bestand darin, den lokalen Speicher, den Sitzungsspeicher und die Cookies auf der Registerkarte Anwendungen zu löschen. Danach unterbrach Chrome die Skriptausführung an den in Quellen definierten Haltepunkten.

1. Klicken Sie in Google Chrome auf die Registerkarte Anwendungen
2. Klicken Sie mit der rechten Maustaste auf die URL unter jedem Ordner> Löschen

Screenshot: Registerkarte Anwendungen

Stellen Sie sicher, dass Sie den Haltepunkt in die richtige Quelldatei einfügen. Einige Tools erstellen mehrere Kopien des Codes und wir probieren verschiedene Quelldateien an.

Lösung: Anstatt eine Datei mit einer Verknüpfung wie Ctrl+Poder zu Ctrl+Röffnen, öffnen Sie sie im File Navigator. Auf der Registerkarte Quelle befindet sich links oben ein Symbol dafür. Damit können wir die richtige Quelldatei öffnen.

Wenn Sie also zusätzlich zu Adam Rackis 'Antwort Fehler in Ihrer Javascript-Datei über dem Haltepunkt haben, werden Sie diese nicht erreichen, unabhängig davon, ob Sie sie markieren oder eingeben debugger;.

Hier ist ein Beispiel:

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

Wie ich mit Chrome erlebt habe, müssen wir die Browserkonsole öffnen, damit der Debugger beim Laden der Seite ausgeführt wird.

Fügen Sie dies irgendwo in die Javascript-Datei ein, die Sie ausführen möchten

debugger

Öffnen Sie die Browserkonsole und laden Sie die Seite neu.

Der Debugger wird wie im folgenden Beispielbild ausgeführt

Ich bin mir nicht sicher, wie es funktioniert hat, aber das Drücken von F1 für die Einstellungen und unten rechts das Drücken von "Standardeinstellungen wiederherstellen und neu laden" hat bei mir funktioniert.

Ziemlich späte Antwort, aber keine der oben genannten Fragen hat meinem Fall geholfen und war etwas anderes

Beim Verweisen auf den Javascript-Dateityp fehlte = "Text / Javascript" in der Legacy-Anwendung, an der ich arbeitete

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

unter einem funktionierte und Haltepunkte trafen wie erwartet

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

Ich brauche meine verdammten Haltepunkte! Sehr seltsames Verhalten - der normalerweise rote Fleck in Sources wurde grau; Diese und debugger;Haltepunkte scheinen immer noch zu treffen, werden aber irgendwo in nicht ausführbarem HTML angezeigt.

Nach ein paar Stunden des Hackens von Code wurden die Haltepunkte endlich korrekt getroffen, hatten jedoch mehr oder weniger das Äquivalent von "Hello World" übrig. Hahaha.

Ich hatte also einige serverseitige Daten, die auf der Seite ausgegeben wurden (in meinem Fall in einer @ razor-Anweisung), aber in jedem ähnlichen Fall wäre es dasselbe.

Es gab einige falsch geformte 0A / 0D-Zeichen in der Serverausgabe - der alte Wagen kehrt zurück - was Chrome zu Verwechslungen mit seiner eigenen Zeilennummerierung führte.

Beim Bereinigen des Servers wurde HTML eingefügt, und ich erhielt meinen Haltepunkt.

Nun wollen wir sehen, wie viel von diesem Code ich STRG-Z zurück kann ...

Ich werde noch eine zufällige Antwort hinzufügen, nur weil diese Frage als Antwort auf meine verschiedenen Suchanfragen auftauchte. Ich habe jQuery-Objekte mit öffentlichen und privaten Methoden. Das Muster ist:

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

Wenn ich einen Haltepunkt in eine Zeile innerhalb einer privaten Funktion setze, debuggt Chrome ihn nicht, die Zeile wechselt zur return-Anweisung! Zum Debuggen muss ich also die privaten Funktionen verfügbar machen! Das ist neu für mich heute Morgen (20.08.2020, Version 84.0.4147.125 (Official Build) (64-Bit)). Ich kann nicht glauben, dass ich seit 3 ​​Jahren nicht mehr darauf gestoßen bin.

Dies kann ein Chrome-Fehler sein. Leider bricht Chrome das Debuggen routinemäßig ab. Es hat oft eine Art Speicherverlust und es bricht oder ändert sich oft alle paar Releases.

Das Debuggen mit formatierten Quellen ist derzeit äußerst unzuverlässig.

Es ist möglich, dass Sie auch versuchen, toten Code zu brechen.

Um sicherzugehen, dass es sich nicht um den Browser handelt, sollten Sie auch versuchen, ihn in Firefox zu debuggen.

Ich hatte das gleiche Problem in einer 10K-Zeilendatei. Die Haltepunkte wurden ignoriert,
hartcodierte _debugger-Anweisungen funktionierten, aber sie können nicht umgeschaltet werden und können ärgerlich sein, wenn sie in einer Schleife platziert werden. Meine Lösung, die ein bisschen hackt, aber funktioniert, besteht darin, Folgendes oben in die Datei einzufügen:

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

dann füge ich einen myDebugger () hinzu; Inline, wo ich normalerweise einen Haltepunkt verwenden würde.

Um das Debuggen einzuschalten, gebe ich einfach myDebuggerFlag = true ein. auf der Konsolenlinie. (Sie müssen natürlich zuerst aus myDebugger aussteigen.