Najlepszy Zestaw narzędzi deweloperskich do projektowania i tworzenia stron WWW

Ponad 64 potężnych narzędzi do inspekcji, pomiaru, przechwytywania, analizy i projektowania stron internetowych bezpośrednio w przeglądarce.

Wszystkie Ulubione Inspekcja Przechwyć Pomiar index.popup_tab_analyse
CSS Inspector
Inspektor animacji
Kopiuj jako Tailwind
Tryb samych obrysów
Pomocnik Tailwind
Outline strony
Detektor komponentów
Przesuń element
Usuń/Ukryj element
Eksportuj element
Kopiuj komponent
Zrzut ekranu
Wyodrębnij obrazy
Grabber SVG
Zamiana obrazów
Generator kodów QR
Jak zacząć

Zacznij korzystać z DevSuite Pro kilkoma kliknięciami

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.

Dodaj rozszerzenie do Chrome

  1. Otwórz Chrome Web Store i wyszukaj rozszerzenie "DevSuite Pro".
  2. Kliknij "Dodaj do Chrome", a następnie potwierdź klikając "Dodaj rozszerzenie" w wyskakującym okienku.

Otwórz dowolną stronę i uruchom narzędzie

  1. Przejdź do dowolnej witryny, następnie kliknij ikonę DevSuite Pro na pasku narzędzi lub użyj pływającego doku na stronie.
  2. Wybierz dowolne narzędzie z siatki. Narzędzia takie jak CSS Inspector, Linijki lub Kroplomierz są aktywowane natychmiast na bieżącej stronie.
Funkcje rozszerzenia

Kluczowe funkcje DevSuite Pro

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ę.

CSS Inspector

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 →

Inspektor elementów

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 →

Linijki i prowadnice

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 →

Wybór koloru

Wybieraj kolory z dowolnego elementu na stronie i kopiuj wartości HEX, RGB lub HSL do schowka jednym kliknięciem.

Dowiedz się więcej →

Zrzut ekranu

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 →

Tester responsywności

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 →
Poznaj więcej narzędzi szczegółowo:
Inspektor CSS DARMOWY

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…

Szkielet strony DARMOWY

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.

Zrzut ekranu DARMOWY

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…

Linijka strony DARMOWY

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…

Inspektor SEO DARMOWY

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…

Paleta kolorów DARMOWY

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.

Edytor cookies DARMOWY

Wyświetlaj, edytuj, dodawaj i usuwaj cookies dla dowolnej domeny

Edytor cookies wyświetla wszystkie cookies dla bieżącej domeny w czystej, sortowalnej tabeli.

Logger konsoli DARMOWY

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…

Formater JSON DARMOWY

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).

& Koder encji HTML DARMOWY

Błyskawicznie koduj i dekoduj encje HTML

Koder encji HTML konwertuje znaki specjalne (< > & " ') na ich odpowiedniki w postaci encji HTML (&lt; &gt; &amp; &quot; &#39;) 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).

64 Obraz &harr; Base64 DARMOWY

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.

Debugger JWT DARMOWY

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…

Generator UUID DARMOWY

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.

Tester Regex DARMOWY

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…

Narzędzie Diff DARMOWY

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…

Tester CORS DARMOWY

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…

Ceny i plany

Proste i przejrzyste ceny

Wybierz najlepszy plan dla swojego przepływu pracy. Zacznij za darmo, uaktualnij w dowolnym momencie.

Podstawowy

Idealny do wypróbowania DevSuite Pro. Nie wymaga karty kredytowej.

$0

Darmowy na zawsze
Zacznij za darmo
  • 43 darmowych narzędzi deweloperskich
  • CSS Inspector i kroplomierz
  • Przechwytywanie zrzutów ekranu
  • Interfejs pływającego doku
  • Wszystkie przyszłe darmowe aktualizacje

Miesięczny Najpopularniejszy

Pełny dostęp do wszystkich ponad 64 profesjonalnych narzędzi. Rozliczany miesięcznie.

$2.99

miesięcznie
Rozpocznij plan miesięczny
  • Wszystkie ponad 64 narzędzi
  • Pełny dostęp do narzędzi Pro
  • Do 3 urządzeń
  • Wsparcie priorytetowe
  • Anuluj w dowolnym momencie

Jednorazowy Najlepsza wartość

Zapłać raz, używaj zawsze. Pełny dostęp do wszystkich ponad 64 narzędzi pro bez opłat cyklicznych.

$29.99

płatność jednorazowa
Kup raz, używaj zawsze
  • Wszystkie ponad 64 narzędzi
  • Pełny dostęp do narzędzi Pro
  • Do 3 urządzeń
  • Wsparcie priorytetowe
  • Brak opłat cyklicznych
DevSuite Pro FAQ section background
FAQ

Często zadawane pytania od użytkowników DevSuite Pro

Typowe pytania dotyczące funkcji i użytkowania rozszerzenia DevSuite Pro. Jeśli masz pytanie, odpowiedź może już znajdować się poniżej.

Jak zainstalować DevSuite Pro?

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.

Jaka jest różnica między narzędziami Darmowymi a Pro?

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.

Dlaczego narzędzie nie działa na niektórych stronach?

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.

Czy moje zmiany na stronie są trwałe?

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.

Jak aktywować licencję Pro?

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.

Jak przesunąć lub ukryć pływający dok?

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.

Czy DevSuite Pro zbiera dane o przeglądaniu?

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.

Czy mogę używać DevSuite Pro w przeglądarce Firefox?

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.