Nowości w Firebug 1.6

Firebug Logo

źródło: http://getfirebug.com/wiki/index.php/File:Flaming-firebug-logo-with-text.png przez Johnjbarton

Firebug Working Group (dumnie) ogłosił wydanie Firebug 1.6.0. Dostępny jest do pobrania ze strony getfirebug.com oraz z https://addons.mozilla.org. Prace nad następnymi wersjami są już w toku.
Pojawienie się takich narzędzi jak Opera Dragonfly oraz Firebug zrewolucjonizowało sposób debugowania aplikacji, stron www. Szczególne uznanie należy się właśnie dla Firebug’a, którego design, funkcjonalność, sposób działania jest rewelacyjny. Wg mnie jest to najlepszy dodatek dla webmastera, a ponadto jest to najlepszy dostępny dodatek tego typu.

Główne zmiany

CMD On Script Panel

źródło: http://www.softwareishard.com/blog/firebug/firebug-16-command-line-available-on-all-panels/


Konsola i linia poleceń

Przycisk aktywujący linię komend został wyciągnięty przed panele, dzięki czemu jest teraz dostępna z każdego panelu. Ułatwi to znacznie pracę podczas debugowania kodu JavaScript, gdy wykonywanie kodu zostanie zatrzymane przez błąd. Możliwe wtedy stanie się sprawdzenie wartości zmiennej, czy szybkie wykonanie jakiegoś kodu js bez przełączania się do innego panelu.

Dodano filtrowanie wiadomości pojawiających się w konsoli według ich rodzaju (błędy, ostrzeżenia, informacyjne)

console.table()

źródło: http://www.softwareishard.com/blog/firebug/tabular-logs-in-firebug/

Nowa komenda console.table(), która powoduje wyświetlenie w konsoli zmiennej tablicowej jako zwykłej tablicy – z kolumnami i wierszami. Definicja metody jest następująca:
console.table(object[, columns]);. Kod powodujący wyświetlenie tabelki ze zrzutu ekranu:

1
2
3
4
5
var table1 = new Array(5);
for (var i=0; i<table1.length; i++){
    table1[i] = [i+1, i+2, i+3, i+4, i+5, i+6, i+7];
}
console.table(table1);

Zmian wprowadzonych do konsoli jest dużo więcej 1 , są to m.in.:

  • Grupowanie wyników konsoli w rozwijalne bloki przy użyciu
    console.groupCollapsed("This is my table");
    console.table(table1);
    console.groupEnd();
  • Sortowanie wyników tabeli wyświetlonej w konsoli
  • Wyświetlanie zmiennych złożonych typów. Teraz Firebug lepiej radzi sobie z wyświetlaniem obiektów, elementów DOM itd
  • Wyświetlanie danych tabelo-podobnych. Firebug radzi sobie nie tylko z tablicami, ale także z listą obiektów, które reprezentują tą samą strukturę:
    function Person(firstName, lastName, age) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }
     
    var family = {};
    family.mother = new Person("Susan", "Doyle", 32);
    family.father = new Person("John", "Doyle", 33);
    family.daughter = new Person("Lily", "Doyle", 5);
    family.son = new Person("Mike", "Doyle", 8);
     
    console.table(family);

    W wyniku otrzymujemy:

    console.table()

    źródło: http://www.softwareishard.com/blog/firebug/tabular-logs-in-firebug/

Pokaz możliwości można przetestować na specjalnie przygotowanej do tego stronie: https://getfirebug.com/tests/content/console/api/table.html (tak, wymaga nowego Firebuga).

HTML

  • Inspektor HTML został rozbudowany o możliwość rozwijania drzewka potomków wskazanego elementu (PPM – Expand All, lub naciśnięcie klawisza *).
  • Dodatkowym ficzerem jest możliwość przewijania breadcrumb, które przydaje się przy bardziej złożonych strukturach. Funkcjonalność ta została dodana do zakładek Script, DOM i Html :
    Scrollable Breadcrumbs

    źródło: http://www.softwareishard.com/blog/firebug/scrollable-breadcrumbs/


    Ciekawą opcją są tu aktywatory przewijania, a jest ich kilka: kliknięcie w strzałki, najechanie kursorem na strzałki, przewijanie kółkiem myszki, przewijanie za pomocą klawiatury.
  • Aby zobaczyć DOCTYPE nie trzeba przełączać się na zakładkę Skrypt – doctype jest teraz widoczne w zakładce HTML

CSS

  • Od teraz jest możliwe kopiowanie całej deklaracji CSS dla danej reguły, wystarczy kliknąć prawym przyciskiem w oknie styli i wybrać odpowiednią opcję z menu.
  • Style pokazane w zakładce „Wyliczone” mają możliwość zwijania/rozwijania grup.
  • Poprawione wyświetlanie pasujących wyników wyszukiwania
  • Automatyczne uzupełnianie dla !important

JavaScript

Stos

źródło: http://www.softwareishard.com/blog/firebug/firebug-16-stack-side-panel-redesign/

