CSS Stacking Context inspector in Chrome with OffiDocs

OPIS:

Run the Chrome online web store extension CSS Stacking Context inspector using OffiDocs Chromium online.

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 - Moved to manifest v3.

Added z-index to the stacking context panel sidepan as well.

• 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ć.

CSS Stacking Context inspector web extension integrated with the OffiDocs Chromium online