Inspektor CSS to potężne, bezpłatne narzędzie deweloperskie, które pozwala najechać kursorem na dowolny element strony i natychmiast zobaczyć jego pełne obliczone właściwości CSS. Kliknij, aby zablokować panel inspekcji w miejscu, edytuj style na żywo i obserwuj, jak zmiany są aktualizowane na stronie w czasie rzeczywistym — wszystko bez otwierania DevTools przeglądarki.
Niezależnie od tego, czy debugujesz problem z układem, odtwarzasz design, który podziwiasz, czy szybko sprawdzasz wartości odstępów i typografii, Inspektor CSS daje ci wszystko, czego potrzebujesz, w czystym, pływającym panelu. W przeciwieństwie do DevTools przeglądarki, nie przeszkadza w pracy — żadnych zadokowanych paneli, żadnego zmniejszonego okna. Po prostu najedź, kliknij i sprawdź. Narzędzie pokazuje obliczone style (to, co przeglądarka faktycznie renderuje), a nie tylko napisane CSS. Oznacza to, że widzisz rzeczywiste wartości po rozstrzygnięciu dziedziczenia, specyficzności i kaskadowania — te same wartości, które wpływają na to, co użytkownicy widzą na ekranie.
Najedź na dowolny element, aby natychmiast zobaczyć pełne obliczone CSS — w tym rodzinę czcionki, rozmiar czcionki, wysokość linii, kolor, tło, padding, margines, ramkę, zaokrąglenie rogów, typ wyświetlania, pozycję, z-index i więcej. Właściwości aktualizują się w czasie rzeczywistym, gdy przemieszczasz się między elementami.
Kliknij dowolny element, aby zablokować pływający panel w miejscu. Pozwala to przewijać stronę, korzystać z innych narzędzi lub dokładnie czytać długie listy właściwości bez znikania panelu, gdy mysz oddala się od elementu.
Kliknij dwukrotnie dowolną wartość CSS w panelu, aby edytować ją bezpośrednio. Zmieniaj kolory, dostosowuj odstępy, modyfikuj czcionki — zmiany są natychmiast stosowane do strony. Idealne do szybkich eksperymentów wizualnych przed napisaniem rzeczywistego kodu.
Skopiuj pojedynczą właściwość (np. "color: #333") lub cały blok stylów do schowka jednym kliknięciem. Skopiowany wynik to czyste, sformatowane CSS gotowe do wklejenia do arkusza stylów lub komponentu.
Zobacz pełny model pudełkowy elementu — obszar zawartości, padding, ramkę i margines — wyświetlony wizualnie z wartościami w pikselach dla każdej strony. Natychmiast dostrzegaj asymetryczne odstępy lub nieoczekiwane marginesy.
Zobacz szerokość, wysokość i pozycję elementu na stronie (współrzędne góra, lewa). Ramka ograniczająca jest podświetlona półprzezroczystą nakładką, dzięki czemu widzisz dokładnie, jakie miejsce zajmuje element.
Inspektor CSS pokazuje obliczone wartości dla ponad 40 właściwości CSS, pogrupowane w kategorie:
font-familyfont-sizefont-weightline-heightletter-spacingtext-aligntext-transformcolorwidthheightpaddingmarginborderborder-radiusbox-sizingdisplaypositiontoprightbottomleftz-indexfloatoverflowbackground-colorbackground-imagebackground-sizebackground-positionopacitybox-shadowtext-shadowtransformtransitioncursorNajedź na źle wyrównane elementy, aby natychmiast zobaczyć ich padding, margines i wartości pozycji. Zlokalizuj dokładnie właściwość powodującą problem bez przedzierania się przez panele DevTools przeglądarki.
Odwiedź dowolną stronę, która ci się podoba, i sprawdź jej typografię, odstępy i dobór kolorów. Skopiuj dokładne wartości CSS, aby użyć ich jako punktu odniesienia lub startowego dla własnych projektów.
Użyj edycji na żywo, aby testować zmiany wizualne bezpośrednio na stronie przed napisaniem kodu. Wypróbuj różne rozmiary czcionek, kolory lub wartości odstępów i zobacz rezultat natychmiast.
Podczas przeglądów projektów szybko sprawdź, czy wdrożony projekt odpowiada makiecie. Weryfikuj dokładne wartości pikselowe, rozmiary czcionek i kolory bez przełączania na inne narzędzie.
Budujesz nowy komponent, który powinien pasować do istniejącego projektu? Sprawdź element referencyjny, skopiuj wszystkie jego właściwości CSS i wklej je jako bazowe style komponentu.
Otwórz pływający dok DevSuite Pro (widoczny na każdej stronie) i kliknij ikonę Inspektora CSS. Narzędzie aktywuje się natychmiast — zobaczysz subtelną zmianę kursora wskazującą, że tryb inspekcji jest aktywny.
Przesuń mysz nad dowolnym elementem strony. Obok kursora pojawi się pływający panel pokazujący nazwę tagu, klasy, wymiary i obliczone właściwości CSS elementu. Element jest podświetlony kolorową nakładką pokazującą jego granice.
Znalazłeś element, który chcesz dokładnie zbadać? Kliknij go. Panel zostanie zablokowany w miejscu i nie zniknie po poruszeniu myszą. Teraz możesz przewijać wszystkie właściwości, kopiować wartości lub rozpocząć edycję.
Kliknij dwukrotnie dowolną wartość CSS w zablokowanym panelu, aby przejść do trybu edycji. Wpisz nową wartość (np. zmień "16px" na "20px") i naciśnij Enter. Strona aktualizuje się natychmiast, pozwalając ci podejrzeć zmiany przed wprowadzeniem ich do kodu.
Kliknij ikonę kopiowania obok dowolnej właściwości, aby ją skopiować, lub użyj przycisku "Kopiuj całe CSS" u dołu panelu, aby pobrać wszystkie właściwości naraz. Wklej bezpośrednio do swojego pliku CSS lub arkusza stylów komponentu.
Zainstaluj DevSuite Pro za darmo i odblokuj ponad 39 narzędzi programistycznych dla swojej przeglądarki.