Jednym z głównych usprawnień jest panel Stos, który pokazuje listę wywołań poszczególnych funkcji gdy debugger zatrzyma się na breakpoincie. Każda funkcja pokazywana jest w nowej linii z możliwością rozwinięcia w celu przejrzenia szczegółów

  • Breakpoint’y są zapamiętywane pomiędzy sesjami przeglądarki, dzięki temu można zrestartować przeglądarkę, a ustawione breakpointy pozostaną na swoich miejscach
  • Dla korzystających z HTML5, w panelu DOM wyświetlane są dane zapisane z localStorage oraz sessionStorage
  • Wyłączenie przerywania po wystąpieniu następnego błędu oraz po słowie kluczowym debugger;
  • Możliwość ustawienia własnych warunków do wystąpienia przerwania. Można ustalić breakpoint w wybranej linii i dodatkowo ustawić dla niego warunek, który jeśli zostanie spełniony wywoła przerwanie:
    Breakpoint

    Breakpoint z warunkiem

Źródła

  1. http://www.softwareishard.com/blog/firebug/tabular-logs-in-firebug/ []
 

Przeczytaj także

Komentarze: 9

Dodaj komentarz »

 
 
Daniel Burchardt
 

Od dawna używam firebuga i godne pochwały są starania twórców firebuga o jego rozwój. 🙂

 

Odpowiedz

 

Problem w tym, że jak każde narzędzie ma on bugi, niestety nie łatane jak w Windowsie od wielu wydań. Nie do końca jestem pewien na czym to polega i czy nie jest to wina mojej konfiguracji, ale u mnie Firebug wysypuje całkowicie sesje. Jak to się objawia? Ano prosto… Jeśli jest on włączony podczas przeładowania strony – sesja jest niszczona. Dlatego niestety jego użyteczność drastycznie spada. Wiem, że kiedyś te problem obszedłem poprzez kombinowanie z bibliotekami Firebuga, ale oczywiście kolejna jego wersja i problem wrócił. problem jest o tyle niewygodny, gdyż tracę niemal całkowicie możliwość kontroli zmiennych $_POST z poziomu tego narzędzia oraz częściowo AJAX. Mogę je podejrzeć jeśli zmodyfikuje skrypt tak, by zmienne post wyświetlać na stronie przez choćby print_r czy var_dump, a AJAX miał możliwość przeładowania na otwartej stronie.

Problem jest o tyle ciekawy, że jeśli otworzę stronę, uruchomię FB i go zamknę przed przeładowaniem – nie dzieje się nic. Jeśli jednak zapomnę go wyłączyć – sesja niszczona. Firebug działa więc destrukcyjnie tylko włączony podczas przeładowań. Dodam, że nie działo się tak do wersji bodajże 1.1.X potem nagle coś się posypało.

Tak czy inaczej uważam go mimo tego problemu za i tak jedno z najlepszych narzędzi dla webdevelopera na chwilę obecną.

 

Odpowiedz

     

    Byłbym zapomniał opisać jak sprawa wygląda zabawnie z poziomu AJAXa… Firebug wywala sesje ale oczywiście AJAX działa asynchronicznie, więc jeśli na już otwartej stronie coś się dzieje AJAXem, to mogę ją podglądać FireBugiem jeśli jest on otwarty. Stąd napisałem o częściowym tylko upośledzeniu FB dla AJAXa w moim przypadku.

     

    Odpowiedz

 

Dzięki za krótkie podumowanie, czego się spodziewać:)

Natomiast odnośnie ustawienia warunków przerwania w debugerze JS – to już było z tego co wiem. Mam 1.5.4 i też mam taką opcję. No chyba, że myślę o czymś innym.

 

Odpowiedz

 

@thek to ciekawe co piszesz, bo ja się z tym nigdy nie spotkałem. Dopytam czy dobrze zrozumiałem:
1. Uruchamiasz stronę, włączasz FB
2b. Przechodzisz na inną podstronę z włączonym FB i sesja się wysypuje?
2b. Wyłączasz FB i przechodzisz na stronę – jest ok?

Przetestowałem u siebie oba przypadki, i za każdym razem jest wszystko ok. Na każdej stronie tak masz?

 

Odpowiedz

 

console.table kozak, brakowało tego.

 

Odpowiedz

 

Vokiel… Dobrze zrozumiałeś i wszystkie podpunkty jak opisałeś zachowują się.
To co opisałem występuje na stronach, w których używam Firebuga do developerki w nieco bardziej zaawansowanej formie, czyli już w kombinowaniu z dołączaniem FirePHP. Muszą się więc nawzajem biblioteki gryźć lub w inny sposób na siebie nachodzić. Nie jest to więc wina stricte czysto FireBuga, ale jakiejś wzajemnej interakcji z FirePHP jak mniemam.

 

Odpowiedz

 

Dzięki za krótkie podumowanie, czego się spodziewać:) Natomiast odnośnie ustawienia warunków przerwania w debugerze JS – to już było z tego co wiem. Mam 1.5.4 i też mam taką opcję. No chyba, że myślę o czymś innym.

 

Odpowiedz

 

Twórcy firebug nie próżnują 🙂 To dobrze, bo wtyczka jest świetna i ma potencjał na bycie jeszcze lepszą.

 

Odpowiedz

 

Dodaj komentarz

 
(nie będzie publikowany)
 
 
Komentarz
 
 

Dozwolone tagi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

 
© 2009 - 2018 Vokiel.com
WordPress Theme by Arcsin modified by Vokiel