Jak zakończyć wykonywanie skryptu podczas debugowania w Google Chrome?

210

W jaki sposób przerywając wykonywanie skryptu, jeśli nie chcę kontynuować, podczas przechodzenia przez kod JavaScript w debugerze Google Chrome? Jedyny sposób, jaki znalazłem, to zamknięcie okna przeglądarki.

Naciśnięcie „Załaduj ponownie tę stronę” uruchamia resztę kodu, a nawet przesyła formularze, jak naciśnięcie F8 „Kontynuuj”.

AKTUALIZACJA :

Po naciśnięciu F5 (Odśwież), gdy skrypt jest wstrzymany:

  • Google Chrome (v22) uruchamia skrypt. Jeśli skrypt prześle żądanie HTTP, zostanie wyświetlona odpowiedź HTTP na to żądanie. Oryginalna strona nie jest odświeżana.
  • IE 9 po prostu zawiesza się. Jednak IE ma opcję „Zatrzymaj debugowanie”, która po naciśnięciu (pod warunkiem, że nie nacisnąłeś F5 wcześniej), nadal uruchamia skrypt poza debuggerem.
  • Firebug zachowuje się identycznie jak Chrome.

Zamykanie, a następnie ponowne otwieranie okna przeglądarki nie zawsze jest kolejnym najłatwiejszym sposobem, ponieważ zabija stan sesji przeglądarki i może to być ważne. Wszystkie punkty przerwania również zostaną utracone.

AKTUALIZACJA (styczeń 2014) :

Odśwież podczas debugowania:

  • Chrome v31: pozwala na uruchamianie skryptów i zatrzymuje się na kolejnych punktach przerwania (ale nie przesyła żądań ajax), a następnie odświeża.
  • IE 11: odświeżanie nic nie robi, ale możesz nacisnąć F5, aby kontynuować.
  • Firefox v26: pozwala na uruchamianie skryptów, ale nie zatrzymuje się na kolejnych punktach przerwania, wysyła żądania ajax, a następnie odświeża.

Rodzaj postępu!

Przejdź do tej samej strony podczas debugowania:

  • Chrome v31: taki sam jak Odśwież.
  • IE 11: skrypty są zakończone, uruchamiana jest nowa sesja przeglądarki (tak samo jak zamykanie i ponowne otwieranie).
  • Firefox v26: nic się nie dzieje.

Również Juacala zasugerował skuteczne obejście tego problemu. Na przykład, jeśli używasz jQuery, uruchomienie delete $ z konsoli zatrzyma wykonywanie po napotkaniu dowolnej metody jQuery. Przetestowałem to we wszystkich powyższych przeglądarkach i mogę potwierdzić, że działa.

AKTUALIZACJA (marzec 2015) :

Wreszcie, po ponad 2 latach i prawie 10 000 wyświetleń, prawidłowa odpowiedź została udzielona przez Alexandra K. Google Chrome ma własnego Menedżera zadań, który może zabić proces tabulacji bez zamykania samej karty, zachowując wszystkie punkty przerwania i inne rzeczy nietknięte.

Poszedłem nawet do BrowserStack.com, aby przetestować go w Chrome v22 i stwierdziłem, że działało to w ten sposób nawet w tym czasie.

Obejście Juacali jest nadal przydatne podczas debugowania w IE lub Firefox.

AKTUALIZACJA (styczeń 2019) :

Chrome Dev Tools w końcu dodał właściwy sposób, aby zatrzymać wykonywanie skryptu, co jest miłe (choć nieco ukryte). Szczegółowe informacje można znaleźć w odpowiedzi Jamesa Gentesa.

srgstm
źródło
12
wpisz debugger;w konsoli narzędzi deweloperskich, a natychmiast uruchomi debugger i zatrzyma skrypt.
Jake
3
Odpowiedź Jamesa Gentesa wydaje się lepszym rozwiązaniem w 2019 r.
Spikolynn,
1
Dlaczego wszyscy mówią o zatrzymaniu skryptu? Chodzi o zakończenie / zerwanie całego kodu „follow / sceduled”.
Andre Elrico,

