10 przydatnych rozszerzeń dla WebDev'a

• 6 minut aby przeczytać

Cześć, dzisiaj szybki i stosunkowo krótki wpis w którym chciałbym Wam polecić kilka przydatnych moim zdaniem wtyczek do przeglądarki dla każdego Web-developer’a jak i typowego Kowalskiego. Mam nadzieje, że każdy znajdzie coś odpowiedniego dla siebie i dopasuje to najlepiej do własnych potrzeb. Wtyczki te sam wykorzystuje na co dzień i spełniają swoją rolę w 100% a na dodatek przyśpieszają moją pracę i podnoszą produktywność.

Parę słów wyjaśnienia…

Zanim przejdziemy do zestawienia warto wspomnieć, że pierwotnie wpis ten dotyczył rozszerzeń typowo dla przeglądarki Google Chrome, natomiast ponieważ cała reszta (Opera, Vivaldi, Brave, Microsoft Edge i inne) obecnie bazuje na tym samym silniku (Chromium) myślę, że bez problemu przedstawione tu dodatki powinny również pasować do wszystkich pozostałych bez wyjątku, bo wszystkie korzystają z tego samego mechanizmu dodatków.

Po drugiej stronie barykady pozostaje jeszcze tylko Firefox od Mozilli oraz pozostałe bardziej niszowe przeglądarki ale wydaje mi się, że bez większego wysiłku znajdziecie dla nich odpowiedniki / zamienniki. Jedynymi dodatkami które mogę polecić bo uważam, że są warte uwagi w przypadku Firefox’a (z którego korzystam raczej sporadycznie ale jednak zdarza mi się) a których nie ma nigdzie indziej to:

  • Facebook Container - rozszerzenie pozwalające ograniczyć informacje spływające do Facebook’a za pomocą wtyczek takich jak przyciski “Lubie to” czy pozostałe dodatki znajdujące się na zewnętrznych stronach na które zaglądamy a których właściciele dobrowolnie umieścili takie gadżety.
  • Laboratory (Content Security Policy / CSP Toolkit) - jak sama nazwa mówi narzędzie do generowania polityki CSP dla naszej strony, automatycznie próbuje wygenerować odpowiednie wpisy dla nagłówka Content Security Policy na podstawie innych stron / zewnętrznych skryptów z którymi łączy się nasza strona.

Całą reszte niżej wymienionych wtyczek znajdziecie w pozostałych przeglądarkach.
Dlatego bez zbędnego przedłużania czas na właściwe zestawienie:

1. Wappalyzer

Działanie tej wtyczki jest dość proste, sprawdza ona jaki stos technologii jest wykorzystywany na wybranej stronie na której się właśnie znajdujemy. Pozwala dostarczyć nam informacji o tym z jakiego oprogramowania (bibliotek/framework’ow) korzystają inni, czasami także podając dokładne wersje. Takie już chyba mam zboczenie zawodowe, że po prostu lubie wiedzieć co wykorzystują inni a ta wtyczka idealnie się do tego celu nadaje.

Istnieje podobne rozszerznie WhatFonts do rozponawania czcionek na stronach.

2. Toby

Masz spory problem z ilością kart otwartych naraz? Nie jesteś pierwszy, Toby to właśnie wtyczka pozwalająca zapisać wszystkie i/lub tylko wybrane karty jako sesje (z aktualną datą) dzięki czemu bez problemu będzie można wrócić do nich później. Umozliwia także synchronizacje zapisanych kart pomiędzy urządzeniami. Świetne rozwiązanie oszczędzające czas na szukaniu w zakładkach poprzednio zapisanych stron.

3. DevTools => Vue, React, Redux, Angular

Jeżeli piszecie w jednej z powyższych technologii są to stosunkowo popularne ostatnio narzędzia wspomagające pracę z tymi bibliotekami (często wydawane przez samych twórców). Takie DevTools’y w świecie komponentów oraz props’ów. Przydatne w codziennej pracy (istnieją także inne) - warto więc zweryfikować zanim rozpoczniemy pracę z wybraną technologią aby zaoszczędzić sobie nieco czasu na debugowaniu.

4. Web developer

Taki czołg do wszystkiego, niezbędnik developera można powiedzieć. Choć wyglądem nie powala to potrafi naprawdę wiele, od wyłączania domyślnej walidacji formularzy po weryfikacje kodu, czyszczenie cache / historii, wyłączanie JS’a, manipulacja ciasteczek czy inne rzeczy standardowo znajdujące się w domyślnych DevTool’sach przeglądarki ale bez zbędnego szukania wszystko w jednym miejscu i pod ręką.

5. Google Translate

Nie, to nie żart. Genialnie prosta i użyteczna wtyczka pozwalająca pod PPM tłumaczyć pojedyncze słowa oraz niezbyt długie zdania. W codziennej pracy nieocenione szczególnie jeżeli twoim natywnym językiem wciąż nie jest z jakiegoś powodu j.angielski, nieraz mamy do czynienia z natury anglojęzyczną dokumentacją a nikt nie jest omnibusem aby widzieć i pamiętać wszystko co kiedykolwiek usłyszał czy zobaczył.

