Dodaj rozszerzenie do Chrome
- Otwórz Chrome Web Store i wyszukaj rozszerzenie "DevSuite Pro".
- Kliknij "Dodaj do Chrome", a następnie potwierdź klikając "Dodaj rozszerzenie" w wyskakującym okienku.
Ponad 64 potężnych narzędzi do inspekcji, pomiaru, przechwytywania, analizy i projektowania stron internetowych bezpośrednio w przeglądarce.
Rozpoczęcie pracy jest proste. Zainstaluj rozszerzenie, otwórz dowolną stronę i uzyskaj dostęp do ponad 64 narzędzi programistycznych z poziomu wyskakującego okienka lub pływającej stacji dokującej. Konfiguracja nie jest wymagana.
DevSuite Pro dostarcza ponad 64 narzędzi programistycznych do inspekcji, pomiarów, projektowania i analizy stron internetowych. Przyspiesz swoją pracę dzięki potężnym funkcjom wbudowanym bezpośrednio w przeglądarkę.
Najedź na dowolny element, aby natychmiast zobaczyć jego style CSS i edytować je na żywo, co ułatwia debugowanie i dostosowywanie projektów w czasie rzeczywistym.
Dowiedz się więcej →Kliknij dowolny element, aby sprawdzić jego właściwości, wymiary, odstępy, czcionki i kolory. Zrozum strukturę strony natychmiast, bez otwierania DevTools przeglądarki.
Dowiedz się więcej →Mierz odległości, sprawdzaj wyrównanie i dodawaj linijki oraz prowadnice z dokładnością co do piksela na dowolnej stronie, aby upewnić się, że Twoje projekty są idealnie wyrównane.
Dowiedz się więcej →Wybieraj kolory z dowolnego elementu na stronie i kopiuj wartości HEX, RGB lub HSL do schowka jednym kliknięciem.
Dowiedz się więcej →Rób zrzuty całej strony lub widocznego obszaru na dowolnej stronie i pobieraj je natychmiast — idealne do udostępniania projektów i zgłaszania błędów.
Dowiedz się więcej →Wyświetlaj podgląd strony na różnych rozmiarach ekranu i rozdzielczościach urządzeń, aby testować responsywność bez opuszczania przeglądarki.
Dowiedz się więcej →Inspekcja i edycja stylów CSS w czasie rzeczywistym
Inspektor CSS to potężne, bezpłatne narzędzie deweloperskie, które pozwala najechać kursorem na dowolny element strony…
Debuguj i kontroluj animacje CSS w czasie rzeczywistym
Inspektor animacji zapewnia pełną kontrolę nad każdą animacją CSS i przejściem działającym na dowolnej stronie.
Konwertuj CSS dowolnego elementu na klasy użytkowe Tailwind
Kopiuj jako Tailwind łączy projektowanie wizualne z kodem Tailwind CSS.
Wizualizuj kompletną strukturę układu dowolnej strony
Tryb samych konturów dodaje kolorowe obramowania konturu do każdego elementu HTML na stronie, zapewniając…
Uzyskaj skategoryzowane klasy Tailwind dla dowolnego elementu
Pomocnik Tailwind sprawdza dowolny element na stronie i generuje kompleksowe, uporządkowane kategorycznie zestawienie…
Wizualne drzewo HTML nakładane na dowolną stronę
Szkielet strony renderuje kompletną strukturę DOM dowolnej strony jako wizualne drzewo nakładane bezpośrednio na samą stronę.
Wykrywaj komponenty React, Vue, Angular i Svelte na dowolnej stronie
Detektor komponentów automatycznie identyfikuje, jakiego frameworka frontendowego używa strona, i ujawnia jej kompletne…
Przeciągnij i upuść, aby zmienić pozycję dowolnego elementu
Przesuń element pozwala kliknąć dowolny element na stronie i fizycznie przeciągnąć go w nową pozycję.
Usuń lub przełącz widoczność dowolnego elementu
Usuń/Ukryj element pozwala usunąć lub tymczasowo ukryć dowolny element na stronie jednym kliknięciem.
Eksportuj dowolny element jako HTML, CSS lub JSON
Eksportuj element pozwala kliknąć dowolny element na stronie i wyeksportować jego kompletną strukturę w trzech…
Generuj komponenty React, Vue i Svelte z dowolnego elementu
Kopiuj kod komponentu przekształca dowolny element na stronie w czysty, gotowy do produkcji plik komponentu dla wybranego frameworka.
Rejestruj widoczny obszar lub zrzuty całej strony
Zrzut ekranu rejestruje wysokiej jakości obrazy dowolnej strony w dwóch trybach: widoczny obszar (dokładnie to, co…
Przeglądaj, wybieraj i pobieraj wszystkie obrazy z dowolnej strony
Wyodrębnij obrazy skanuje dowolną stronę i prezentuje każdy obraz w przeglądalnej galerii.
Znajdź, podejrzyj i pobierz każdy SVG na dowolnej stronie
SVG Grabber odkrywa każdy SVG na stronie — wbudowane elementy SVG, zewnętrzne odniesienia do plików .svg, sprite'y SVG…
Wymień dowolny obraz na stronie na własny
Zamiennik obrazów pozwala kliknąć dowolny obraz na stronie i zastąpić go własnym — przesyłając plik lokalny lub…
Generuj kody QR dla dowolnego URL lub tekstu natychmiast
Generator kodów QR automatycznie tworzy skanowalny kod QR dla URL-a bieżącej strony — lub dla dowolnego…
Pikselowo dokładne linijki, prowadnice i pomiary na dowolnej stronie
Linijka strony dodaje linijki w stylu Photoshopa i przeciągalne linie prowadnice do dowolnej strony.
Podglądaj wiele viewportów urządzeń jednocześnie
Widok responsywny pokazuje bieżącą stronę wyrenderowaną w wielu rozmiarach viewportu urządzeń obok siebie — wszystko na…
Zmierz dokładne odległości w pikselach między dowolnymi dwoma elementami
Zmierz odległość pozwala kliknąć dowolne dwa elementy na stronie i natychmiast zobaczyć dokładną odległość w pikselach…
Wizualizuj każdy kontekst stosu i warstwę z-index
Inspektor Z-Index ujawnia kompletną kolejność stosu każdego elementu na stronie.
Sprawdzaj układy CSS Grid i Flexbox z wizualnymi nakładkami
Wizualizator Grid/Flex wykrywa każdy kontener CSS Grid i Flexbox na stronie i renderuje ich strukturę układu jako…
Symuluj punkty uwagi użytkownika na dowolnej stronie
Symulator mapy cieplnej generuje przewidywaną mapę uwagi dla dowolnej strony na podstawie ustalonych wzorców badań UX…
Selektywnie czyść cache, cookies, localStorage i sessionStorage
Wyczyść dane przeglądania daje programistom szybki, selektywny sposób czyszczenia konkretnych typów danych przeglądania…
Wykryj każdą technologię stojącą za dowolną stroną
Stos witryny skanuje dowolną stronę i identyfikuje jej kompletny stos technologiczny — frameworki frontendowe (React…
Kompleksowy audyt SEO: tagi meta, nagłówki, OpenGraph i więcej
Inspektor SEO zapewnia natychmiastowy, kompleksowy audyt SEO dowolnej strony.
Automatyczny audyt WCAG: kontrast, alt text, ARIA i więcej
Inspektor dostępności uruchamia automatyczne kontrole WCAG 2.1 Level AA na dowolnej stronie i produkuje skategoryzowany…
Kliknij dowolny tekst na dowolnej stronie, aby edytować natychmiast
Edytor tekstu na żywo sprawia, że każdy element tekstowy na stronie jest edytowalny jednym kliknięciem.
Wymień dowolną czcionkę globalnie lub per-element z Google Fonts
Zmieniacz czcionek pozwala zastąpić dowolną czcionkę na stronie inną z biblioteki Google Fonts — albo globalnie (cały…
Odkryj każdą czcionkę używaną na dowolnej stronie
Lista wszystkich czcionek skanuje dowolną stronę i przedstawia kompletny inwentarz każdej rodziny czcionek w użyciu…
Precyzyjny zakraplacz dla wartości kolorów HEX, RGB i HSL
Próbnik kolorów zapewnia pikselowo precyzyjne narzędzie zakraplacza do wybierania kolorów z dowolnego elementu na…
Wyodrębnij kompletną paletę kolorów z dowolnej strony
Paleta kolorów skanuje każdy element na stronie i wyodrębnia kompletny zestaw użytych kolorów — od tekstu i teł po…
Zastosuj tryb ciemny do dowolnej strony natychmiast
Wymuś tryb ciemny stosuje ciemny schemat kolorów do dowolnej strony, która go nie oferuje — lub nadpisuje jasny motyw witryny.
Natychmiast włączaj lub wyłączaj JavaScript per kartę
Przełącznik JavaScript wyłącza lub ponownie włącza wykonywanie JavaScript dla bieżącej karty przeglądarki jednym kliknięciem.
Wyświetlaj, edytuj, dodawaj i usuwaj cookies dla dowolnej domeny
Edytor cookies wyświetla wszystkie cookies dla bieżącej domeny w czystej, sortowalnej tabeli.
Wyświetlaj wyjście konsoli w pływającym panelu — bez DevTools
Logger konsoli przechwytuje wszystkie wyjścia konsoli (console.log, console.warn, console.error, console.info) i…
Monitoruj wszystkie żądania sieciowe w czasie rzeczywistym
Monitor sieci przechwytuje i wyświetla każde żądanie sieciowe wykonywane przez bieżącą stronę — wywołania XHR/Fetch…
Wyświetlaj, edytuj, dodawaj i usuwaj localStorage i sessionStorage
Edytor Local Storage zapewnia czysty interfejs tabeli do zarządzania wpisami localStorage i sessionStorage dla bieżącej witryny.
Skanuj każdy link na stronie i znajdź zepsute
Sprawdzacz zepsutych linków skanuje każdy link na bieżącej stronie — href kotwic, źródła obrazów, źródła skryptów i…
Natychmiastowy panel wydajności: czas ładowania, statystyki DOM i zasoby
Wydajność strony zapewnia natychmiastowy przegląd wydajności dowolnej strony — metryki czasu ładowania (FCP…
Formatuj, minifikuj i waliduj JSON jednym kliknięciem
Formater JSON upiększa (pretty-print), minifikuje i waliduje pliki JSON bezpośrednio w przeglądarce.
Błyskawicznie koduj i dekoduj tekst do/z formatu Base64
Koder/Dekoder Base64 konwertuje tekst na Base64 i odwrotnie bezpośrednio w przeglądarce.
Koduj i dekoduj ciągi URL jednym kliknięciem
Koder/Dekoder URL konwertuje ciągi znaków URL do i z formy zakodowanej procentowo (percent-encoded).
Błyskawicznie koduj i dekoduj encje HTML
Koder encji HTML konwertuje znaki specjalne (< > & " ') na ich odpowiedniki w postaci encji HTML (< > & " ') i odwrotnie.
Eskapuj i odkodowuj ciągi znaków dla kodu źródłowego
Narzędzie Backslash Escape/Unescape konwertuje ciągi znaków do i z ich formy eskapowanej (\n \t \r \" \' \\ oraz znaki Unicode).
Konwertuj obrazy na Data URI Base64 i odwrotnie
Narzędzie Obraz ↔ Base64 konwertuje pliki obrazów (PNG, JPG, SVG, WebP, GIF) na zakodowane w Base64 ciągi Data URI i z powrotem.
Błyskawiczne dekodowanie tokenów JSON Web Token
Debugger JWT dekoduje i analizuje tokeny JSON Web Token — parsuje nagłówek, ładunek (payload) oraz sygnaturę, wyświetla…
Masowe generowanie identyfikatorów UUID v4
Generator UUID tworzy kryptograficznie silne identyfikatory UUID v4 przy użyciu interfejsu API crypto przeglądarki.
Obliczaj hashe MD5, SHA-1, SHA-256, SHA-384, SHA-512
Generator hashów oblicza kryptograficzne sumy kontrolne (MD5, SHA-1, SHA-256, SHA-384, SHA-512) z dowolnego tekstu.
Generuj kryptograficznie silne hasła
Generator haseł tworzy silne, losowe hasła przy użyciu interfejsu API kryptograficznej losowości przeglądarki.
Testuj wyrażenia regularne na żywo z wyróżnianiem dopasowań
Tester Regex ocenia wyrażenia regularne względem tekstu testowego w czasie rzeczywistym.
Konwertuj formaty Unix, ISO i daty czytelne dla człowieka
Timestamp Converter tłumaczy między znacznikami czasu Unix (sekundy, milisekundy, mikrosekundy, nanosekundy), ISO 8601…
Porównuj dwa bloki tekstu linia po linii
Narzędzie Diff porównuje dwa bloki tekstu i wyróżnia dodane, usunięte oraz niezmienione linie za pomocą kolorów.
Sprawdź współczynnik kontrastu WCAG dla dowolnych dwóch kolorów
Narzędzie do sprawdzania kontrastu oblicza współczynnik kontrastu WCAG 2.1 między dwoma kolorami i ocenia je pod kątem…
Błyskawicznie konwertuj HEX, RGB, HSL, HSV i OKLCH
Konwerter formatów kolorów tłumaczy dowolny kolor między formatami HEX, RGB, HSL, HSV i OKLCH.
Wyodrębnij paletę dominant z dowolnego zdjęcia
Ekstraktor kolorów analizuje dowolny plik graficzny (przeciągnij, wklej lub załaduj) i zwraca do 16 dominujących…
Pobieraj selektory CSS i XPath dla dowolnego elementu
DOM Path Finder pozwala najechać kursorem na dowolny element na stronie, aby odkryć jego unikalny selektor CSS, krótki…
Testuj żądania Cross-Origin i sprawdzaj nagłówki CORS
Tester CORS sprawdza, czy żądanie typu cross-origin z Twojej witryny zostanie dopuszczone przez serwer docelowy.
Przechwytuj ramki WebSocket w czasie rzeczywistym
WebSocket Inspector przechwytuje każdą ramkę WebSocket — wysłaną i odebraną — we wszystkich połączeniach na stronie.
Błyskawicznie skanuj stronę pod kątem uszkodzonych obrazów
Narzędzie skanuje każdy znacznik <img> oraz tła CSS (background-image) na stronie, wykrywa błędy ładowania (404, błędy…
Automatycznie wypełniaj formularze realistycznymi danymi testowymi
Form Filler uzupełnia każde widoczne pole formularza na stronie realistycznymi danymi testowymi — imieniem, adresem…
Konwertuj między formatami CSV i JSON w obu kierunkach
Konwerter CSV ↔ JSON obsługuje pełną konwersję między dwoma najpopularniejszymi formatami tabelarycznymi.
Formatuj, waliduj i przeglądaj XML z podświetlaniem składni
XML Formatter pozwala na upiększanie (pretty-print), minifikację i walidację kodu XML bezpośrednio w przeglądarce.
Upiększaj i formatuj zapytania SQL
SQL Formatter przekształca zminimalizowane lub niechlujne zapytania SQL w czytelny, sformatowany kod.
Zapisuj strony internetowe jako czyste pliki PDF
Funkcja Konwertuj na PDF zapisuje bieżącą stronę jako plik PDF za pomocą natywnego okna drukowania przeglądarki…
Wybierz najlepszy plan dla swojego przepływu pracy. Zacznij za darmo, uaktualnij w dowolnym momencie.
Typowe pytania dotyczące funkcji i użytkowania rozszerzenia DevSuite Pro. Jeśli masz pytanie, odpowiedź może już znajdować się poniżej.
Odwiedź Chrome Web Store, wyszukaj "DevSuite Pro", kliknij "Dodaj do Chrome" i potwierdź wybierając "Dodaj rozszerzenie". Po zainstalowaniu ikona rozszerzenia pojawi się na pasku narzędzi przeglądarki. Kliknij ją, aby uzyskać natychmiastowy dostęp do ponad 64 narzędzi programistycznych.
Narzędzia darmowe (43+) są dostępne dla każdego bez licencji. Narzędzia Pro mają złotą plakietkę PRO i wymagają aktywnej licencji Pro. W wyskakującym okienku możesz zobaczyć, które narzędzia są darmowe, a które pro – darmowe narzędzia nie mają ikony kłódki, podczas gdy narzędzia pro wyglądają na lekko przyciemnione, dopóki nie aktywujesz swojej licencji.
Niektóre witryny mają rygorystyczne zasady bezpieczeństwa treści (CSP), które blokują niektóre działania rozszerzeń przeglądarki. Jest to szczególnie powszechne na stronach bankowych i rządowych. Ponadto wewnętrzne strony Chrome (chrome://) nie zezwalają rozszerzeniom na uruchamianie skryptów treści.
Nie. Wszystkie zmiany wprowadzone za pomocą narzędzi takich jak Przesuń element, Edytor tekstu na żywo, Usuń/Ukryj element i CSS Inspector są tymczasowe. Wpływają one tylko na to, co widzisz w swojej przeglądarce w danej chwili. Odświeżenie strony przywróci wszystko do pierwotnego stanu.
Otwórz okienko DevSuite Pro, kliknij ikonę Ustawienia w prawym górnym rogu. Przewiń w dół do sekcji Licencja, wklej klucz licencyjny w polu wejściowym i kliknij Aktywuj. Jeśli klucz jest poprawny, plakietka zmieni się z FREE na PRO i wszystkie narzędzia pro zostaną natychmiast odblokowane.
Możesz przesunąć dok, przechodząc do Ustawień i wybierając inną pozycję paska bocznego — Góra, Dół, Lewo lub Prawo. Możesz również całkowicie ukryć dok, wyłączając opcję "Pokaż dok na stronach" w Ustawieniach lub naciskając Ctrl+Shift+X w dowolnym momencie.
Nie. DevSuite Pro nie zbiera, nie śledzi ani nie przesyła żadnych danych o przeglądaniu. Wszystkie ustawienia są przechowywane lokalnie w Twojej przeglądarce. Jedyne zewnętrzne zapytanie jest wykonywane podczas aktywacji klucza licencyjnego w celu zweryfikowania klucza na naszym serwerze.
Tak! DevSuite Pro jest dostępny zarówno w Chrome Web Store, jak i Firefox Add-ons. Działa w przeglądarkach Chrome, Edge, Brave i innych opartych na Chromium, a także w Firefoksie.