Wie kann ich die Skriptausführung beim Debuggen in Google Chrome beenden?

210

Wie kann ich beim Durchlaufen von JavaScript-Code im Google Chrome-Debugger die Skriptausführung beenden, wenn ich nicht fortfahren möchte? Ich habe nur das Browserfenster geschlossen.

Durch Drücken von "Diese Seite neu laden" wird der Rest des Codes ausgeführt und es werden sogar Formulare gesendet, als ob Sie F8 "Weiter" drücken würden.

UPDATE :

Wenn Sie F5 (Aktualisieren) drücken, während ein Skript angehalten ist:

  • Google Chrome (v22) führt das Skript aus. Wenn das Skript eine HTTP-Anforderung sendet, wird die HTTP-Antwort für diese Anforderung angezeigt. Die Originalseite wird nicht aktualisiert.
  • IE 9 friert nur ein. IE hat jedoch eine Option "Debugging beenden", die das Skript außerhalb des Debuggers weiterhin ausführt, wenn sie gedrückt wird (vorausgesetzt, Sie haben zuvor nicht F5 gedrückt).
  • Firebug verhält sich identisch mit Chrome.

Das Schließen und anschließende Öffnen des Browserfensters ist nicht immer der nächst einfachere Weg, da dadurch der Sitzungsstatus des Browsers beendet wird. Dies kann wichtig sein. Alle Ihre Haltepunkte gehen ebenfalls verloren.

UPDATE (Januar 2014) :

Beim Debuggen aktualisieren:

  • Chrome v31: Ermöglicht die Ausführung von Skripten und stoppt an weiteren Haltepunkten (sendet jedoch keine Ajax-Anforderungen) und wird dann aktualisiert.
  • IE 11: Aktualisieren bewirkt nichts, aber Sie können F5 drücken, um fortzufahren.
  • Firefox v26: Ermöglicht die Ausführung von Skripten, stoppt jedoch nicht an weiteren Haltepunkten, sendet Ajax-Anforderungen und wird dann aktualisiert.

Art von Fortschritt!

Navigieren Sie beim Debuggen zur gleichen Seite:

  • Chrome v31: wie Aktualisieren.
  • IE 11: Skripte werden beendet, neue Browsersitzung wird gestartet (wie beim Schließen und erneuten Öffnen).
  • Firefox v26: nichts passiert.

Auch Juacala schlug eine effektive Problemumgehung vor. Wenn Sie beispielsweise jQuery verwenden, wird durch Ausführen von delete $ from console die Ausführung gestoppt, sobald eine jQuery-Methode gefunden wird. Ich habe es in allen oben genannten Browsern getestet und kann bestätigen, dass es funktioniert.

UPDATE (März 2015) :

Nach über 2 Jahren und fast 10.000 Ansichten wurde die richtige Antwort von Alexander K. gegeben. Google Chrome verfügt über einen eigenen Task-Manager, der einen Tab-Prozess beenden kann, ohne den Tab selbst zu schließen, wobei alle Haltepunkte und andere Elemente intakt bleiben.

Ich ging sogar bis zu BrowserStack.com, um es in Chrome v22 zu testen, und stellte fest, dass dies auch zu diesem Zeitpunkt so funktionierte.

Die Problemumgehung von Juacala ist beim Debuggen in IE oder Firefox weiterhin hilfreich.

UPDATE (Januar 2019) :

Chrome Dev Tools hat endlich einen geeigneten Weg hinzugefügt, um die Skriptausführung zu stoppen, was nett ist (obwohl ein bisschen versteckt). Einzelheiten finden Sie in der Antwort von James Gentes.

srgstm
quelle
12
Geben Sie debugger;in die dev tools console ein und es werden sofort Dinge in den Debugger gestellt und das Skript gestoppt.
Jake
3
James Gentes Antwort scheint eine bessere Lösung im Jahr 2019 zu sein
Spikolynn
1
Warum reden alle darüber, das Skript zu stoppen? Hier geht es darum, den gesamten kommenden "folgenden / geplanten" Code zu beenden / zu brechen.
Andre Elrico

Antworten:

188

In Chrome gibt es einen "Task-Manager", auf den über Shift+ ESCoder über zugegriffen werden kann

Menü → Weitere Tools → Task-Manager

Sie können Ihre Seitenaufgabe auswählen und beenden, indem Sie auf die Schaltfläche "Prozess beenden" klicken.

