Spojrzenie w podstawowe narzędzia Firefox dla programistów internetowych

Firefox od dawna jest preferowaną przeglądarką do tworzenia stron internetowych. Istnieje wiele przydatnych dodatków do wykonania zadania. W tym poście zajmiemy się kilkoma dodatkami, które moim zdaniem są niezbędne do zainstalowania, jeśli zamierzasz tworzyć aplikacje internetowe. Ponadto odkryjemy niektóre funkcje tych dodatków, które mogą pomóc.

Przede wszystkim musimy zainstalować Firebug.

Firebug

Firebug to dodatek, który należy zainstalować w celu tworzenia stron internetowych. Zakładając, że nie wiesz, skąd wziąć Firebug, możesz go zainstalować tutaj. Prawdopodobnie musisz ponownie uruchomić Firefoksa, zanim zostanie aktywowany.

Następnie możesz przeglądać Firebug na jeden z następujących sposobów: postępuj zgodnie z tym menu Narzędzia> Programiści> Firebug, kliknij prawym przyciskiem myszy stronę internetową i wybierz “Sprawdź element za pomocą Firebug”.

Alternatywnie możesz znaleźć ikonę Firebug w Firefoksie i kliknąć na nią, pojawi się okno firebug;

Firebug jest całkiem identyczny z Narzędzia dla programistów Chrome. ma panel, aby zobaczyć strukturę HTML i style, a także panel konsoli, aby zobaczyć błędy, ostrzeżenia i dzienniki. Ale mam jeszcze kilka wskazówek, które, miejmy nadzieję, okażą się przydatne.

Dostosowywanie rozmiaru skrzyni

Element HTML składa się z modelu skrzynki CSS, który składa się z marginesu, wypełnienia i wymiaru obiektu (szerokość / wysokość). Są chwile, kiedy możemy potrzebować zmodyfikować te właściwości. W takim przypadku możesz wybrać jeden z elementów, który chcesz zmienić, a następnie przejdź do Układ płyta.

W tym panelu znajdziesz ilustrację modelu pudełkowego CSS wraz z jego informacjami, w tym szerokość i wysokość. Nawet jeśli te dwie właściwości nie są określone w CSS, to narzędzie jest wystarczająco sprytne, aby określić wartość. Jeśli chcesz je zmodyfikować, możesz po prostu kliknąć wartość i użyć klawisza strzałki w górę lub w dół, aby zwiększyć lub zmniejszyć wartość.

Obliczone style

W wielu sytuacjach prawdopodobnie zastanawiasz się, dlaczego niektóre style nie są stosowane. Jedną z łatwiejszych i szybszych metod, zwłaszcza gdy masz tysiące linii stylów, jest sprawdzenie ich z poziomu Styl obliczony płyta. Ten przykład pokazuje, że kolor tekstu znacznika zakotwiczenia jest nadpisywany przez .przycisk klasa, podczas gdy tło .przycisk klasa jest nadpisywana przez .button.add.

Sprawdzanie rodziny czcionek (łatwy sposób)

Prawdopodobnie często znajdziesz coś takiego rodzina czcionek właściwość w CSS z różnymi rodzinami czcionek. Niestety, nie powie nam to konkretnie, jaką czcionkę przeglądarka bierze. Aby ułatwić identyfikację, możemy zainstalować rozszerzenie Firebug, a mianowicie Rodzina FireFont.

Po zakończeniu instalacji załaduj stronę internetową, a teraz możemy wyraźnie zobaczyć, która rodzina czcionek została zastosowana. W naszym przypadku tak jest Helvetica Neue (patrz zdjęcie).

Analiza wydajności

Może to być oszustwo, ale szybkość witryny jest teraz jednym z parametrów Google (algorytm) w decydowaniu o jakości strony internetowej; strona, która ładuje się szybciej, jest uważana za dobrze rozwiniętą i wyższą pod względem zawartości. Tak więc prędkość nie jest czymś, co należy przeoczyć.

Panel Net

Pierwszym miejscem, które warto odwiedzić, aby sprawdzić wydajność witryny, jest Netto płyta. Ten panel będzie rejestrować żądanie HTTP Twojej witryny, gdy zostanie załadowane. Poniższy zrzut ekranu pokazuje stronę, która się ładuje 42 żądanie i zabiera 4,36 sekundy załadować.

Następnie możesz sortować żądanie HTTP według ich typu, np. HTML, CSS i obrazy.

Yslow!

