Pytanie Debugowanie kodu Ajax za pomocą Firebuga


Mam kilka problemów z debugowaniem kodu zwróconego w wywołaniu Ajax - konkretnie, funkcja zwrócona w jsonie (błędy nie zostają uwięzione w Firefoksie) - aż do momentu, w którym rozpocząłem debugowanie tych problemów w Internet Explorerze (myślę, że to problem związany z firefoxem, ponieważ Venkman również nie wykrywa tych błędów) Czy znasz jakiś sposób debugowania kodu zwróconego w jsonie z połączenia Ajax?


EDYCJA 03/04/2009 15:05


Dziękuję wszystkim za twoje odpowiedzi, ale myślę, że nie wyjaśniłem się wystarczająco dobrze. Znam wystarczająco Firebuga, aby wykonać podstawowe debugowanie, ale mój problem pojawia się, gdy pobieram kod w wywołaniu Ajax, które ma z tym problem. Załóżmy, że mamy następujący plik HTML (potrzebujesz prototypu w tym samym folderze, aby działał poprawnie):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="prototype.js"></script>
</head>
<body>
<script>
function ajaxErrorTest()
{
    new Ajax.Request('data.json', {
           'method': 'get',
           'onSuccess': function(data){
           if(data.responseJSON.func)
           data.responseJSON.func();}});
}
</script>
<input type="button" value="test" onclick="ajaxErrorTest();" />
</body>
</html>

a następnie zawartość pliku data.json jest następująca:

{'func':function(){console.log('loaded...');alert('hey');}}

Jeśli załadujesz stronę w przeglądarce i klikniesz przycisk "Testuj" (i wszystko pójdzie dobrze), dostaniesz coś w konsoli i okienko z napisem "hej". Teraz zmień plik data.json na:

{'func':function(){console.log('loaded...');alerts('hey');}}

... i ponownie kliknij przycisk "Testuj" (nie ma potrzeby ponownego ładowania strony ;-) Dostajesz linię konsoli, ale nie ma pola alertu ... i nie ma błędów !!! jest to rodzaj błędów, które próbuję debugować.


21
2018-03-03 15:17


pochodzenie


Rozumiem, że to starzejące się pytanie, ale czy kiedykolwiek znalazłeś rozwiązanie? Mam ten sam problem - ładowanie strony js przy użyciu jQuery (np. $ .GetScript ("aScript.js"), zobacz docs.jquery.com/Ajax/jQuery.getScript) - strona "aScript" nie wydaje się dostępna do debugowania ... - Ed .
Gah, mam to samo pytanie. - Josh
Taki sam problem! . Każdy znalazł rozwiązania - Sachin Chavan
dlaczego miałbyś uruchomić funkcję, którą uzyskujesz zdalnie: \ - shevski


Odpowiedzi:


Spróbuj kliknąć panel "Konsola" (jest to karta) i włączyć go. Przekonasz się, że wszystkie żądania HTTP zostaną przechwycone wraz z wszelkimi informacjami, które zawierają. Używam tego w celu wyświetlenia dowolnego JSON przechowywanego w żądaniu, jak również wszelkich błędów (500/404 / etc).

Pamiętaj też, że musisz włączyć panel konsoli na poziomie domeny. Zazwyczaj istnieją trzy podzakładki: nagłówki, posty i odpowiedzi. Zwykle używam kart post / response, gdy debuguję moją AJAX.


18
2018-03-03 15:27



+1 Chciałem tylko wspomnieć o netach, a zakładki skryptów zawsze były dobre dla debugowania ajaxa dla mnie - annakata


Prawdopodobnie chcesz użyć zakładka Net i filtruj tylko żądania XMLHttpRequests (XHR).

Dodatkowe wskazówki:

  • nie wahaj się console.dir (yourObject) w kodzie lub bezpośrednio w panelu konsoli. Da ci to pełny stan i właściwości twojego obiektu.
  • sprawdź nagłówki HTTP żądania / odpowiedzi; czasami jest to tylko kwestia kodowania.
  • jeśli nie wiesz, co zdarzenie / działanie użytkownika wywołało to wywołanie XHR, możesz dodać console.trace () tuż przed twoją rozmową AJAX. W ten sposób otrzymasz pełny stos połączeń.

Edytować:

Kod wykonany w innym kontekście

Jedyny sposób, w jaki wymyśliłem to otwieranie kodu za pomocą (brzydkiego) try / catch. Chyba dlatego, że kod jest wykonywany w innym kontekst javascript

