Punkty przerwania debugera javascript Chrome nic nie robią?

Nie mogę znaleźć narzędzia do debugowania Chrome.

Mam chrom w wersji 21.0.1180.60 m.

Kroki, które podjąłem:

1. Nacisnąłem ctrl-shift-i, aby wywołać konsolę.
2. Kliknięto Źródła, a następnie wybierz odpowiedni plik javascript, który chcę debugować.
3. Ustawiam punkty przerwania, w których chcę, aby kod zatrzymywał się, umieszczając niebieski znacznik na rynnie obok linii po lewej stronie.
4. Kliknąłem przycisk na mojej stronie internetowej (która jest stroną renderowaną przez php), który inicjuje kod javascript.
5. Kod został pomyślnie uruchomiony bez zatrzymywania.

Zauważyłem też, że Watch Expressions też nie działają. Powtarza mi, że zmienna, którą chcę obserwować, jest nieokreślona.

Dalsze testy wykazały, że to mój kod powoduje awarię punktu przerwania. Wygląda na to, że kończy się niepowodzeniem w wierszu "$ (" # frmVerification "). Submit (function () {". Nie przechodzi do punktów przerwania wewnątrz tej funkcji ().

Poniżej znajduje się:

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

Nie jestem pewien, dlaczego punkty przerwania nie trafiają, ale jednym z niezawodnych sposobów wejścia do kodu jest wpisanie

debugger;

gdzie chcesz zatrzymać kod, a następnie uruchomić go ponownie z otwartym oknem narzędzi deweloperskich chrome.

Tylko jedna mała rzecz, o której należy pamiętać, pamiętaj, aby posprzątać po zakończeniu i usunąć linie debugera. Jeśli kiedykolwiek uruchomisz pliki JavaScript za pomocą kompresora YUI, istnienie debugger;linii spowoduje błąd.

To późna odpowiedź, ale miałem ten sam problem, ale odpowiedź była inna.

W moim przypadku w moim kodzie było odniesienie do sourceURL:

//@ sourceURL=/Scripts/test.js

Gdy ten plik Javascript jest zminimalizowany i załadowany przez przeglądarkę, zwykle informuje Chrome Dev Tools, gdzie znajduje się niezminimalizowana wersja.

Jeśli jednak debugujesz niezminifikowaną wersję, a ten wiersz istnieje, Chrome Dev Tools odwzorowuje tę ścieżkę sourceURL zamiast „normalnej” ścieżki.

Na przykład, jeśli pracujesz lokalnie na serwerze WWW, to na karcie Źródła w Narzędziach dla deweloperów Chrome ścieżka do danego pliku JS będzie miała postać http://localhost/Scripts/test.js

Jeśli test.js ma to na dole

//@ sourceURL=/Scripts/test.js

wtedy punkty przerwania będą działać tylko wtedy, gdy ścieżka pliku to /Scripts/test.js, a nie w pełni kwalifikowany adres URLhttp://localhost/Scripts/test.js

W Chrome 38, trzymając się mojego przykładu powyżej, jeśli spojrzysz na kartę Źródła, każdy plik się kończy http://localhost/, więc po kliknięciu test.js Chrome ładuje sięhttp://localhost/Scripts/test.js

Możesz umieścić wszystkie punkty przerwania, które chcesz, w tym pliku, a Chrome nigdy nie trafi w żaden z nich. Jeśli umieścisz punkt przerwania w swoim JS, zanim wywoła on jakąkolwiek funkcję w test.js, a następnie wejdziesz do tej funkcji, zobaczysz, że Chrome otworzy nową kartę, której ścieżka to /Scripts/test.js. Umieszczenie punktów przerwania w tym pliku zatrzyma przepływ programu.

Kiedy pozbyłem się @ sourceURLlinii z pliku JS, wszystko znów działa normalnie (tj. Tak, jak można się spodziewać).

Prawdopodobnie ten błąd https://code.google.com/p/chromium/issues/detail?id=278361

Jest to odtworzone w moim Chrome 31.0.1650.57 (oficjalna kompilacja 235101) w systemie Linux.

Ponownie uruchamiam przeglądarkę, aby to naprawić.

Mam podobny problem. Punkty przerwania, w których nie działają, chyba że użyłem debugger;. Naprawiłem mój problem z punktami przerwania za pomocą „Przywróć domyślne i przeładuj”. Znajduje się w Narzędziach dla programistów Chrome, Ustawieniach, Przywróć ustawienia domyślne i załaduj ponownie.