6. Full Page Screen Capture

Wtyczka która pozwala na robienia screenshotów całych stron (przydatne np. przy mockup’ach), choć tą samą opcję z powodzeniem znajdziemy wbudowaną w przeglądarkę to dzięki temu rozszerzeniu możemy to zrobić dużo łatwiej i szybciej bo za pomocą zaledwie jednego kliknięcia. Dodatek bardziej w ramach ciekawostki niż narzędzia w stylu “must have” ale czasami zdaje się być przydatny a do tego jest niezwykle prosty.

7. Momentum

Bardziej opcjonalne, niż niezbędne - ciekawy dodatek pozwalający nieco spersonalizować pustą kartę Chrome. Miły akcent podczas rozpoczynania kolejnego dnia, mamy podstawowe informacje pogodę, godzinę a ponad to TODO liste a nawet losowy cytat czy tapetę na każdy dzień. Taki dodatek “All in one” który z powodzeniem może zastąpić Toby (o którym wspominałem już wyżej) na głównym ekranie.

*Wcześniej dostępna była jeszcze lepsza wtyczka (Jetty.io) jednak jej autor zakończył projekt.

8. Meta SEO Inspector

Rozszerzenie pozwalające nieco poprawić SEO waszych stron wykazujące problemy z opisami, brakującymi tagami meta i innymi. O ile podczas tworzenia serwisu nie jest to niezbędne w posiadaniu to gdy przychodzi czas na promocje strony SEO i pozycjonowanie odgrywa tutaj pierwsze skrzypce. Ponadto pozwala sprawdzić stronę kilkoma popularnymi skanerami dostępnymi online.

9. Dev 2.0

Jedno z kolejnych rozszerzeń które pomoże sprawić, że okno pustej karty w przeglądarce nie będzie więcej wiało nudą a wręcz przeciwnie zacznie nawet tętnić życiem. Jest to wtyczka pozwalająca na agregowanie interesujących nas wiadomości które są tematycznie dopasowywane do wskazanych preferencji. Przyznam, że nie przekonałem się do niego ale to bardziej kwestia tego, że miałem już na oku inne rozszerzenie które zajmowało stronę główną.

10. FoxyProxy

Już sama nazwa zdradza do czego może być to narzędzie, generalnie jest to menadżer dla proxy dzięki któremu szybko możemy się przełączać pomiędzy zdefiniowanymi proxy, przydatne bardziej dla osób zajmujących się bezpieczeństwem aplikacji webowych do szybkiej zmiany ustawień dotyczących proxy (np. aby skierować ruch do Burp’a).

10+. Postman

Poprzednio w formie rozszerzenia do Chrome (aktualnie działający jako osobna aplikacja). Długo zastanawiałem się czy umieścić go jeszcze raz w tym wpisie bo nie jest on już formalnie jedynie wtyczką a pełnoprawną aplikacją ale niech będzie. Jest to prosty klient HTTP pozwalający na tworzenie zapytań do REST’owych API. W tym możliwość przesyłania niestandardowych nagłówków.

Od czasu wydania tego narzędzia pojawiło się kilka innych podobnych klientów HTTP np. Insomnia które również są niczego sobie.


Podsumowanie

Na sam koniec pozostałiłem jeszcze wisienke na torcie czyli wtyczke która wcześniej znajdowała się w tym zestawieniu lecz niestety autor prawdopodobnie ją porzucił lub nie (w każdym bądź razie zaprzestał jej dalszych aktualizacji). Szukałem długi czas dobrego zamiennika ale do teraz nie znalazłem nic co mogłoby ją zastąpić (i przy tym być wciąż tak proste i łatwe w obsłudze).

Mowa o DNS Info która to wtyczka skanowała serwery dns wybranej strony, ponadto zwracała informacje o przekazanych nagłówkach a także informacje z bazy WhoIs. Dzięki temu mogliśmy sprawdzić czy strona stoi np. za Cloudflare i/lub innym tego typu serwisem a jeżeli nie to gdzie jest hostowana. Pozostawiam link do niej jedynie symbolicznie przez wzgląd na sentyment jaki miałem do tego rozszerzenia.

Oczywiście w żadnym wypadku nie polecam włączać wszystkich tych dodatków na raz bo na bank skończymy (w najlepszym wypadku) z brakiem pamięci operacyjnej. Należy pamiętać, że są to tylko dodatki które mają nam pomóc a nie być zwyczajnym przysłowiowym piątym kołem u wozu. Dlatego jeżeli nie potrzebujemy pewnych funkcji/opcji lepiej jest je zwyczajnie wyłączyć.

Choć jest to niewielkie zestawienie to by było na tyle. Mam nadzieje, że choć jedno z powyższych rozwiązań przyczyniło się choć odrobinę do tego aby ułatwić Wam nieco życie w ten czy inny sposób.

Innechromerozszerzeniawebdev
comments powered by Disqus