Odpowiedzi:

188

W Chrome jest „Menedżer zadań”, dostępny przez Shift+ ESClub przez

Menu → Więcej narzędzi → Menedżer zadań

Możesz wybrać zadanie strony i zakończyć je, naciskając przycisk „Zakończ proces”.

Alexander K.
źródło
4
chrome 48spowoduje to ZAMKNIĘCIE narzędzia Dev, a nie zamknie go, otwierając ponownie, widać, że program nadal działa ( tried setInterval())
Abdelouahab
11
Nie widzę „Menedżera zadań” w „Więcej narzędzi”, a Shift + Esc nic nie robi… (Chrome 50, OSX) Shift + ESC działa jednak pod Chrome / Windows…
Michael
2
Wow - chciałem tego od tak dawna i było tam od lat! To najbardziej pomocna odpowiedź StackOverflow, jaką widziałem przez cały rok!
Michael Scheper
4
W systemie Macintosh (Chrome v.63) ta opcja jest wyświetlana w menu „Okno” w trzeciej grupie. Nie ma widocznego skrótu klawiaturowego.
Apollo,
2
To zabije zakładkę
htafoya
105

Od kwietnia 2018 r. Możesz zatrzymać nieskończone pętle w Chrome :

  1. Otwórz panel Źródła w Narzędziach programisty ( Ctrl+ Shift+ I**).
  2. Kliknij przycisk Wstrzymaj , aby wstrzymać wykonywanie skryptu .

Zwróć także uwagę na klawisze skrótów: F8i Ctrl+\

wprowadź opis zdjęcia tutaj

James Gentes
źródło
Taki ukryty klejnot w tym interfejsie użytkownika.
norbert
Odpowiadający ma klucz do tajemnic Wszechświata.
Sam
Skrót jest szczególnie przydatny, gdy masz nieskończenie działający skrypt, który chcesz zatrzymać, aby sprawdzić konsolę. Dzięki.
Aleksiej
@DanDascalescu Mam Chrome 80.0.3987.149 i wygląda tak samo
James Gentes
Może patrzymy na przycisk w różnych stanach wykonania? Moje jest to, że wybrałem bodyelement tutaj na SO, ustawiłem „przerwa na -> modyfikacje poddrzewa”, a następnie kliknąłem gdziekolwiek. Przycisk wygląda jak na zrzucie ekranu, który opublikowałem.
Dan Dascalescu
37

Jednym ze sposobów na to jest pauza w skrypcie, zobacz, jaki kod następuje po tym, gdzie jesteś aktualnie zatrzymany, np .:

var something = somethingElse.blah;

W konsoli wykonaj następujące czynności:

delete somethingElse;

Następnie uruchom skrypt: spowoduje błąd krytyczny podczas próby uzyskania dostępu somethingElse, a skrypt umrze. Voila, zakończyłeś skrypt.

EDYCJA: Pierwotnie usunąłem zmienną. To nie jest wystarczająco dobre. Musisz usunąć funkcję lub obiekt, którego JavaScript próbuje uzyskać dostęp do właściwości.

juacala
źródło
3
you have to delete a function or an objecttaki paskudny hack! (w interfejsie ładnie pasowałby jako przycisk zabicia wszystkich )
Mars Robertson
To dość paskudne, ale nie mogę wymyślić innego sposobu.
juacala
Rok później wracam do tego samego pytania ... I nie mogę tego rozgryźć! Czy istnieje sposób, aby uczynić go bardziej ogólnym?
Mars Robertson
Nie możesz dowiedzieć się, jak zakończyć wykonywanie skryptu? Zawsze byłem w stanie to zrobić. Czy masz przykład, który nie pozwala zabić skryptu w ten sposób?
juacala
1
@Hashim, musisz umieć umieścić punkt przerwania wewnątrz funkcji. Upewnij się więc, że wnętrze funkcji znajduje się w osobnym wierszu od definicji funkcji. W twoim przypadku musisz w konsoli po jej wstrzymaniu wpisać „document.getElementById ('see_older'). ParentNode.removeChild (document.getElementById ('see_older'));”. Wynika to z faktu, że nie masz nic w javascript do złamania. Niestety zmienia to również HTML. Jeśli możesz zmienić kod na „var el = document.getElementById ('see_older'); \ n el.getEl ...”, możesz po prostu zrobić „delete el;” i to go zatrzyma.
juacala
12