Ponadto możesz także zainstalować YSlow, rozszerzenie do Firebug z Yahoo !. Po aktywacji znajdziesz dodatkowy panel o nazwie Yslow!.

Podobny do Netto panel, Yslow! zarejestruje wydajność strony internetowej podczas jej ładowania, ale następnie poinformuje Cię, dlaczego strona jest powolna i co możemy zrobić, aby ją rozwiązać. W tym przykładzie przeprowadzamy test na stronie internetowej i jest oceniany 86 dla ogólnej wydajności, co jest uważane za OK.

Szybkość strony

Alternatywnie możesz także zainstalować Page Speed ​​z Google. Podobny do Yslow!, testuje szybkość działania witryny, chociaż wynik testu może być nieco inny. Ten przykład pokazuje, że ta sama strona internetowa zdobył 82 według Page Speed.

Narzędzia dla programistów internetowych

Web Developers Tools jest oczywiście przeznaczony dla twórców stron internetowych i ma wiele funkcji umieszczonych w tym pasku narzędzi. Ale ten poniżej jest jednym z moich ulubionych.

Kontrola obrazu

Są chwile, kiedy możemy potrzebować uzyskać informacje o obrazie ze strony internetowej. Często widzę, jak ludzie to robią, potykając się o przeglądarkę lub klikając prawym przyciskiem myszy obraz i wybierając Wyświetl informacje o obrazie, w ten sposób:

Ale ten sposób nie jest całkiem skuteczny, gdy musimy uzyskać informacje z wielu obrazów. W takim przypadku możemy wykorzystać Obrazy funkcja z dodatku. Ta funkcja jest łatwo dostępna z menu Obraz na pasku narzędzi.

I ten przykład pokazuje, jak jednocześnie pokazujemy wymiar obrazu i rozmiar pliku obrazu:

Wbudowane narzędzia Firefox

W ostatnich wersjach Firefox ogromnie ulepszył wbudowane funkcje dla twórców stron internetowych, niektóre z nich to:

Element Native Inspect

Ten rodowity Sprawdź element z Firefoksa może wyglądać podobnie do “Sprawdź element w Firebug”, ale w rzeczywistości działa na różne sposoby.

Tym razem nie będę przechodził dalej przez tę funkcję, ponieważ jest ona zasadniczo identyczna z Firebug HTML i panelem CSS, aczkolwiek różni się układem i wyglądem. Ale jest jedna charakterystyczna cecha, którą warto wypróbować Widok 3D.

Za pomocą Widok 3D możesz zobaczyć strukturę strony internetowej dogłębnie. Aby aktywować ten widok, możesz znaleźć przycisk w prawym dolnym rogu “Firefox Native Inspect Element”. Oto jak Widok 3D wygląda jak.

Nie używam go jednak tak często, jak inne funkcje, ale przyznaję, że jest to całkiem nowatorska funkcja Mozilli iz pewnością bardzo przydatna w pewnych sytuacjach.

Widok projektu sieci Web

Od czasu rosnącej popularności Responsive Web Design, Firefox zainicjował Responsive Bookmarklet do przeglądarki. To narzędzie pozwoli nam przetestować naszą responsywną stronę w różnych rzutniach bez zmiany rozmiaru okna przeglądarki.

Ten widok jest dostępny z tego menu: Narzędzia> Web Developer> Widok Web Design. I tak wygląda widok.

Edytor stylów

Wreszcie, jeśli często pracujesz z CSS, prawdopodobnie pokochasz tę funkcję. Od wersji 11 Firefox dodał Edytor stylów w rodzimych narzędziach programistycznych.

Ta funkcja jest tak fajna jak ta Widok projektu sieci Web, pozwala edytować CSS, natychmiast zobaczyć wpływ na przeglądarkę i zapisać zmiany, które bezpośrednio wpływają na plik źródłowy CSS.

Edytor stylów jest dostępny z następującego menu: Narzędzia> Web Developer> Edytor stylów.

Końcowa myśl

W tych dodatkach do Firefoksa jest wiele funkcji, a te omówione tutaj to tylko niektóre z funkcji, z których korzystam dość często podczas tworzenia stron internetowych. Niemniej jednak możesz mieć kilka innych wskazówek, które mogą być przydatne do zwiększenia wydajności tworzenia stron internetowych w Firefoksie.

Z jakich funkcji często korzystasz? Możesz podzielić się swoimi przemyśleniami w polu komentarza poniżej.