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.
httpv://www.youtube.com/watch?v=TH5DibnOdxo&feature=player_embedded
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 odpowiedzi na “Debugowanie aplikacji AJAX za pomocą FirePHP”
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?)
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.
Myślę, że JSLint wykryłby, gdyby kod był nieprawidłowy.
Dla takiego:
nie krzyczy. A krzyczy nawet jak jest za mało spacji :/
Za poprawne również uznaje wykorzystanie apostrofów i cudzysłowów.