Aktualizacja kwietniowa 2020

Od Chrome 80 żadna z obecnych odpowiedzi nie działa. Nie ma widocznego przycisku „Pauza” - musisz długo kliknąć przycisk „Odtwórz”, aby uzyskać dostęp do ikony Stop:

Zatrzymaj wykonywanie skryptu w Chrome DevTools

Dan Dascalescu
źródło
2
Dzięki Bogu! Prawdziwa odpowiedź na pytanie PO.
user1023110
1
@ user1023110: Nie wiem o Bogu, ale proszę bardzo :)
Dan Dascalescu
5

Jeśli napotkasz to podczas korzystania z debuggerinstrukcji,

debugger;

... wtedy myślę, że strona będzie działała wiecznie, dopóki środowisko uruchomieniowe js nie przyniesie wydajności lub do następnej przerwy. Zakładając, że znajdujesz się w trybie „włamanie po błędzie” (przełączanie ikony pauzy), możesz zapewnić, że nastąpi przerwa, wykonując coś takiego:

debugger;throw 1;

lub może wywołać nieistniejącą funkcję:

debugger;z();

(Oczywiście to nie pomaga, jeśli próbują kroku przez funkcje, choć być może można dynamicznie dodawać w sposób throw 1lub z()czy somesuch w panelu Źródła, ctrl-S, aby zapisać, a następnie Ctrl + R, aby odświeżyć ten ... może jednak pominąć jeden punkt przerwania, ale może działać, jeśli jesteś w pętli.)

Jeśli wykonujesz pętlę i spodziewasz się debuggerponownie wywołać instrukcję, możesz po prostu wpisać throw 1zamiast niej.

throw 1;

Następnie, gdy naciśniesz Ctrl-R, zostanie uderzony następny rzut i strona zostanie odświeżona.

(testowane z Chrome v38, około kwietnia 2017 r.)

ninjagecko
źródło
3

Dobre pytanie tutaj. Myślę, że nie można zakończyć wykonywania skryptu. Chociaż nigdy go nie szukałem, od dłuższego czasu korzystam z debuggera Chrome. Zazwyczaj ustawiam punkty przerwania w kodzie javascript, a następnie debuguję fragment kodu, który mnie interesuje. Kiedy kończę debugowanie tego kodu, zwykle po prostu uruchamiam resztę programu lub odświeżam przeglądarkę.

Jeśli chcesz uniemożliwić wykonanie pozostałej części skryptu (np. Z powodu wywoływanych wywołań AJAX), jedyne, co możesz zrobić, to usunąć ten kod z konsoli w locie, zapobiegając w ten sposób tym wywołaniom przed egzekucją , możesz bez problemu wykonać pozostały kod.

Mam nadzieję, że to pomoże!