<script>
function ajaxErrorTest()
{
    new Ajax.Request('data.json', {
           'method': 'get',
           'onSuccess': function(data){

           try{
             if(data.responseJSON.func)
             data.responseJSON.func();}});
           } catch (err) {
             console.dir(err);
           }
}
</script>

Ten kod wyświetla szczegółowy komunikat o błędzie:

ReferenceError: alerts is not defined

Naprawdę wątpię, aby zmiana kontekstu wykonania rozwiązała problem. Nie wiem jak to zrobić z prototypem, ale z jquery można to zrobić łatwo:

$.ajax({
  url: "test.html",
  context: document.body,
  success: function(){
    $(this).addClass("done");
  }
});

7
2018-03-03 16:04



FYI: link do strony konsoli Firebug został zmieniony na getfirebug.com/wiki/index.php/Console_API - Niels R.


Nie jestem pewien, czy ten problem dotyczy rzeczywistego JSON, który jest pobierany. Czy możesz spróbować rzucić błąd bezpośrednio w swoje onSuccess obsługi i zobaczyć, czy pojawia się w konsoli Firebug? Coś takiego:

onSuccess: function() { alerts('hey'); }

W takim przypadku problem powinien być naprawiony w Firebug 1.7.


1
2018-05-11 07:29





Chciałbym użyć kombinacji zakładek net / console w firefox.

Skopiuj wyniki json z zakładki Net w przeglądarce Firefox.

Następnie wklej wyniki do zmiennej w konsoli i spróbuj wykonać funkcję obrażającą.

W tym przypadku wkleiłem to:

var x = {'func':function(){console.log('loaded...');alerts('hey');}}
x.func();

Kiedy to uruchomię, firebug daje mi ten błąd. ReferenceError: alerty nie są zdefiniowane


1
2018-05-11 22:52





Jak wspomnieli inni, zobacz zwrócony kod JSON / Javascript przez rozszerzenie adresu URL AJAX w zakładce Console.

Następnie, jeśli skopiujesz to do panelu run / eval zakładki Console (w prawym dolnym rogu znajduje się strzałka w górę / dół, kliknięcie w górę zmieni ją w obszar tekstowy po prawej stronie, kliknięcie w dół daje pojedynczą linię biegnącą wzdłuż dół).

Jeśli twoje połączenie Ajax zwraca: function(){alert("hello")}

Następnie możesz użyć czegoś takiego:

x = eval('function(){alert("hello")}')
x();

Umożliwi to wykonanie zwróconego ajaxu.

Aby debugować za pomocą punktów przerwania, użyj widoku HTML, aby utworzyć znacznik (używając widoku HTML Firebug), a następnie po prostu wklej kod do funkcji w tym znaczniku. Następnie można ustawić punkty przerwania i zwolnić je, wywołując poprzednią funkcję z panelu "Uruchom".

Jeśli to działa dobrze, to wyraźnie istnieje błąd poza twoją kontrolą, ale możesz po prostu obejść to, wysyłając json z powrotem jako tekst / zwykły, przypisując go do zmiennej, a następnie oceniając.


1
2018-05-12 12:29





Ten jest prosty, zawsze używam SKRZYPEK do debugowania moich wywołań ajaxowych.

Fiddler to Web Debugging Proxy, który   rejestruje cały ruch HTTP (S) między twoimi   komputer i Internet. Skrzypek   pozwala sprawdzić wszystkie HTTP (S)   ruch, ustaw punkty przerwania i "skrzypce"   z danymi przychodzącymi lub wychodzącymi.   Fiddler zawiera potężny   oparty na zdarzeniach podsystem skryptów, oraz   można rozszerzyć za pomocą dowolnego .NET   język.


1
2018-05-12 13:15





Używam debuggera HTTP Proxy zwanego fiddler, który zawsze działał dobrze w celu debugowania moich problemów z AJAX. Przechwytuje wszystkie żądania HTTP i odpowiedzi, które możesz wyświetlić. Jest swobodnie dostępny od http://www.fiddlertool.com/


0
2018-03-03 15:26





błąd, który próbujesz usunąć, jest dość widoczny na rodzimej konsoli Firefox. to jest: "narzędzia" - "konsola błędów"
oczywiście, widzisz to po nim, ale z błędnym numerem linii (nieskończone podobieństwo)


0
2018-05-12 13:59