Upewnij się, że skrypt z opcją „debugger”; Oświadczenie w nim nie jest umieszczone w czarnej skrzynce przez Chrome. Możesz przejść do karty Źródła, aby sprawdzić i wyłączyć blackboxing, jeśli tak.

EDYCJA: Dodano zrzut ekranu.

Spotkałem się z tym kilka razy, na początku działa dobrze przez localhost, nagle punkty przerwania nie działają, przełączam się na 127.0.0.1, a potem znowu działa. Nadzieja pomaga.

Napotkałem podobne problemy zarówno w przeglądarce Chrome, jak i Firefox, chociaż może to nie być rozwiązaniem Twojego problemu. Dzielę się tutaj w nadziei, że może to pomóc innym. Spotkałem się z tą sytuacją już wcześniej w innych niepowiązanych projektach, ale nigdy nie rozumiałem dlaczego, dopóki nie pojawiła się ponownie dzisiaj.

Scenariusz:

Mam jedną stronę, która używa dwóch modali bootstrap, które pochodzą z tego samego źródła i jednego zestawu plików javascript (awesome jquery fileupload blueimp).

• BS Modal 1 jest renderowany podczas ładowania strony (przez php) i jest zawsze obecny na stronie. Służy do dodawania nowego powiązanego rekordu. (CakePHP .... myśl o rzeczach typu SalesForcey)

• BS Modal 2 jest używany do edycji istniejących powiązanych rekordów, a jego zawartość html jest pobierana z wywołania ajax i dołączana do DOM za pośrednictwem jQuery.

• Javascript obsługujący oba modale zawarte w standardowych <script>tagach html .

Zauważyłem, że punkty przerwania są wyzwalane tylko na Modalu 1. Nie działają, gdy kod jest wykonywany na dynamicznie dodanym Modalu 2, chociaż jest całkiem oczywiste, że kod jest rzeczywiście oceniany i uruchamiany. Pojawiają się okna alertów, wykonywane są rzeczy typu kodowego, a wyjście jest zgodne z logiką przedstawioną w kodzie.

Nie zanurkowałem głębiej, aby zbadać dalej, ponieważ brakuje mi czasu, ale chciałem go tam umieścić i oddać społeczności.

PS: Cały czas używam SO, ale to jest mój pierwszy post, więc nie przejmuj się :-)

Upewnij się, że używasz tego samego hosta w adresie URL, z którego korzystałeś podczas konfigurowania mapowania. Np. Jeśli byłeś w http://127.0.0.1/my-appmomencie konfigurowania i mapowania obszaru roboczego, punkty przerwania nie będą działać, jeśli przeglądasz stronę za pośrednictwem http://localhost/my-app. Dziękuję również za przeczytanie tego punktu. Zobacz moją odpowiedź na problem z Chromium tutaj .

upewnij się, że otworzyłeś konsolę javascript (lub źródła) w oknie chrome. w przeciwnym razie nigdy nie osiągnie punktu przerwania. konsolę javascript można otworzyć przyciskiem opcji w prawym górnym rogu -> narzędzia -> konsola javascript.

Wystąpił problem polegający na tym, że punkty przerwania Chrome niczego nie uruchamiały. Kiedy próbowałem użyć „debugera” w moim kodzie, mogłem tylko przejść przez kod w wersji mojego kodu maszyny wirtualnej. Mój problem polegał na tym, że niepoprawnie mapowałem zasoby. Ponowne mapowanie rozwiązało mój problem.

Moim rozwiązaniem było wyczyszczenie pamięci lokalnej, pamięci sesji i plików cookie z karty Aplikacje. Następnie Chrome wstrzymywał wykonywanie skryptu w punktach przerwania zdefiniowanych w Źródłach.

1. Kliknij kartę Aplikacje w Google Chrome
2. Kliknij prawym przyciskiem myszy adres URL w każdym folderze> Wyczyść

Zrzut ekranu: karta Aplikacje

Miałem minifier, który usuwał debuggerinstrukcje ¯_ (ツ) _ / ¯

Upewnij się, że umieszczasz punkt przerwania w poprawnym pliku źródłowym. Niektóre narzędzia tworzą wiele kopii kodu, a my próbujemy na innym pliku źródłowym.

