Wszystko, co musisz wiedzieć o narzędziach programistycznych Firefoksa

Firefox Developer Edition to specjalna wersja Firefoksa stworzona specjalnie dla programistów. Zawiera wszystkie najnowsze funkcje Firefoksa oraz szereg specjalistycznych narzędzi programistycznych. Tutaj przedstawię przewodnik po jego funkcjach, dzięki czemu będziesz wiedział wszystko, co trzeba wiedzieć o Narzędziach dla programistów Firefoksa.

Interfejs użytkownika

Po zainstalowaniu Firefox Developer Edition, zauważysz, że wygląda nieco inaczej niż standardowy pasek narzędzi Firefox. Firefox z pewnością przyjął bardziej zorientowane na programistów podejście do projektowania swojego paska narzędzi, dzięki czemu jego wygląd jest węższy i domyślnie ozdobiony znacznie większą liczbą przycisków.

Domyślny motyw Narzędzi dla programistów Firefoksa jest ciemny, co prawdopodobnie jest wynikiem testów użytkowników. Jeśli jednak nie podoba Ci się ciemny motyw, zawsze możesz wyłączyć motyw edycji dla programistów, wybierając Menu > Dostosuj .

Tworzenie narzędzi

Firefox Developer Edition zawiera szereg narzędzi do tworzenia, które są przeznaczone dla twórców witryn i aplikacji internetowych. Poniżej przedstawiłem zestawienie narzędzi i ich korzyści, więc nie musisz szukać tych informacji.

Brudnopis

To narzędzie daje twórcom stron internetowych możliwość eksperymentowania z kodem JavaScript. W środowisku udostępnionym przez Scratchpad możesz pisać, uruchamiać i sprawdzać wyniki kodu, który wchodzi w interakcję z bieżącą stroną.

Aby otworzyć Scratchpad, po prostu naciśnij Shift F4 lub przejdź do menu Web Developer i kliknij Scratchpad. Otworzy się okno, w którym możesz napisać swój kod. Po zakończeniu kliknij Wykonaj > Uruchom, a kod zostanie uruchomiony w bieżącej karcie.

Edytor stylów

Edytor stylów umożliwia programistom internetowym przeglądanie i edycję wszystkich arkuszy stylów z powiązaną stroną. Będziesz także mógł tworzyć nowe arkusze stylów od podstaw i stosować je na stronie, a także importować istniejące arkusze stylów i stosować je na bieżącej stronie.

Aby otworzyć Edytor stylów, przejdź do menu Web Developer i kliknij Edytor stylów . Na dole przeglądarki pojawi się Firefox Developer Toolbox z gotowym do użycia edytorem stylów.

Edytor cieniowania

Korzystanie z edytora Shader w Firefoksie jest proste. Deweloperzy mogą w pełni przeglądać i edytować moduły Fragment Shader i wierzchołki używane przez WebGL. I po prostu dla tych, którzy nie wiedzą, WebGL inteligentnie wykorzystuje JavaScript (poprzez API) do renderowania grafiki 2D i 3D bezpośrednio przez przeglądarkę Firefox, bez konieczności używania wtyczek.

Aby móc korzystać z edytora cieniującego, należy go najpierw włączyć. Aby to zrobić, przejdź do ustawień Toolbox, a następnie zaznacz pole obok „Edytor cieniowania”. Edytor cieniowania zostanie wyświetlony na pasku narzędzi Firefoksa. Kliknij na niego, a będziesz mógł go otworzyć.

Internetowy edytor audio

Interfejs API Web Audio Editor umożliwia programistom tworzenie kontekstu audio. Deweloperzy będą musieli stworzyć węzły audio zapewniające:

• Źródła dźwięku
• Węzły wykonujące przekształcenia
• Notatki reprezentujące wybrane miejsce docelowe strumienia audio.

Web Audio Editor zbada aspekty audio strony i zapewni wizualną reprezentację jej na wykresie. Umożliwia to programistom zbadanie funkcjonalności i działania oraz sprawdzenie, czy wszystkie węzły łączą się prawidłowo. Deweloperzy mogą zarówno edytować, jak i sprawdzać właściwości węzła AudioParam, a także inne właściwości.

Podobnie jak Shader Editor, Web Audio Editor musi być włączony ręcznie i nie jest ustawieniem domyślnym. Włączenie jest łatwe: po prostu wróć do ustawień narzędzia dla programistów, a następnie zaznacz pole obok „Web Audio”. Zobaczysz wtedy, że na pasku narzędzi Firefox Toolbox znajduje się dodatkowa karta. Po prostu kliknij tę kartę, a zostanie załadowana strona, z której możesz zbudować kontekst audio.

Narzędzia do debugowania

Narzędzia do debugowania Firefoksa są przeznaczone do badania, przeglądania i debugowania witryn i aplikacji internetowych. Poniżej przedstawiłem najważniejsze cechy niektórych z tych narzędzi i ich zalety.

