Firefox 10, wydany 31 stycznia (tego samego dnia Firefox 11 staje się oficjalną wersją Beta), w końcu rozszerza rosnącą kolekcję narzędzi deweloperskich z Inspektorami Page i Style.

W pewnym sensie te narzędzia są podobne do Firebug, ale są również wyjątkowo Mozilla-ey.

Zamiast próbować odtworzyć Firebuga lub narzędzia programistyczne WebKit, Mozilla zawarła tylko najważniejsze funkcje, skupiając się na tym, aby uczynić to doświadczenie eleganckim.

Czy nowe podejście zadziała, czy też projektanci zaczną krzyczeć z powrotem do Firebug? Spójrzmy.

Możesz otworzyć Inspektora stron, klikając prawym przyciskiem myszy stronę internetową i wybierając "Sprawdź". (Firebug niedawno zmienił pozycję menu kontekstowego na "Inspect in Firebug", aby współistnieć spokojnie z wbudowanymi narzędziami programisty). U dołu ekranu pojawia się fioletowy pasek z listą rodziców i dzieci wybranego elementu.

Możesz kliknąć rodziców lub dzieci, aby je wybrać, i możesz kliknąć element prawym przyciskiem myszy, aby zobaczyć jego rodzeństwo. Są też przyciski oznaczone jako "Inspekcja", "HTML" i "Styl". Gdyby morze ognistych kart i przycisków Firebug wjechało pod ścianę, ten układ będzie niebiańskim darem. Jeśli chcesz zobaczyć DOM, najpierw musisz kliknąć "HTML", aby podjechać do ściany.

Kopanie w

Kliknięcie przycisku HTML wyświetla panel przedstawiający hierarchię znaczników HTML, które tworzą twoją stronę. W tym widoku możesz rozwinąć i zwinąć znaczniki oraz edytować ich atrybuty. Kliknięcie przycisku "Inspekcja" pozwala na najechanie kursorem na elementy, aby je sprawdzić. Firefox podświetla element, który przeglądasz, i przyciemnia resztę strony.

Kliknięcie przycisku "Styl" powoduje wyświetlenie Inspektora stylów, pokazującego reguły CSS dotyczące wybranego elementu. W Inspektorze stylów możesz przełączyć z "Reguł" do sekcji "Właściwości", która daje obliczone właściwości CSS dla wybranego elementu, wraz z linkami do dokumentacji Mozilli dla każdej właściwości.

Inspektor stylu znajduje się po prawej stronie strony, natomiast panel Inspektor stron i panel HTML znajdują się u dołu ekranu. Możesz wybrać wyświetlanie obu paneli, tylko jednego z nich lub żadnego z nich.

The Firefox HTML inspector, expanded.

To w zasadzie obejmuje całość tego, co robią inspektorzy stron i stylów. Konsola internetowa i scratchpad JavaScript, wprowadzone we wcześniejszych wersjach Firefoksa, są osobnymi narzędziami. Nie ma monitora aktywności sieci. Nie ma przełącznika agentów użytkownika, nie ma funkcji "edytuj jako HTML", nie ma narzędzi do testowania wydajności, nie można wprowadzić nowych tagów na stronę, nie można uaktywnić stanu wskaźnika myszy. Nie ma nawet panelu "layout" do wyświetlania wymiarów, wypełnienia i marginesów twojego elementu.

Mimo tych wszystkich ograniczeń wracam do Inspektorów stron i stylów. Wracam po niezakłócony interfejs, starannie rozmieszczone panele i ten modny purpurowy chrom. Wracam, ponieważ są przyjemne w użyciu i ponieważ spełniają moje potrzeby przez większość czasu.

Prosty interfejs inspektorów oznacza również, że są one przydatne, nawet gdy zrobiłem małe okno, aby przetestować responsywne projekty. Kiedy nie spełniają moich potrzeb, po prostu otwieram Firebug lub pasek narzędzi dla web developerów. (Zrobiłbym to o wiele mniej, gdyby wbudowane narzędzia programistyczne miały odpowiedniki w panelach Firebug Layout i Net.)

The Firefox HTML inspector used to analyze a responsive design

Narzędzia programistyczne Mozilli nie muszą być zgodne z zestawem funkcji narzędzi konkurencji, ponieważ specjalistyczne funkcje tych narzędzi istnieją już jako rozszerzenia Firefoksa. To właśnie czyni narzędzia dla Firefoxa wyjątkowymi.

Te przeglądarki sięgają nawet 11

Oprócz Inspektora HTML i stylu niektóre innowacyjne funkcje są przeznaczone na późniejsze wydania Firefoksa. Narzędzia programistyczne Firefoksa 11 umożliwiają przeglądanie Twojej strony internetowej jako trójwymiarowych stosów tagów. Za każdym razem, gdy zagnieżdżasz tag, ten stos tagów staje się wyższy. Ta funkcja jest rzeczywiście zaskakująco pomocna - na pierwszy rzut oka widać, czy element znajduje się w niewłaściwym rodzica, a widząc, jak te znaczniki się piętrzą, wyleczyć będą nowych twórców div-itis szybko.

The Firefox 3D inspector analylzing Web Designer Depot

Również w Firefoksie 11 jest edytor stylów. To narzędzie pozwala tworzyć nowe arkusze stylów, podobnie jak każdy dobry edytor tekstu. Główną różnicą jest to, że twoje zmiany są stosowane do żywych stron internetowych zaraz po zakończeniu pisania.

Poprzednio ten rodzaj edycji CSS na żywo był domeną środowisk programistycznych takich jak Espresso , więc wspaniale jest zobaczyć tę funkcję wbudowaną bezpośrednio w przeglądarkę. Więcej funkcji, w tym "narzędzia pomagające w rozwiązywaniu problemów z wydajnością aplikacji" zaplanowany na później w tym roku.

Firefox 11's CSS editor

Jednak nawet w Firefoksie 11 porównywanie wbudowanych narzędzi programistycznych z Firebug (lub z narzędziami programistycznymi WebKit) przypomina trochę porównywanie systemu iOS z Androidem. Ten pierwszy ma czysty, intuicyjny interfejs użytkownika i kilka innowacyjnych pomysłów, ale brakuje w nim zaawansowanych funkcji użytkownika.

Ta ostatnia ma każdą cechę, o której można pomyśleć, i można ją skonfigurować, jeśli nie, ale nie jest tak elegancka jak wróżba Cupertino. W przeciwieństwie do iOS i Androida, możesz z łatwością korzystać z obu narzędzi w tym samym czasie. Mozilla kontynuuje przyczynić się do Firebug i dała jasno do zrozumienia, że ​​Firebug jest tutaj na dłuższą metę.

Firefox's HTML inspector and Firebug, existing together in harmony.

Które narzędzie jest dla Ciebie odpowiednie? To zależy od tego, jakie funkcje potrzebujesz, jakie funkcje możesz bez nich i jak myślisz o polowaniu na rozszerzenia, aby wypełnić luki w wybranym przez ciebie narzędziu. Niezależnie od tego, co myślisz o nowych narzędziach dla programistów, jest to jeden z obszarów, w którym nie można zarzucić Firefoksa o aping WebKit.

Czy jesteś podekscytowany nowymi narzędziami dla programistów w Firefoksie 10? Jakie są twoje narzędzia dla programistów? Daj nam znać w komentarzach!