Firefox Developer Edition 6 Najfajniejsze narzędzia do wypróbowania

Edycja dla programistów Firefoksa jest jedyną przeglądarką, która została stworzona specjalnie dla programistów. Narzędzia deweloperskie w wersji standardowej pojawiają się jako pierwsze w edycji deweloperskiej i istnieją narzędzia w edycji programistycznej, które nie są i nie będą dostępne w wersji standardowej. Dzisiaj przyjrzymy się niektórym narzędziom, które w tej chwili można znaleźć tylko w wersji dla programistów.

Jeśli jesteś osobą, która nigdy nie korzystała lub nie jest zbyt zaznajomiona z narzędziami programistycznymi, nawet tymi w wersji standardowej, sprawdź najpierw ten fajny „DevTools Challenger” Mozilli. Tutaj możesz ćwiczyć z niektórymi narzędziami wymienionymi poniżej w przeglądarce edycji Firefox. Przykłady są zabawne i łatwe do naśladowania, instrukcje są proste, a jeśli nie możesz nadrobić zaległości, po prostu wykonaj samouczek wideo.

1. Narzędzie inspektora animacji

Animacje CSS stają się coraz bardziej powszechne, a narzędzia do animacji CSS dostarczane przez edycję Firefoksa ułatwiają śledzenie i sprawdzanie każdego utworzonego animacji. Możesz wstrzymać, odtworzyć i odwrócić dowolną animację; możesz także zobaczyć, jak to się dzieje, klatka po klatce, poprzez szorowanie.

Aby uzyskać dostęp do narzędzia, otwórz Inspektor narzędzie klikając prawym przyciskiem myszy element animacji i wybierając „sprawdź element”, a następnie po prawej stronie okna narzędzia dev kliknij „Animacje”.

2. Edytor funkcji czasu animacji

Czas animacji można edytować w narzędziu dev, wystarczy kliknąć ikonę obok funkcji w Zasady sekcja Inspektor narzędzie i wyskakujące okienko pokazujące otwarcie krzywych funkcji. Możesz przeciągać i modyfikować, aby dostosować czas animacji. Po wprowadzeniu zmian w krzywych szybkość animacji odpowiednio się zmieni.

Jeśli nie znasz już funkcji animacji cubic Bezier, polecam ten post, aby dowiedzieć się więcej na ten temat.

3. Próbnik kolorów dla właściwości CSS

W standardowej wersji Firefoksa dostępny jest już selektor kolorów (czytaj więcej na ten temat w tym poście), który wybiera kolor ze strony i kopiuje go do schowka. Próbnik kolorów, o którym teraz wspominam, jest jednak specyficzne dla wartości kolorów CSS właściwości.

Oprócz każdej wartości koloru CSS w Zasady sekcja Inspektor narzędzie, jest ikona, która otworzy kliknięte koło kolorów. Możesz wybrać, który kolor chcesz wybrać z koła.

Jeśli masz już żądany kolor, który znajduje się na stronie, po prostu kliknij narzędzie kroplomierza na dole wyskakującego okienka, aby otworzyć selektor kolorów, a następnie przeciągnij selektor do żądanego koloru i kliknij go. . Wartość koloru CSS zostanie zmieniona na kolor wybranego koloru.

4. Narzędzie pomiarowe

To narzędzie pozwala zobaczyć pozycję XY kursora oraz wysokość, szerokość i pomiar przekątnej w pikselach wybranej części. Aby skorzystać z narzędzia, musisz najpierw włączyć je w programatorze Opcje Toolbox, zaznaczając pole wyboru „Zmierz część strony” w sekcji „Dostępne przyciski Toolbox”.

Po włączeniu na górze okna narzędzia dev pojawi się ikona linijki, kliknij tę ikonę i przesuń kursor na stronę. Zobaczysz pozycje XY w pobliżu kursora. Aby zmierzyć szerokość, wysokość i przekątną, kliknij i przeciągnij, aby wybrać część, którą chcesz zmierzyć.

5. Edytor filtrów CSS

Jeśli zastosowałeś filtr CSS do elementu na stronie, zobaczysz obok niego ikonę Zasady sekcja Inspektor narzędzie, które po kliknięciu otwiera edytor filtrów CSS.

Aby usunąć filtr, kliknij znak × na prawym końcu nazwy filtra. Aby dodać filtr, kliknij pole filtru u dołu i wybierz ten, który chcesz dodać, a następnie kliknij + znak. Możesz również zmienić filtry w dowolnej kolejności, przeciągając każdy element.

6. Narzędzie pamięci

Za pomocą tego narzędzia możesz dowiedzieć się, co zajmuje pamięć. Pomaga to w podjęciu kroków w celu zmniejszenia zużycia pamięci i konsekwentnego zwiększenia szybkości strony.

Aby użyć tego narzędzia, musisz je najpierw włączyć z Opcje Toolbox zaznaczając pole wyboru „Pamięć” w sekcji „Domyślne narzędzia programistyczne dla Firefoksa”. Po zaznaczeniu zobaczysz sekcję „Pamięć” u góry okna narzędzia dev zaraz po „Wydajności”. Wybierz to.

Aby użyć narzędzia, kliknij „Zrób zdjęcie” lub przycisk aparatu. Zobaczysz listę przedmiotów, takich jak obiekty i skrypty, które zajmują pamięć .