Alexander K.
quelle
4
chrome 48Dies wird nur das Dev-Tool schließen und nicht beenden, es erneut öffnen. Sie können sehen, dass das Programm noch läuft ( tried setInterval())
Abdelouahab
11
Ich sehe "Task Manager" nicht unter "Weitere Tools" und Shift + Esc macht nichts ... (Chrome 50, OSX) Shift + ESC funktioniert allerdings unter Chrome / Windows ...
Michael
2
Wow - ich wollte das schon so lange und es ist schon seit Jahren da! Dies ist die hilfreichste StackOverflow-Antwort, die ich das ganze Jahr gesehen habe!
Michael Scheper
4
Unter Macintosh (Chrome v.63) wird diese Option im Menü "Fenster" in der dritten Gruppe angezeigt. Es ist keine Tastenkombination erkennbar.
Apollo
2
Dies wird die Registerkarte töten
htafoya
105

Ab April 2018 können Sie Endlosschleifen in Chrome stoppen :

  1. Öffnen Sie das Bedienfeld Quellen in den Entwicklertools ( Ctrl+ Shift+ I**).
  2. Klicken Sie auf die Pause - Taste , um die Skriptausführung Pause .

Beachten Sie auch die Tastenkombinationen: F8und Ctrl+\

Geben Sie hier die Bildbeschreibung ein

James Gentes
quelle
Solch ein verstecktes Juwel auf dieser Benutzeroberfläche.
Norbert
Der Antwortende hat einen Schlüssel zu den Geheimnissen des Universums.
Sam
Die Verknüpfung ist besonders nützlich, wenn Sie ein endlos ausgeführtes Skript haben, das Sie anhalten möchten, um die Konsole zu überprüfen. Vielen Dank.
Alexei
@ DanDascalescu Ich habe Chrome 80.0.3987.149 und es sieht genauso aus
James Gentes
Vielleicht schauen wir uns den Knopf in verschiedenen Ausführungszuständen an? Meins ist, dass ich das bodyElement hier auf SO ausgewählt, eine "Pause auf -> Teilbaummodifikationen" gesetzt und dann überall geklickt habe. Die Schaltfläche sieht aus wie in dem Screenshot, den ich gepostet habe.
Dan Dascalescu
37

Eine Möglichkeit, dies zu tun, besteht darin, das Skript anzuhalten. Sehen Sie sich an, welcher Code dort folgt, wo Sie gerade gestoppt sind, z.

var something = somethingElse.blah;

Gehen Sie in der Konsole wie folgt vor:

delete somethingElse;

Spielen Sie dann das Skript ab: Es wird einen schwerwiegenden Fehler verursachen, wenn versucht wird, darauf zuzugreifen somethingElse , und das Skript stirbt ab. Voila, du hast das Skript beendet.

EDIT: Ursprünglich habe ich eine Variable gelöscht. Das ist nicht gut genug. Sie müssen eine Funktion oder ein Objekt löschen, von dem JavaScript versucht, auf eine Eigenschaft zuzugreifen.

Juacala
quelle
3
you have to delete a function or an objectso ein böser Hack! (in der Benutzeroberfläche würde es gut passen, um alle Knöpfe zu töten )
Mars Robertson
Es ist ziemlich böse, aber ich kann mir keinen anderen Weg vorstellen.
Juacala
Ein Jahr später kehre ich zu derselben Frage zurück ... Und ich kann es nicht herausfinden! Gibt es eine Möglichkeit, es allgemeiner zu gestalten?
Mars Robertson
Sie können nicht herausfinden, wie Sie die Skriptausführung beenden können? Das habe ich immer geschafft. Haben Sie ein Beispiel, mit dem Sie das Skript nicht auf diese Weise beenden können?
Juacala
1
@ Hashim, Sie müssen in der Lage sein, einen Haltepunkt innerhalb der Funktion zu setzen. Stellen Sie daher sicher, dass sich das Innere der Funktion in einer von der Funktionsdefinition getrennten Zeile befindet. In Ihrem Fall müssen Sie in der Konsole nach dem Anhalten "document.getElementById ('see_older'). ParentNode.removeChild (document.getElementById ('see_older'));" eingeben. Dies liegt daran, dass Sie in Javascript nichts zum Brechen haben. Leider ändert dies auch den HTML-Code. Wenn Sie den Code in "var el = document.getElementById ('see_older'); \ n el.getEl ..." ändern können, können Sie einfach "delete el;" und das wird es aufhalten.
Juacala
11