Inspektor strony

Narzędzie Page Inspector umożliwia programistom sprawdzanie i wprowadzanie zmian w kodowaniu HTML i CSS strony internetowej. Korzystając z tego narzędzia, programiści mogą badać strony za pomocą wersji ładowanej lokalnie lub poprzez zdalny cel.

Otwarcie Inspektora Stron jest łatwe. Jeśli masz wybrany element, możesz po prostu kliknąć go prawym przyciskiem myszy, a następnie wybrać „Sprawdź element”. Możesz też przejść do menu Web Developer, a następnie kliknąć opcję Inspektor. Inspektor strony pojawi się na dole przeglądarki.

Konsola internetowa

To narzędzie rejestruje wszystkie informacje związane ze stroną internetową, takie jak żądania sieciowe, kod JavaScript, CSS, błędy i ostrzeżenia dotyczące bezpieczeństwa, ostrzeżenia o błędach i komunikaty informacyjne. Umożliwia także interakcję ze stroną internetową za pomocą JavaScript.

Konsola internetowa została zaprojektowana w celu zastąpienia starej konsoli błędów, która pierwotnie była częścią Narzędzi programistycznych Firefoksa. Podczas gdy Konsola Błędów udostępniała ogromną listę błędów z wielu stron, Konsola internetowa zawsze wyświetla informacje związane z konkretną stroną internetową, dzięki czemu jest bardziej użyteczna.

Aby otworzyć konsolę internetową, przejdź do podmenu Web Developer w menu Firefox i kliknij „Konsola internetowa”. Możesz także użyć skrótu Ctrl Shift K. Przybornik pojawi się wtedy na dole przeglądarki z aktywną „Konsola”.

Debuger

Narzędzie Firefox Debugger daje programistom internetowym możliwość badania i modyfikowania kodu JavaScript. Może być również używany do identyfikacji błędów. Używając Debugera, możesz debugować kod lokalnie w Firefoksie lub zdalnie na urządzeniu z Firefox OS lub Firefoksie dla Androida.

Aby otworzyć debuger, przejdź do podmenu Web Developer w głównym menu przeglądarki Firefox i kliknij „Debugger”. Alternatywnie możesz nacisnąć Ctrl Shift S, a zestaw narzędzi pojawi się na dole przeglądarki z włączonym debugerem i gotowym do użycia.

Monitor sieci

Monitor sieci ma na celu pokazanie wszystkich różnych żądań sieciowych wysyłanych przez Firefoksa, czasu trwania każdego żądania i szczegółów każdego żądania. Przejdź do Web Developer Menu > Network, aby aktywować narzędzie. Aby zobaczyć prośby, musisz odświeżyć stronę.

W Monitorze sieci będziesz mógł zobaczyć oś czasu żądań i filtrować zawartość według typu. Istnieje również narzędzie do analizy wydajności, za pomocą którego możesz sprawdzić, ile czasu zajmuje przeglądarce pobranie różnych części Twojej witryny. Aby uruchomić to narzędzie, po prostu kliknij ikonę stopera na pasku narzędzi u dołu Monitora sieci.

Inspektor przechowywania

Jeśli chcesz poznać różne typy pamięci, z których może korzystać strona internetowa, musisz włączyć narzędzie Inspektor pamięci. W obecnej formie Inspektora pamięci masowej można używać do sprawdzania plików cookie, pamięci lokalnej, magazynu sesji i indeksowanej bazy danych.

Inspektor pamięci masowej zapewnia widok pamięci masowej tylko do odczytu. Jednak Firefox powiedział, że pracuje nad rozwinięciem narzędzia, aby programiści mogli w przyszłości edytować zawartość swojej pamięci masowej.

Aby otworzyć Inspektora pamięci, przejdź do podmenu Web Developer i kliknij Inspektor pamięci. Alternatywnie możesz nacisnąć Shift + F9, aby użyć skrótu klawiaturowego.

Pasek narzędzi programisty

Program Developer Toolbar został zaprojektowany, aby dać programistom dostęp z wiersza poleceń do wielu Narzędzi programistycznych Firefox. Oprócz korzystania z poleceń skonfigurowanych przez Firefoksa, które można znaleźć tutaj, możesz również dodawać własne polecenia za pomocą Scratchpada. Można je przekształcić w dodatki, aby inne osoby również mogły z nich korzystać.

Otwórz pasek narzędzi programisty, naciskając Shift + F2. Możesz też przejść do menu Web Developer i kliknąć Developer Toolbar.

Inne narzędzia do debugowania — widok 3D, zakraplacz, iFrames

Inne narzędzia do debugowania zawarte w pakiecie Firefox Developer Tools obejmują:

• Widok 3D: To daje widok 3D zagnieżdżonych bloków HTML i treści
• Zakraplacz: Pozwala wybrać konkretny kolor ze strony i skopiować go do schowka)
• Wybieranie ramek iFrames: Pozwala to na skierowanie narzędzi programistycznych na określone ramki iFrame w dokumencie.

