10 przydatnych narzędzi programistycznych Firefoksa, które powinieneś wiedzieć

Firefox jako „przeglądarka programistów” ma wiele świetnych narzędzi, które ułatwiają nam pracę. Więcej informacji na temat jego kolekcji narzędzi można znaleźć na stronie Firefox Developer Tools, a także wypróbować przeglądarkę Developer Edition, która zawiera więcej testowanych funkcji i narzędzi.

W tym poście wymieniłem 10 przydatnych narzędzi może spodoba Ci się kolekcja narzędzi dla programistów. Pokazałem również, co te narzędzia mogą zrobić z GIF-ami, a także jak uzyskać do nich dostęp w celu szybkiego odniesienia.

1. Wyświetl linijki poziome i pionowe

Firefox ma takie narzędzie linijki wyświetla linijki poziome i pionowe z jednostkami pikselowymi na stronie. Narzędzie to jest przydatne do rozmieszczania elementów na stronie.

Aby uzyskać dostęp do linijek za pomocą menu, przejdź do: ☰> Deweloper > Pasek narzędzi programisty (skrót: Shift + F2). Gdy pasek narzędzi pojawi się na dole strony, wpisz władcy i naciśnij Wchodzić.

Aby było to widoczne w oknie narzędzi programistycznych, przejdź do „Opcje Toolbox”. W sekcji „Dostępne przyciski Toolbox” zaznacz „Przełącz linijki na stronę„pole wyboru.

2. Zrzuty ekranu za pomocą selektorów CSS

Chociaż pasek narzędzi Firefox pozwala robić zrzuty ekranu pełnej strony lub widocznych części, moim zdaniem metoda selektora CSS jest bardziej przydatna do przechwytywania zrzuty ekranowe poszczególnych elementów jak również dla elementy widoczne po najechaniu myszką tylko (jak menu).

Aby zrobić zrzuty ekranu z menu, przejdź do ☰> Deweloper > Pasek narzędzi programisty (skrót Shift + F2). Gdy pasek narzędzi pojawi się na dole strony, wpisz screenshot --selector any_unique_css_selector i naciśnij wchodzić.

Aby było to widoczne w oknie narzędzi programisty: kliknij „Opcje Toolbox” i w sekcji „Dostępne przyciski Toolbox” zaznacz „Zrób zrzut ekranu z pełnej strony ” pole wyboru.

3. Wybierz kolory ze stron internetowych

Firefox ma wbudowane narzędzie do wybierania kolorów o nazwie „Eyedropper”. Aby uzyskać dostęp do narzędzia „Kroplomierz”, przejdź do menu ☰> Deweloper > Kroplomierz.

Aby było to widoczne w oknie narzędzi dla programistów: kliknij „Opcje Toolbox” i w sekcji „Dostępne przyciski Toolbox” zaznacz sekcję „Chwyć kolor ze strony„pole wyboru.

4. Wyświetl układ strony w 3D

Przeglądanie stron internetowych w 3D pomaga przy problemach z układem. Będziesz mógł zobaczyć różne elementy warstw znacznie wyraźniej w widoku 3D. Aby wyświetlić stronę internetową w 3D, kliknij przycisk narzędzia „Widok 3D”.

Aby było to widoczne w oknie narzędzi programisty, kliknij „Opcje Toolbox”, a w sekcji „Dostępne przyciski Toolbox” zaznacz „Widok 3D„pole wyboru.

5. Wyświetl styl przeglądarki

Style przeglądarki składają się z dwóch typów: domyślnego stylu przypisywanego przez przeglądarkę dla każdego elementu oraz stylów specyficznych dla przeglądarki (tych z prefiksem przeglądarki). Przyjrzyj się stylom przeglądarki, które będziesz w stanie zdiagnozować wszelkie problemy z zastąpieniem w arkuszu stylów a także poznać wszelkie istniejące style przeglądarki .

Aby uzyskać dostęp do „stylów przeglądarki” poprzez menu, przejdź do ☰> Deweloper > Inspektor. Następnie kliknij kartę „Obliczone” w prawej sekcji i zaznacz pole wyboru „Style przeglądarki”.

Możesz także otworzyć „Inspektor„karta przez skrót Ctrl + Shift + C, a następnie dostęp do„ stylów przeglądarki ”.

6. Wyłącz JavaScript dla bieżącej sesji

W celu zapewnienia najlepszej praktyki i zgodności z czytnikiem ekranu zawsze zaleca się kodowanie dowolnej witryny w taki sposób, aby jej funkcjonalność nie była utrudniona w środowisku z wyłączonym javascript. Aby przetestować takie środowiska, możesz wyłącz JavaScript dla sesji, w której pracujesz.

Aby wyłączyć JavaScript dla bieżącej sesji, kliknij „Opcje Toolbox”, a w sekcji „Ustawienia zaawansowane” zaznacz „wyłącz JavaScript* ”pole wyboru.

7. Ukryj styl CSS ze strony

Podobnie jak JavaScript, ze względu na problemy z dostępnością najlepiej zaprojektować strony internetowe w taki sposób, aby strony powinny być nadal czytelne, nawet bez żadnych stylów. Aby zobaczyć, jak strona wygląda bez żadnego stylu, możesz wyłączyć je w narzędziach dla programistów.

Aby usunąć dowolny styl CSS (wbudowany, wewnętrzny lub zewnętrzny) zastosowany na stronie internetowej, po prostu kliknij symbol oka wymienionych arkuszy stylów w zakładce „Edytor stylów”. Kliknij ponownie, aby powrócić do oryginalnego widoku.

Aby uzyskać dostęp do „Edytor stylów” poprzez menu, przejdź do ☰> Deweloper > Edytor stylów (skrót: Shift + F7.

8. Wyświetl podgląd treści HTML na żądanie

Narzędzia programistyczne dla Firefoksa mają opcję podgląd odpowiedzi typu treści HTML. Pomaga to programistom wyświetlić podgląd 302 przekierowań i sprawdzić, czy w odpowiedzi zostały wygenerowane jakiekolwiek poufne informacje.

Aby przejść do „Podglądu” przez menu, przejdź do ☰> Deweloper > Sieć (skrót: Ctrl + Shift + Q. Następnie otwórz wybraną stronę internetową lub ponownie załaduj bieżącą stronę, kliknij żądane żądanie (z odpowiedzią HTML) z listy żądań i kliknij „Zapowiedź„karta w prawej sekcji.

9. Podgląd strony internetowej w różnych rozmiarach ekranu

Aby przetestować stronę pod kątem jej responsywności, użyj „Responsive Design View”, do którego można uzyskać dostęp za pomocą ☰> Deweloper > Responsive Design View lub za pomocą skrótu: Ctrl + Shift + M.

Aby wyświetlić przycisk narzędzia „Responsive Design Mode”, kliknij „Toolbox Options” i w sekcji „Available Toolbox Buttons” zaznacz pole wyboru „Responsive Design Mode”.

10. Uruchom JavaScript na stronach

Do szybkiego wykonywania skryptów JavaScript na dowolnej stronie wystarczy użyć narzędzia „Scratchpad” Firefoksa. Aby uzyskać dostęp do „Brudnopisu”, przejdź do menu; ☰> Deweloper > Brudnopis lub użyj skrótu klawiaturowego Shift + F4.

Aby przycisk narzędzia „Brudnopis” pojawił się w oknie narzędzi dla programistów, można go szybko użyć: kliknij „Opcje Toolbox„i pod”Dostępne przyciski Toolbox„sekcja sprawdź„ Brudnopis ” pole wyboru.