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
Debuguj i kontroluj animacje CSS w czasie rzeczywistym
Konwertuj CSS dowolnego elementu na klasy użytkowe Tailwind
Wizualizuj kompletną strukturę układu dowolnej strony
Uzyskaj skategoryzowane klasy Tailwind dla dowolnego elementu
Wizualne drzewo HTML nakładane na dowolną stronę
Wykrywaj komponenty React, Vue, Angular i Svelte na dowolnej stronie
Przeciągnij i upuść, aby zmienić pozycję dowolnego elementu
Usuń lub przełącz widoczność dowolnego elementu
Eksportuj dowolny element jako HTML, CSS lub JSON
Generuj komponenty React, Vue i Svelte z dowolnego elementu
Rejestruj widoczny obszar lub zrzuty całej strony
Przeglądaj, wybieraj i pobieraj wszystkie obrazy z dowolnej strony
Znajdź, podejrzyj i pobierz każdy SVG na dowolnej stronie
Wymień dowolny obraz na stronie na własny
Generuj kody QR dla dowolnego URL lub tekstu natychmiast
Pikselowo dokładne linijki, prowadnice i pomiary na dowolnej stronie
Podglądaj wiele viewportów urządzeń jednocześnie
Zmierz dokładne odległości w pikselach między dowolnymi dwoma elementami
Wizualizuj każdy kontekst stosu i warstwę z-index
Sprawdzaj układy CSS Grid i Flexbox z wizualnymi nakładkami
Symuluj punkty uwagi użytkownika na dowolnej stronie
Selektywnie czyść cache, cookies, localStorage i sessionStorage
Wykryj każdą technologię stojącą za dowolną stroną
Kompleksowy audyt SEO: tagi meta, nagłówki, OpenGraph i więcej
Automatyczny audyt WCAG: kontrast, alt text, ARIA i więcej
Kliknij dowolny tekst na dowolnej stronie, aby edytować natychmiast
Wymień dowolną czcionkę globalnie lub per-element z Google Fonts
Odkryj każdą czcionkę używaną na dowolnej stronie
Precyzyjny zakraplacz dla wartości kolorów HEX, RGB i HSL
Wyodrębnij kompletną paletę kolorów z dowolnej strony
Zastosuj tryb ciemny do dowolnej strony natychmiast
Natychmiast włączaj lub wyłączaj JavaScript per kartę
Wyświetlaj, edytuj, dodawaj i usuwaj cookies dla dowolnej domeny
Wyświetlaj wyjście konsoli w pływającym panelu — bez DevTools
Monitoruj wszystkie żądania sieciowe w czasie rzeczywistym
Wyświetlaj, edytuj, dodawaj i usuwaj localStorage i sessionStorage
Skanuj każdy link na stronie i znajdź zepsute
Natychmiastowy panel wydajności: czas ładowania, statystyki DOM i zasoby
Formatuj, minifikuj i waliduj JSON jednym kliknięciem
Błyskawicznie koduj i dekoduj tekst do/z formatu Base64
Koduj i dekoduj ciągi URL jednym kliknięciem
Błyskawicznie koduj i dekoduj encje HTML
Eskapuj i odkodowuj ciągi znaków dla kodu źródłowego
Konwertuj obrazy na Data URI Base64 i odwrotnie
Błyskawiczne dekodowanie tokenów JSON Web Token
Masowe generowanie identyfikatorów UUID v4
Obliczaj hashe MD5, SHA-1, SHA-256, SHA-384, SHA-512
Generuj kryptograficznie silne hasła
Testuj wyrażenia regularne na żywo z wyróżnianiem dopasowań
Konwertuj formaty Unix, ISO i daty czytelne dla człowieka
Porównuj dwa bloki tekstu linia po linii
Sprawdź współczynnik kontrastu WCAG dla dowolnych dwóch kolorów
Błyskawicznie konwertuj HEX, RGB, HSL, HSV i OKLCH
Wyodrębnij paletę dominant z dowolnego zdjęcia
Pobieraj selektory CSS i XPath dla dowolnego elementu
Testuj żądania Cross-Origin i sprawdzaj nagłówki CORS
Przechwytuj ramki WebSocket w czasie rzeczywistym
Błyskawicznie skanuj stronę pod kątem uszkodzonych obrazów
Automatycznie wypełniaj formularze realistycznymi danymi testowymi
Konwertuj między formatami CSV i JSON w obu kierunkach
Formatuj, waliduj i przeglądaj XML z podświetlaniem składni
Upiększaj i formatuj zapytania SQL
Zapisuj strony internetowe jako czyste pliki PDF
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 (20+) 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.