Narzędzia mobilne

Oprócz narzędzi do tworzenia i debugowania Firefoksa, istnieje również wiele narzędzi mobilnych, z których programiści mogą korzystać w przypadku rozwoju mobilnego. Omówię je w całości poniżej.

Manager aplikacji

To narzędzie pozwala programistom testować, wdrażać i debugować aplikacje HTML5 na urządzeniach z Firefox OS. Działa również jako symulator, dzięki czemu testy można przeprowadzać bezpośrednio z przeglądarki Firefox na komputery stacjonarne.

Menedżer aplikacji jest dostarczany z panelem aplikacji, w którym programiści mogą zarządzać lokalnymi aplikacjami i aplikacjami hostowanymi zewnętrznie; panel Urządzenia, który zawiera informacje o podłączonym urządzeniu, takie jak wersja systemu operacyjnego i zainstalowane aplikacje; i Przyborniki, które są zestawem Narzędzi dla programistów Firefoksa, których można używać w uruchomionej aplikacji.

WebIDE

To mobilne narzędzie umożliwia programistom tworzenie, edytowanie, uruchamianie i debugowanie aplikacji internetowych za pomocą symulatora Firefox OS lub urządzenia z systemem Firefox. Możesz go używać do łączenia się z narzędziami programistycznymi Firefoksa z innymi przeglądarkami, takimi jak Firefox na Androida i Chrome na Androida.

Inne narzędzia mobilne

Inne narzędzia mobilne obejmują:

• Zdalne debugowanie Firefoksa dla Androida
• Firefox OS Simulator: symuluje urządzenie z Firefox OS, ale działa na komputerze stacjonarnym
• Responsywny widok projektu: Pozwala zobaczyć, jak Twoja witryna lub aplikacja internetowa wygląda na różnych urządzeniach o różnych rozmiarach ekranu.

Narzędzia wydajności

Wydajność ma kluczowe znaczenie w tworzeniu stron internetowych, dlatego Firefox zapewnia twórcom stron internetowych szereg narzędzi, których można użyć do diagnozowania i rozwiązywania problemów z wydajnością w witrynach i aplikacjach internetowych.

Narzędzie wydajności

Narzędzie Performance zastąpiło oryginalny profiler próbkowania JavaScript w Firefoksie. Nadal zawiera zaktualizowaną wersję profilu próbkowania; jednak ma również oś czasu liczby klatek na sekundę. Oczekuje się więcej funkcji w przyszłości.

Narzędzie Performance może służyć do tworzenia, analizowania i próbkowania profili.

Profilowanie JavaScript

Profiler JavaScript został zaprojektowany, aby pomóc programistom znaleźć problemy w ich kodzie JavaScript. Robi to poprzez próbkowanie bieżącego stosu wywołań JavaScript i dostarczanie statystyk na jego temat.

Narzędzie do migania farby

To narzędzie podświetli część Twojej strony internetowej, którą przeglądarka musi odświeżyć w odpowiedzi na dane wejściowe. Pozwala twórcom stron internetowych dowiedzieć się, czy ich witryna powoduje odświeżenie przeglądarki bardziej, niż jest to konieczne. Pamiętaj, że odświeżanie może mieć negatywny wpływ na wydajność, więc dobrym pomysłem jest użycie tego narzędzia, aby wyeliminować niepotrzebne odświeżanie i poprawić wydajność witryny.

Oddzielny profil programisty

Konieczność przełączania się między wersjami Firefoksa byłaby prawdziwym problemem. Dobrą wiadomością jest to, że Firefox Developer Edition używa całkowicie oddzielnego profilu od innych zainstalowanych wersji Firefoksa.

Informacje o wersji dla programistów

Deweloperzy, którzy chcą przeczytać uwagi dotyczące bieżących i historycznych wersji Firefoksa Developer Edition, mogą to zrobić, odwiedzając ten link.

Zawijanie

Jeśli jesteś nowym lub doświadczonym programistą internetowym, bardzo skorzystasz na korzystaniu ze szczegółowych i zróżnicowanych Narzędzi programistycznych Firefoksa. Od tworzenia kodu po debugowanie kodu HTML, narzędzia pozwalają na wykonanie szerokiego zakresu działań wymaganych do stworzenia strony internetowej lub aplikacji internetowej. Narzędzia mobilne są również bardzo przydatne, zwłaszcza dla tych, którzy chcą tworzyć reagujących stron internetowych w celu skorzystania z najnowszym ⁽²¹ kwietnia 2015) Aktualizacja algorytmu Google.

Aby uzyskać więcej informacji o narzędziach dla programistów Firefoksa, przejdź do witryny Mozilla Developer i dołącz do społeczności programistów. Firefox Developer Edition można pobrać i używać za darmo.