Debugowanie aplikacji AJAX za pomocą FirePHP

To jest tekst z kategorii Wpisy archiwalne.

We wpisie na temat podstaw Firebuga zapowiedziałem przyjrzenie się bliżej niektórym funkcjom i wtyczkom. I właśnie teraz to zrobimy.

Za pomocą Firebuga uzbrojonego w FirePHP (i FireQuery, ale to nie będzie miało aż takiego znaczenia) naprawimy prostą aplikację AJAXową – konkretnie funkcjonalność sprawdzenia dostępności loginu przy rejestracji.

Aplikacja powstała w oparciu o Zend Framework z wykorzystaniem jQuery. Użycie frameworków sprawia, że pisanie aplikacji jest bardzo proste i szybkie (choć okupione wcześniejszą nauką frameworka). Dodatkowo, dzięki obsłudze AJAXa w jQuery, sprawa będzie jeszcze prostsza.

Ale żeby nie było tak kolorowo, zasiałem do aplikacji pewien błąd. Spójrzmy, jak przebiegało debugowanie tej aplikacji, a za chwilę jeszcze kilka słów na ten temat.

Jak już wspomniałem, błąd został zasiany, aby pokazać prawdziwe debugowanie, a nie tylko gdybać. Oczywiście to, że znałem przyczynę błędu uprościło debugowanie 😉 ale nadal zobaczyliśmy wszystkie ważne etapy – błędne działanie, wstawienie elementów diagnostycznych, diagnozę i naprawę.

Ważne fragmenty kodu

Konfiguracja w pliku application.ini

Aby móc korzystać z FirePHP należy wyposażyć Firebuga w odpowiednią wtyczkę, ale także dostosować serwer do wysyłania odpowiednich danych. W Zend Framework to bardzo proste, co widać na filmie. Przy wykorzystaniu innych frameworków lub nie korzystaniu z frameworka w ogóle, odsyłam na stronę http://www.firephp.org/ po więcej informacji

resources.db.params.profiler.enabled  = true
resources.db.params.profiler.class  = Zend_Db_Profiler_Firebug
resources.log.firebug.writerName = "Firebug"

WAŻNE – w przeciwieństwie do tego, co widać na screencascie, nie należy tak konfigurować środowiska produkcyjnego. Więcej na temat konfiguracji środowiska w cyklu nt Zend Framework

Bootstrap ZF – inicjalizacja loggera

protected function _initLog() {
    if ($this->hasPluginResource('log')) {
        $log = $this->getPluginResource('log')->getLog();
        Zend_Registry::set('log', $log);
    }
}

Szablon kodu w NetBeans – wywołanie loggera

Zend_Registry::get('log')->debug($result);

Logowanie do konsoli Firebuga z poziomu JavaScript

console.log(dane);

Inne poziomy logowania błędów to console.debug, console.info, console.warn i console.error.

Ajax jQuery

$(function(){
    $('#login').blur(function(){ //blur to opuszczenie pola formularza
        $.ajax({
            'url' : '/users/isavaliable', //adres
            'type' : 'post', //typ żądania
            'dataType' : 'json', //typ zwracanych danych
            'data' : {
                'login' : $('#login').val() //dane wysyłane, w tym wypadku, POSTem
            },
            'success' : function(response){ //funkcja obsługująca odpowiedź o statusie 200
                if (response.success){ //tutaj success to pole odpowiedzi sformułowanej w PHP
                    $('#login').css('border-color', 'green');
                    $('#submit').attr('disabled', false);
                } else {
                    $('#login').css('border-color', 'red');
                    $('#submit').attr('disabled', true);
                }
            }
        })
    })
});

W tym ostatnim kodzie, prawdopodobnie lepsze od użycia styli byłoby nadanie odpowiednich klas – będzie to czystsze pod względem semantyki strony.

4 myśli nt. „Debugowanie aplikacji AJAX za pomocą FirePHP

  1. Hey, nie ma Ciebie w domu, to spytam tu 🙂

    Dlaczego do `$.ajax’ przekazujesz obiekt, w którym każda właściwość jest objęta apostrofem? Przypadek, czy jakiś ciekawy feature z tego wynikający? 🙂

    • Apostrofy (mogłyby być też cudzysłowy) to celowy zabieg – taki jest poprawny sposób zapisu obiektu.
      Warto zwrócić uwagę, że autorzy dokumentacji jQuery nic sobie z tego nie robią i twardo stosują nazwy właściwości bez otaczania apostrofem/cudzysłowem.
      Co ciekawe, taki niepoprawny sposób też będzie działał (dopóki nie wstawimy do nazwy spacji, ale po co tam komu spacja?)

  2. Uściślając, nie musi być. Przynajmniej nie zawsze 🙂

    Jeśli nazwa pola w obiekcie jest poprawną nazwą zmiennej (zaczyna się od litery albo podkreślenia, nie ma spacji, ukośników, i innych zakazanych znaków, itp.) to można pisać _bez_ apostrofów / cudzysłowów.

    Jeśli nazwa pola jest niepoprawną nazwą zmiennej (np. „ala ma kota” – też takie pole może być, nie możemy jednak odwoływać się do niej za pomocą notacji kropkowej, czyli nie będzie działać `obj.ala ma kota’, ani `obj.”ala ma kota”‚. Należy się odwoływać `obj[„ala ma kota”]’, w przypadku, gdyby to była metoda: `obj[„xxx”]()’) lub słowem kluczowym języka (np. „var”, „delete”, „class”, itp.) należy definiując obejmować w apostrofy/cudzysłowy.

    Warto jeszcze wspomnieć, że w JS, a właściwie w JSON _zawsze_ należy obejmować klucze w _cudzysłowy_ (tylko i wyłącznie cudzysłowy. NIE apostrofy).
    http://www.yarpo.pl/2011/03/06/json-jako-format-wymiany-danych/
    Apostrofy (mogłyby być też cudzysłowy) to celowy zabieg – taki jest poprawny sposób zapisu obiektu.

  3. Myślę, że JSLint wykryłby, gdyby kod był nieprawidłowy.

    Dla takiego:

    var a = {
            abc : 1
        };

    nie krzyczy. A krzyczy nawet jak jest za mało spacji :/

    Za poprawne również uznaje wykorzystanie apostrofów i cudzysłowów.