Dive Scope

HTML measurement

DiveScope Narzędzie deweloperskie do inspekcji elementów DOM, pomiaru odległości i debugowania stanów CSS. Dostępne funkcje Rysowanie granic Wizualizacja hierarchii elementów DOM wraz z ich wymiarami. * Najedź kursorem na dowolny element na stronie * Wtyczka automatycznie podświetli kontener oraz drzewo wszystkich elementów nadrzędnych * Dodatkowo wyświetlane są rozmiary badanych elementów Pomiar odległości Precyzyjne mierzenie odległości między dwoma elementami. * Aktywuj tryb pomiaru * Kliknij pierwszy element (punkt początkowy) * Kliknij drugi element (punkt końcowy) * Wtyczka wyświetli odległość między wybranymi elementami w pikselach Tryb linijki Dynamiczny pomiar odległości od celownika do wskazanego elementu. * Włącz tryb linijki * Na ekranie pojawi się celownik * Wtyczka wyświetla odległość od celownika do elementu, na który aktualnie najeżdżasz * Możesz zmienić pozycję celownika: wybierz położenie (left/right, top/bottom) i kliknij w element, aby przykleić do niego celownik Debugger Freeze Zamrażanie stanu strony do inspekcji dynamicznych elementów. * Aktywuj funkcję * Masz 1 sekundę na przygotowanie stanu (np. najechanie na dropdown, tooltip) * Po sekundzie wtyczka zamraża style CSS (animacje, transitions) oraz zdarzenia JavaScript * Stan strony pozostaje zamrożony, umożliwiając spokojną inspekcję Odpinanie okna Przycisk w prawym górnym rogu pozwala odpiąć panel wtyczki do osobnego okna.