Rozwiązanie: Zamiast otwierać plik za pomocą skrótu, takiego jak Ctrl+Plub Ctrl+R, otwórz go w Nawigatorze plików. W zakładce Źródło znajduje się jego ikona w lewym górnym rogu. Za jego pomocą możemy otworzyć poprawny plik źródłowy.

Tak więc, oprócz odpowiedzi Adama Rackisa, jeśli masz błędy w swoim pliku javascript powyżej punktu przerwania, nie osiągniesz go, niezależnie od tego, czy go oflagujesz, czy wstawisz debugger; .

Oto przykład:

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

jak doświadczyłem z Chrome, musimy otworzyć konsolę przeglądarki, aby debugger działał podczas ładowania strony.

umieść to gdzieś w pliku javascript, który chcesz uruchomić

debugger

otwórz konsolę przeglądarki i załaduj ponownie stronę.

debugger będzie działał jak na przykładowym obrazku poniżej

Nie jestem pewien, jak to zadziałało, ale naciśnięcie klawisza F1 w celu uzyskania ustawień iw prawym dolnym rogu przycisku „Przywróć domyślne i przeładuj” działało dla mnie.

Dość późna odpowiedź, ale żadne z powyższych nie pomogło w mojej sprawie i było czymś innym

podczas odwoływania się do pliku javascript type = "text / javascript" brakowało w starszej aplikacji, w której pracowałem

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

poniżej jeden zadziałał, a punkty przerwania osiągały zgodnie z oczekiwaniami

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

Potrzebuję moich cholernych punktów przerwania! Bardzo dziwne zachowanie - zwykle czerwona plama w Źródłach szarzała; te i debugger;punkty przerwania nadal wyglądałyby na trafione, ale byłyby wyświetlane w jakimś niewykonywalnym kodzie HTML.

Po kilku godzinach hakowania kodu punkty przerwania zostały w końcu trafione poprawnie, jednak zostało mniej więcej odpowiednik „Hello World”. Hahaha.

Tak więc na stronie były wyprowadzane dane po stronie serwera (w moim przypadku w instrukcji @razor), ale w każdym podobnym przypadku byłoby tak samo.

Na wyjściu serwera znajdowały się niepoprawnie uformowane znaki 0A / 0D - powrót starego karetki - powodując zamieszanie w przeglądarce Chrome z własną numeracją linii.

Czyszczenie serwera wstrzyknęło HTML i otrzymałem punkt przerwania.

Teraz zobaczmy, ile tego kodu mogę z powrotem CTRL-Z ...

Dodam jeszcze jedną losową odpowiedź tylko dlatego, że to pytanie pojawiło się w odpowiedzi na moje kilka wyszukiwań. Mam obiekty jQuery, które mają metody publiczne i prywatne. Wzór to:

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

Jeśli umieszczę punkt przerwania w linii wewnątrz funkcji prywatnej, Chrome nie będzie go debugować, linia przesunie się w dół do instrukcji return! Więc aby debugować, muszę ujawnić funkcje prywatne! To jest dla mnie nowość dziś rano (20.08.2020, wersja 84.0.4147.125 (oficjalna kompilacja) (64-bitowa)), nie mogę uwierzyć, że nie napotkałem tego od 3 lat.

Może to być błąd przeglądarki Chrome. Niestety Chrome rutynowo przerywa debugowanie. Często ma jakiś wyciek pamięci i często psuje się lub zmienia co kilka wydań.

Debugowanie za pomocą sformatowanych źródeł jest obecnie wyjątkowo zawodne.

Możliwe, że próbujesz też złamać martwy kod.

Aby mieć pewność, że nie jest to przeglądarka, należy również spróbować ją zdebugować w przeglądarce Firefox.

Miałem ten sam problem w pliku linii 10K. Punkty przerwania były ignorowane, na
stałe zakodowane instrukcje _debugger działały, ale nie można ich przełączać i mogą być denerwujące po umieszczeniu w pętli. Moje rozwiązanie, które jest trochę hackem, ale działa, polega na dodaniu następującego elementu na początku pliku:

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

następnie dodaję myDebugger (); inline, gdzie zwykle używałbym punktu przerwania.

aby włączyć debugowanie, wystarczy wpisać myDebuggerFlag = true; w wierszu konsoli. (musisz oczywiście najpierw wyjść z myDebugger.