Whatsapp

12 dodatków do Firefoksa dla programistów & Projektanci

Anonim

Niedawno opublikowaliśmy post na temat 12 rozszerzeń Google Chrome dla programistów i projektantów. Niektóre z tych rozszerzeń są dostępne w Firefox , nie powtarzałbym tutaj żadnego.

W ten sam sposób niektóre z wymienionych poniżej rozszerzeń są dostępne w Chrome, więc traktuj takie aplikacje jako bonusy dla odpowiednich przeglądarek.

1. Walidator HTML

HTML Validator sprawdza Twój kod, aby upewnić się, że jest on zgodny ze standardową konwencją HTML. Wyświetla liczbę błędów, które widzi na ikonie na pasku narzędzi.

HTML Validator Firefox Addon

2. Ośmiornica

Jako programista od czasu do czasu przeglądam kilka stron kodowych w GitHub, aby zobaczyć, jak inni programiści rozwiązali określone problemy . Jeśli jesteś podobny do mnie, Octotree okaże się przydatny.

Octotree wyświetla kod GitHub w formacie drzewa. W ten sposób możesz przeglądać wiersze kodu bez pobierania plików źródłowych.

Octotree pokazuje kod GitHub w formacie drzewa

3. HTTPS wszędzie

HTTPS Everywhere szyfruje dane wymieniane ze wszystkimi głównymi stronami internetowymi, nawet jeśli nie korzystają one z protokołu HTTPS.

Jeśli więc zostaniesz przekierowany na strony, które nie używają https, możesz mieć pewność, że Twoja komunikacja online jest bezpieczna.

4. Test wydajności strony

Test wydajności strony udostępnia statystyki dotyczące stron internetowych, mierząc ich szybkość i wydajność ładowania. Możesz zapisać wyniki wykresu w celu porównania go z kolejnymi testami.

Test wydajności strony

5. Przyciąganie użytkowników

Usersnap umożliwia wykonywanie zrzutów ekranu stron internetowych i dodawanie do nich adnotacji poprzez dodawanie rysunków oznaczeń i komentarzy. Jest również wyposażony w linijkę pikseli i można go bezpośrednio zintegrować z różnymi narzędziami do zarządzania projektami, takimi jak Slac, Trello i JIRA.

Ta lista nie będzie kompletna bez Usersnap, biorąc pod uwagę, że umożliwia on efektywny proces przesyłania opinii. Jest to jednak płatna usługa z 14-dniowym bezpłatnym okresem próbnym.

Uchwyt użytkownika

6. Wyłącz JavaScript

Wyłącz JavaScript, jak sama nazwa wskazuje, daje możliwość wyłączenia JavaScriptu na stronach internetowych lub tylko w określonych kartach. Możesz go dostosować tak, aby miał domyślny stan JS włączenia/wyłączenia oraz domyślne zachowanie wyłączania według domeny/karty itp.

Wyłącz JavaScript

7. Lista kontrolna dla programistów stron internetowych

Rozszerzenie Web Developer Checklist zapewnia przegląd użyteczności witryny zgodnie z najlepszymi praktykami projektowania i programowania.

Kliknięcie ikony poinformuje Cię o SEO Twojej witryny, przyjaznych adresach URL, favikonie itp. wraz z zaznaczonymi obok nich znacznikami wyboru, które oznaczają przepustkę.

Lista kontrolna programisty sieciowego

8. React Developer Tools

Pozornie niekończący się wzrost popularności Reacta sprawia, że ​​deweloperzy Reacta rodzą się niemal każdego dnia, a zespół Reacta zajmuje się nimi.

React Developer Tools daje możliwość sprawdzenia drzewa React wraz z jego stanem, rekwizytami, hierarchią itp. Aby je aktywować , uruchom Firefox devtools i przejdź do zakładki React.

Istnieje również wersja dla programistów Vue w postaci narzędzi deweloperskich Vue.js.

React Developer Tools

9. ColorZilla

ColorZilla to doskonałe narzędzie dla programistów i grafików do wybierania kolorów z różnych stron internetowych.

Zawiera również zakraplacz, generator gradientów, przeglądarkę palet i historię kolorów.

ColorZilla

10. Nożyczki sieciowe Evernote

Evernote Web Clipper umożliwia wykonywanie zrzutów ekranu stron internetowych i automatyczne zapisywanie ich w Evernotekonto, z którego możesz tworzyć adnotacje i udostępniać je członkom zespołu.

Evernote Web Clipper

11. Menedżer plików cookie

Cookie Manager to bezpieczne rozszerzenie, które umożliwia przeglądanie, dodawanie, edytowanie, usuwanie i wyszukiwanie plików cookie w dowolnym domena.

Jeszcze fajniejsze w Menedżerze plików cookie jest to, że możesz eksportować i importować pliki cookie między domenami.

Menedżer plików cookie

12. Edytor na żywo dla CSS i LESS

Live Editor dla CSS i LESS umożliwia pisanie kodu CSS/LESS bezpośrednio w przeglądarce. Twój kod zacznie działać natychmiast i zostanie zapisany na poziomie witryny w lokalnej pamięci Twojej przeglądarki.

Jego edytor na stronie zawiera funkcje autouzupełniania, upiększania, lintera itp. Powinieneś to sprawdzić.

Edytor na żywo dla CSS

Czy masz ochotę na któreś z wymienionych rozszerzeń lub masz listę, z której możemy skorzystać? Sekcja komentarzy znajduje się poniżej.