2020 April Update

Ab Chrome 80 funktioniert keine der aktuellen Antworten. Es ist keine Schaltfläche "Pause" sichtbar. Sie müssen lange auf die Schaltfläche "Wiedergabe" klicken, um auf das Stoppsymbol zuzugreifen:

Beenden Sie die Skriptausführung in Chrome DevTools

Dan Dascalescu
quelle
2
Danke Gott! Eine echte Antwort auf die Frage des OP.
user1023110
1
@ user1023110: Ich weiß nichts über Gott, aber du bist willkommen :)
Dan Dascalescu
5

Wenn Sie dies bei der Verwendung der debuggerAnweisung feststellen,

debugger;

... dann denke ich, dass die Seite für immer weiter läuft, bis die js-Laufzeit nachgibt oder die nächste Pause. Angenommen, Sie befinden sich im Break-on-Error-Modus (Umschalten des Pause-Symbols), können Sie sicherstellen, dass eine Unterbrechung auftritt, indem Sie stattdessen Folgendes tun:

debugger;throw 1;

oder rufen Sie eine nicht vorhandene Funktion auf:

debugger;z();

(Natürlich hilft dies nicht, wenn Sie versuchen, Funktionen zu durchlaufen, obwohl Sie möglicherweise dynamisch ein throw 1oder z()oder etwas im Quellenbedienfeld hinzufügen , Strg-S zum Speichern und Strg-R zum Aktualisieren ... dies kann jedoch einen Haltepunkt überspringen, funktioniert aber möglicherweise, wenn Sie sich in einer Schleife befinden.)

Wenn Sie eine Schleife ausführen und erwarten, dass die debuggerAnweisung erneut ausgelöst wird, können Sie throw 1stattdessen einfach eingeben.

throw 1;

Wenn Sie dann Strg-R drücken, wird der nächste Wurf ausgeführt und die Seite wird aktualisiert.

(getestet mit Chrome v38, circa April 2017)

Ninjagecko
quelle
3

Gute Frage hier. Ich denke, Sie können die Skriptausführung nicht beenden. Obwohl ich nie danach gesucht habe, benutze ich den Chrome-Debugger schon ziemlich lange bei der Arbeit. Normalerweise setze ich Haltepunkte in meinem Javascript-Code und debugge dann den Teil des Codes, an dem ich interessiert bin. Wenn ich mit dem Debuggen dieses Codes fertig bin, führe ich normalerweise nur den Rest des Programms aus oder aktualisiere den Browser.

Wenn Sie verhindern möchten, dass der Rest des Skripts ausgeführt wird (z. B. aufgrund von AJAX-Aufrufen, die ausgeführt werden sollen) , können Sie diesen Code nur im laufenden Betrieb in der Konsole entfernen und so diese Aufrufe verhindern Wenn Sie nicht ausgeführt werden , können Sie den verbleibenden Code problemlos ausführen.

Ich hoffe das hilft!

PS: Ich habe in einigen Tutorials / Anleitungen wie den folgenden versucht, eine Option zum Beenden der Ausführung zu finden, konnte sie jedoch nicht finden. Wie ich bereits sagte, gibt es wahrscheinlich keine solche Option.

http://www.codeproject.com/Articles/273129/Beginner-Guide-to-Page-and-Script-Debugging-with-C

http://www.nsbasic.com/app/tutorials/TT10.htm