PS: Próbowałem znaleźć opcję zakończenia wykonywania w niektórych samouczkach / przewodnikach, takich jak poniższe, ale nie mogłem jej znaleźć. Jak powiedziałem wcześniej, prawdopodobnie nie ma takiej opcji.

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
źródło
Pomogłem? Wygląda na to, że nie ma opcji zakończenia, ale aby zapobiec wykonaniu następującego kodu, możesz albo skomentować go wcześniej, albo usunąć następujący kod / wywołać „na żywo” w debuggerze Chrome (ta ostatnia opcja spowoduje, że przycisk Kontynuuj zachowuj się jak zakończenie). Wiem, że nie są to idealne rozwiązania, ale myślę, że są najbardziej akceptowalne. Jakieś komentarze?
Romén Rodríguez-Gil
1
W wielu przypadkach kod, który należy uniemożliwić, znajduje się na stosie wywołań (funkcje, które uzyskają kontrolę po powrocie bieżącej funkcji). Jasne, mogę przejść do edycji funkcji na stosie wywołań, a następnie znaleźć i edytować wszystkie funkcje, które można wywołać asynchronicznie. Jestem pewien, że przeglądanie strony ze skryptem wciąż w stanie wstrzymanym musi być trywialną rzeczą, JEŻELI została wstrzymana w momencie naciśnięcia przycisku Odśwież stronę. Myślę też, że powinno to być oczekiwane zachowanie każdej przeglądarki (niestety tak nie jest).
srgstm
2
Właściwie znalazłem obejście pozwalające na zakończenie wykonywania skryptu !: W chrome, otwieram debugger, aby debugować jedną z moich aplikacji i ustawiam punkt przerwania. Prowadzę stronę. Wykonanie zostaje wstrzymane w punkcie przerwania. Następnie badam problem i zdaję sobie sprawę z przyczyny błędu. Aby zakończyć wykonywanie , klikam przycisk X obok adresu URL (aby zatrzymać ładowanie strony), a następnie kontynuowanie skryptu (F8) spowoduje jego zakończenie. Myślę, że raczej prosty sposób na osiągnięcie tego celu. Co sądzisz o tym?
Romén Rodríguez-Gil
Przycisk X w Chrome jest zastępowany przyciskiem Odśwież po załadowaniu strony, więc nie ma sposobu, aby nacisnąć X (próbowałem również w IE, który ma X cały czas dostępny, ale zawsze się zawiesza). Przetestowałem również twoją sugestię podczas ładowania strony i stwierdziłem, że skrypt nie kończy się po naciśnięciu X, a następnie F8. Jest prawdopodobne, że skrypty, które nie zostały jeszcze załadowane do przeglądarki w momencie naciśnięcia X, nie są ładowane później, ale powinno to być oczywiste.
srgstm
Och, masz rację, to był szybki test i był niereprezentatywny ... Wydaje się, że nie ma rozwiązania.
Romén Rodríguez-Gil
3

Nawiązując do odpowiedzi udzielonej przez @scottndecker na następujące pytanie , chrome udostępnia teraz opcję „wyłącz JavaScript” w Narzędziach programisty:

  • Pionowo ...w prawym górnym rogu
  • Ustawienia
  • I w „Preferencjach” przejdź do sekcji „Debugger” na samym dole i wybierz „Wyłącz JavaScript”

Dobrze, że możesz zatrzymać i uruchomić ponownie, po prostu zaznaczając / odznaczając to.

