Inspektor kontekstu układania CSS w Chrome z OffiDocs

OPIS

Czy kiedykolwiek próbowałeś użyć właściwości Z-index, aby przekonać się, że bez względu na to, jak wysoko ją ustawisz, nie będzie działać zgodnie z oczekiwaniami? Dzieje się tak, ponieważ właściwość Z-index opiera się na niejawnej koncepcji zwanej „kontekstami układania”.

Po sprawdzeniu, czym one są i jak działają (informacje można znaleźć na MDN), możesz użyć tego rozszerzenia devtools, aby sprawdzić te konteksty i rozwiązać wszelkie problemy z indeksem Z, jakie możesz napotkać.

To rozszerzenie doda nowy panel, który pokaże konteksty układania w stos w widoku drzewa, a także dołączy nowy pasek boczny do panelu elementów z przydatnymi informacjami o wybranym elemencie.

Aby sprawdzić szczegółową dokumentację, odwiedź stronę github: https://github.

com/andreadev-it/stacking-contexts-inspector Jeśli chcesz zgłosić problem lub poprosić o funkcję, skorzystaj z sekcji Problem we wspomnianym repozytorium github.

DZIENNIK ZMIAN: • w.

1.1.13 — przeniesiono do manifestu v3. Dodano również indeks Z do panelu bocznego panelu kontekstu układania.

• w.

1.1.12 — Naprawiono błąd, który powodował, że właściwości z prefiksem dostawcy nie były wykrywane podczas sprawdzania kontekstów układania.

• w.

1.1.11 - Dodano wartość Z-index do sekcji "Szczegóły kontekstu" na pasku bocznym.

• w.

1.1.10 - Usunięto niepotrzebne prośby o pozwolenie w celu zachowania zgodności z Polityką bezpieczeństwa CWS.

• w.

1.1.9 - Zaimplementowano inspekcję węzłów kontekstowych DOM w elementach iframe i shadowDOM.

Teraz rozszerzenie działa również na plikach lokalnych (file:///schemat).

• w.

1.1.8 - Dodano ostrzeżenie przy zmianie strony, obsługę shadow DOM i podstawowe ustawienia.

• w.

1.1.7 - Małe poprawki stylu.

Teraz jest również dostępny w Firefoksie z powodu kilku drobnych zmian w kodzie.

Wyczyszczony kod.

• w.

1.1.5 - Naprawiono błąd związany z przejściem modułów css (niestylizowany spinner).

• w.

1.1.4 - Dodano ciemny motyw (wcześniej nie nadawał się do użytku przy włączonym ciemnym motywie).

• w.

1.1.3 - Naprawiono błąd w nawigacji strony.

• w.

1.1.2 - Dodano obsługę ramek iframe bez atrybutu „src” (niektóre ramki iframe z „src” mogą działać, ale nie należy się tego spodziewać).

Wskaźnik ładowania został również wprowadzony na pasku bocznym (panel elementów), a pasek boczny ma teraz własny przycisk „odśwież konteksty”.

• w.

1.1.1 — Naprawiono błąd polegający na tym, że konteksty statyczne utworzone przez ich rodziców, mające flex wyświetlania lub siatkę, nie były wykrywane.

• w.

1.1.0 - Teraz rozszerzenie działa na kartach, które były już otwarte podczas instalacji.

- Menu kontekstowe prawego przycisku myszy zostało zastąpione przyciskami kontekstowymi, ponieważ nie działało poprawnie (może zostać ponownie dodane w przyszłości).

- Teraz strona drzewa kontekstu pokaże wskaźnik ładowania, gdy ładowanie kontekstu układania zajmuje dużo czasu.

- Po stronie programisty cały kod został przeniesiony do preact, jako pierwszy krok do uczynienia go open source.

• w.

1.0.1 - Drobne zmiany ułatwień dostępu i poprawki wizualne.

Dodatkowe informacje:

- Oferowane przez Andreę Dragotta
- Średnia ocena: 3.92 gwiazdki (lubię to)
- Deweloper Ten adres pocztowy jest chroniony przed spamowaniem. W przeglądarce musi być włączona obsługa JavaScript, żeby go zobaczyć.

Web inspektora kontekstu układania CSS extension zintegrowany z OffiDocs Chromium Online