Romén Rodríguez-Gil
quelle
Habe ich geholfen Es scheint, dass es keine Beendigungsoption gibt, aber um die Ausführung des folgenden Codes zu verhindern, können Sie ihn entweder vorher kommentieren oder den folgenden Code löschen / "live" im Chrome-Debugger aufrufen (diese letztere Option macht die Schaltfläche "Weiter" benimm dich wie ein Termin). Ich weiß, dass sie keine idealen Lösungen sind, aber ich denke, sie sind die akzeptabelsten. Irgendwelche Kommentare?
Romén Rodríguez-Gil
1
In vielen Fällen befindet sich der Code, dessen Ausführung verhindert werden muss, im Aufrufstapel (die Funktionen, die nach der Rückkehr der aktuellen Funktion gesteuert werden). Klar, ich kann Funktionen im Aufrufstapel bearbeiten und dann alle Funktionen finden und bearbeiten, die möglicherweise asynchron aufgerufen werden. Ich bin sicher, dass es für einen Browser eine triviale Sache sein muss, eine Seite zu aktualisieren, während sich das Skript noch im angehaltenen Zustand befindet, wenn es zum Zeitpunkt des Drücken der Schaltfläche "Seitenaktualisierung" angehalten wurde. Ich denke auch, dass es ein erwartetes Verhalten für jeden Browser sein sollte (leider nicht).
srgstm
2
Eigentlich habe ich eine Problemumgehung gefunden, um die Beendigung der Skriptausführung zu erreichen!: In Chrome öffne ich den Debugger, um eine meiner Anwendungen zu debuggen, und setze einen Haltepunkt. Ich starte die Seite. Die Ausführung wird am Haltepunkt angehalten. Dann untersuche ich das Problem und stelle fest, was den Fehler verursacht. Um die Ausführung zu beenden, klicke ich auf die X-Schaltfläche neben der URL (um das Laden der Seite zu stoppen) und wenn das Skript fortgesetzt wird (F8), wird es beendet. Ich denke, es ist ein ziemlich einfacher Weg, dies zu erreichen. Was denkst du über diesen?
Romén Rodríguez-Gil
Die X-Schaltfläche in Chrome wird nach dem Laden einer Seite durch die Schaltfläche "Aktualisieren" ersetzt, sodass Sie anschließend nicht mehr auf X klicken können (ich habe es auch im IE versucht, in dem X ständig verfügbar ist, der jedoch immer einfriert). Ich habe Ihren Vorschlag auch beim Laden der Seite getestet und festgestellt, dass das Skript nach Drücken von X und dann F8 nicht beendet wird. Es ist wahrscheinlich, dass die Skripte, die zum Zeitpunkt des Drückens von X noch nicht in den Browser geladen wurden, danach nicht geladen werden, aber das sollte offensichtlich sein.
srgstm
Oh, Sie haben Recht, es war ein schneller Test und war nicht repräsentativ ... Dann scheint es keine Lösung zu geben.
Romén Rodríguez-Gil
3

Unter Bezugnahme auf die Antwort von @scottndecker auf die folgende Frage bietet Chrome jetzt unter Entwicklertools die Option "JavaScript deaktivieren":

  • Vertikal ...oben rechts
  • die Einstellungen
  • Gehen Sie unter "Einstellungen" zum Abschnitt "Debugger" ganz unten und wählen Sie "JavaScript deaktivieren".

Gut, dass Sie anhalten und erneut ausführen können, indem Sie es aktivieren / deaktivieren.