theFreedomBanana
źródło
1
Jeśli głosujesz za odrzuceniem, ponieważ masz pomieszanie między menu Narzędzi programisty a menu Chrome, jest to bardzo smutne :(
theFreedomBanana
Nie działało dla mnie. Zaznaczam pole Wyłącz JavaScript, ale skrypt nadal działa.
Paul Gorbas,
1

Możesz to zrobić, ale najpierw musisz przygotować kod.

Instrukcje zatrzymywania wykonywania skryptu w Narzędziach programistycznych Google Chrome:

(1) Najpierw przygotuj swój kod, tworząc zmienną globalną :

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

(2) W każdym miejscu, w którym chcesz wyjść, przetestuj wartość tej zmiennej:

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

(3) Wstrzymaj wykonywanie skryptu przed lub przed powyższymi liniami testowymi

(4) Przełącz na konsolę

(5) Typ:

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

(6) Kontynuuj wykonywanie skryptu. Skrypt return falseuruchomi się, gdy wykona test z kroku (2) powyżej


Uwagi:

(A) Ta sztuczka działa ze zmiennymi globalnymi i obiektami, ale nie będzie działać ze zmiennymi lokalnymi. Zauważ, że to:
newVar = 'never used before';
tworzy nową właściwość obiektu okna (działa z powyższą sztuczką), podczas gdy to:
var newVar = 'never used before';
tworzy lokalną zmienną (NIE działa z powyższą sztuczką!)

(B) Tak więc nadal możesz użyć tej sztuczki z już działającym kodem if masz zmienną globalną lub obiekt, który zwróci false, jeśli ma określoną wartość.

(C) W skrócie, możesz użyć sztuczki juacala i usunąć element z DOM (na karcie elementów), który spowoduje błąd javascript. Załóżmy na przykład, że masz kod. var cartype = $('#cartype').val();Jeśli usuniesz element o ID = cartypeprzed tym wierszem kodu, js zepsuje się w tym wierszu. Element ten będzie jednak nadal brakować podczas próby ponownego uruchomienia kodu. Trik opisany powyżej pozwala uruchomić i ponownie uruchomić kod ad infinitum.


Więcej notatek:

(a) Wstaw punkt przerwania do kodu: po prostu wpisz debugger;sam wiersz. Jeśli DevTools jest otwarty, skrypt w tym momencie przejdzie do debuggera. Jeśli DevTools się nie otworzy, kod zignoruje instrukcję.

(b) Chcesz uniknąć przeskakiwania do biblioteki jQuery podczas debugowania kodu? Blackbox to. Zobacz instrukcje dotyczące czarnej skrzynki dla przeglądarki Chrome lub Firefox


Wdzięczność (proszę odwiedzić i głosować):

JavaScript Debugowanie linia po linii za pomocą Google Chrome

Czy można zmienić wartości zmiennych javascript podczas debugowania w Google Chrome?

cssyphus
źródło
2
Any place where you may wish to quit, test the value of this variableTo okropne! Chcę rzucić palenie, gdziekolwiek się teraz znajduję, nie wiem z góry, gdzie to może być!
Michael
Jeśli chcesz włączyć pracę po stronie kodu, jest to najbardziej przyjazny dla użytkownika klient, który próbuje zatrzymać wykonywanie skryptu.
Goose
??? Nie potrzebujesz żadnej zmiennej globalnej. Po prostu kliknij ten przycisk .
Dan Dascalescu
0

Możesz zatrzymać się na dowolnym wzorze XHR, który uważam za bardzo użyteczny podczas debugowania tego rodzaju scenariuszy.

Na przykład podałem punkt przerwania dla wzorca adresu URL zawierającego „/”

wprowadź opis zdjęcia tutaj

Abhi
źródło
0

Jeśli masz nieuczciwą pętlę, wstrzymaj kod w debuggerze Google Chrome (małe „|| przycisk ” na karcie Źródła).

Wróć do Chrome, otwórz „Menedżera zadań” ( Shift+ ESC), wybierz kartę, kliknij przycisk „Zakończ proces”.

Otrzymasz komunikat Snap Aww, a następnie możesz ponownie załadować ( F5).

Jak zauważyli inni, przeładowanie strony w momencie wstrzymania jest tym samym, co ponowne uruchomienie nieuczciwej pętli i może powodować nieprzyjemne zawieszanie się, jeśli debugger również się zablokuje (w niektórych przypadkach prowadzi do ponownego uruchomienia Chrome lub nawet komputera). Debuger potrzebuje przycisku „Stop”. Uwaga: Przyjęta odpowiedź jest nieaktualna, ponieważ niektóre jej aspekty są obecnie najwyraźniej błędne. Jeśli głosujesz na mnie, proszę wyjaśnij :) .

www-0av-Com
źródło
1
Jest lepszy sposób .
Dan Dascalescu
-1

Otwórz kartę źródłową w „Narzędziach programisty”, kliknij numer wiersza w uruchomionym skrypcie, utworzy to punkt przerwania, a debugger tam się zepsuje.

Todd
źródło
-1

Istnieje wiele odpowiednich rozwiązań tego problemu, jak wspomniano powyżej w tym poście, ale znalazłem mały hack, który można wstawić do skryptu lub wkleić w konsoli Chromes (debugger), aby go osiągnąć:

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

Spowoduje to, że wykonanie zostanie wstrzymane po trafieniu F12.

Murtaza Hussain
źródło
Co jeśli (mam nadzieję) nie korzystasz z jQuery?
Dan Dascalescu
następnie użyj czystego Javascript, jak document.addEveneListner .., aby uzyskać zdarzenie keydown ..
Murtaza Hussain