Inspektor układu dla Flexbox i Grid

Chrome DevTools oznacza kontenery flex znacznikiem „flex” obok ich węzła DOM w panelu Elements. Kliknięcie znacznika przełącza nakładkę Flexbox — kolorowe linie pokazujące oś główną, oś poprzeczną, granice elementów i odstępy gap.

Kontenery Grid mają znacznik „grid”. Kliknięcie go przełącza nakładkę siatki: kolorowe linie kolumn, wierszy i odstępów. Trwałe nakładki (przypięte w panelu Layout) pozostają widoczne podczas przewijania i zmiany rozmiaru obszaru widoku.

Karta Layout w DevTools → Elements wyświetla wszystkie kontenery flex i grid na stronie. Kliknięcie nazwy kontenera zaznacza go w DOM i przełącza jego nakładkę. W tym miejscu można skonfigurować wygląd nakładki (kolor linii, widoczność etykiet, rozmiary ścieżek).

Nakładka pokazuje nazwy i rozmiary ścieżek po włączeniu opcji „Show track sizes”. Rozmiary intrynsyczne (auto, min-content, max-content) i jednostki ułamkowe (fr) są wyświetlane jako rozstrzygnięte wartości w pikselach — pokazując, jak jednostki fr dzielą dostępną przestrzeń.

Proszę zaznaczyć element flex (element potomny kontenera flex). Panel Styles pokazuje rozwinięcie skróconej właściwości flex — flex-grow, flex-shrink i flex-basis. Nakładka wyróżnia rozmiar elementu na osi głównej, jego wartość bazową oraz zastosowane powiększenie lub zmniejszenie.

Kontenery siatki z właściwością grid-template-areas pokazują nakładki nazwanych obszarów. Każdy nazwany region ma etykietę i własny kolor. Dzięki tej wizualizacji można łatwo sprawdzić, czy przypisania grid-area odpowiadają zamierzonemu szablonowi układu.

Obsługa subgridu w DevTools wyróżnia kontenery subgrid. Linie ich ścieżek są wyrównane ze ścieżkami siatki nadrzędnej — nakładka pokazuje to wyrównanie, potwierdzając, że elementy subgrid uczestniczą w układzie współrzędnych siatki nadrzędnej.

Nieprawidłowe wyrównanie elementów często wynika z błędnych wartości justify-content, align-items lub align-self. Nakładka flex/grid pokazuje pozycje elementów względem linii osi. Proszę przełączać właściwości wyrównania w panelu Styles i obserwować zmiany nakładki w czasie rzeczywistym.

Nakładka przedstawia odstępy jako kolorowe pasy między elementami. Ułatwia to potwierdzenie wartości gap i ustalenie, czy odstępy wynikają z gap (prawidłowo), czy z margin (który może nieoczekiwanie się zapadać w wierszach flex).

Nakładka siatki rozróżnia ścieżki niejawne (tworzone automatycznie dla elementów wykraczających poza układ) od ścieżek jawnych (zdefiniowanych w grid-template). Linie przerywane oznaczają ścieżki niejawne. Jeśli zawartość tworzy nieoczekiwane ścieżki niejawne, nakładka natychmiast ujawnia schemat przepełnienia.

Proszę połączyć Layout Inspector z Device Mode. Proszę zmieniać rozmiar obszaru widoku i obserwować, jak zawijanie flex oraz ścieżki grid auto-fill/auto-fit są ponownie układane w czasie rzeczywistym. Pozwala to wcześniej wykrywać problemy z responsywnym układem niż ręczne zmienianie rozmiaru okna przeglądarki.

Co pokazuje nakładka siatki DevTools, czego nie widać na wyrenderowanej stronie?

Inspector układu Flexbox i Grid w DevTools przedstawia linie osi, rozmiary ścieżek, odstępy, nazwane obszary i ścieżki niejawne w postaci interaktywnych nakładek. W połączeniu z panelem Layout służącym do zarządzania nakładkami ułatwia debugowanie złożonych układów CSS szybciej i intuicyjniej niż sama analiza kodu CSS.