theFreedomBanana
quelle
1
Wenn Sie abstimmen, weil Sie zwischen dem Developer Tools-Menü und dem Chrome-Menü verwechselt werden, ist dies sehr traurig :(
theFreedomBanana
Hat bei mir nicht funktioniert. Ich habe das Kontrollkästchen JavaScript deaktivieren aktiviert, aber das Skript wird einfach weiter ausgeführt.
Paul Gorbas
1

Sie können es tun, aber Sie müssen zuerst Ihren Code vorbereiten.

Anweisungen zum Anhalten der Skriptausführung in den Google Chrome Dev Tools:

(1) Bereiten Sie zuerst Ihren Code vor, indem Sie eine globale Variable erstellen :

var devquit=0;
$(document).ready({
    //the rest of your code

(2) Testen Sie den Wert dieser Variablen an jedem Ort, an dem Sie möglicherweise beenden möchten:

//Lotsa code
if (devquit > 0) return false;

(3) Unterbrechen Sie die Ausführung des Skripts an oder vor den obigen Testzeilen.

(4) Wechseln Sie zur Konsole

(5) Typ:

> devquit
0
> devquit=1   <=== only this line is necessary
> devquit
1

(6) Setzen Sie die Skriptausführung fort. Das Skript wird ausgeführt, return falsewenn der Test aus Schritt (2) oben ausgeführt wird


Anmerkungen:

(A) Dieser Trick funktioniert mit globalen Variablen und Objekten, aber nicht mit lokalen Variablen. Beachten Sie Folgendes:
newVar = 'never used before';
Erstellt eine neue Eigenschaft des Fensterobjekts (funktioniert mit dem obigen Trick), während dies:
var newVar = 'never used before';
eine lokale Variable erstellt (funktioniert NICHT mit dem obigen Trick!)

(B) Sie können diesen Trick also weiterhin mit bereits ausgeführtem Code verwenden wenn Sie entweder eine globale Variable oder ein Objekt haben, das false zurückgibt, wenn es einen bestimmten Wert hat.

(C) Zur Not können Sie den Trick von Juacala verwenden und ein Element aus dem DOM (auf der Registerkarte Elemente) löschen, das einen Javascript-Fehler verursacht. Angenommen, Sie haben Code. var cartype = $('#cartype').val();Wenn Sie das Element mit ID = cartypevor dieser Codezeile löschen, wird das js in dieser Zeile unterbrochen. Das Element fehlt jedoch weiterhin, wenn Sie versuchen, den Code erneut auszuführen.Mit dem oben beschriebenen Trick können Sie den Code ad infinitum ausführen und erneut ausführen .


Weitere Hinweise:

(a) Haltepunkt in Code einfügen: Geben Sie einfach debugger;eine Zeile für sich ein. Wenn DevTools geöffnet ist, springt das Skript zu diesem Zeitpunkt in den Debugger. Wenn DevTools nicht geöffnet wird, ignoriert der Code die Anweisung.

(b) Möchten Sie vermeiden, beim Debuggen von Code in die jQuery-Bibliothek zu springen? Blackbox es. Siehe Blackbox-Anweisungen für Chrome - oder - für Firefox


Dankbarkeit (bitte besuchen und abstimmen):

Javascript Debugging Zeile für Zeile mit Google Chrome

Ist es möglich, Javascript-Variablenwerte beim Debuggen in Google Chrome zu ändern?

Cssyphus
quelle
2
Any place where you may wish to quit, test the value of this variableDas ist schrecklich! Ich möchte aufhören, wo immer ich gerade bin, ich weiß nicht im Voraus, wo das sein könnte!
Michael
Wenn Sie bereit sind, die Arbeit auf der Codeseite zu erledigen, ist dies die benutzerfreundlichste Funktion auf dem Client, der versucht, die Skriptausführung zu stoppen.
Gans
??? Sie benötigen keine globale Variable. Klicken Sie einfach auf diese Schaltfläche .
Dan Dascalescu
0

Sie können bei jedem XHR-Muster pausieren, das ich beim Debuggen solcher Szenarien sehr nützlich finde.

Zum Beispiel habe ich einen Haltepunkt für ein URL-Muster angegeben, das "/" enthält.

Geben Sie hier die Bildbeschreibung ein

Abhi
quelle
0

Wenn Sie eine Rogue-Schleife haben, halten Sie den Code im Google Chrome-Debugger an (der kleine "|| Schaltfläche " auf der Registerkarte "Quellen").

Wechseln Sie zurück zu Chrome selbst, öffnen Sie "Task-Manager" ( Shift+ ESC), wählen Sie Ihre Registerkarte aus und klicken Sie auf die Schaltfläche "Prozess beenden".

Sie erhalten die Aww Snap-Nachricht und können dann neu laden ( F5).

Wie andere angemerkt haben, entspricht das Neuladen der Seite zum Zeitpunkt des Anhaltens dem Neustart der Rogue-Schleife und kann zu unangenehmen Abstürzen führen, wenn der Debugger dann auch gesperrt wird (in einigen Fällen führt dies zum Neustart von Chrome oder sogar des PCs). Der Debugger benötigt eine "Stop" -Taste. Nb: Die akzeptierte Antwort ist insofern veraltet, als einige Aspekte jetzt offensichtlich falsch sind. Wenn Sie mich abstimmen, erklären Sie bitte :) .

www-0av-Com
quelle
1
Es gibt einen besseren Weg .
Dan Dascalescu
-1

Öffnen Sie die Registerkarte "Quelle" in "Entwicklertools", klicken Sie in einem laufenden Skript auf eine Zeilennummer. Dadurch wird ein Haltepunkt erstellt und der Debugger wird dort unterbrochen.

Todd
quelle
-1

Es gibt viele geeignete Lösungen für dieses Problem, wie oben in diesem Beitrag erwähnt, aber ich habe einen kleinen Hack gefunden, der in das Skript eingefügt oder in die Chromes-Konsole (Debugger) eingefügt werden kann, um dies zu erreichen:

jQuery(window).keydown(function(e) { if (e.keyCode == 123) debugger; });

Dies führt dazu, dass die Ausführung angehalten wird, wenn Sie drücken F12.

Murtaza Hussain
quelle
Was ist, wenn Sie (hoffentlich) jQuery nicht verwenden?
Dan Dascalescu
Verwenden Sie dann reines Javascript wie document.addEveneListner .., um das Keydown-Ereignis zu erhalten ..
Murtaza Hussain