CSS Stacking Context інспектор у Chrome за допомогою OffiDocs

ОПИС

Чи пробували ви коли-небудь використати властивість z-index, щоб з’ясувати, що незалежно від того, яке значення ви встановили, воно не працюватиме належним чином? Це тому, що властивість z-index спирається на неявну концепцію під назвою «контексти стекування».

Дізнавшись, що це таке та як вони працюють (інформацію ви можете знайти на MDN), ви можете використовувати це розширення devtools, щоб перевірити ці контексти та усунути будь-яку проблему z-index, з якою ви можете зіткнутися.

Це розширення додасть нову панель, яка показуватиме контексти стекування у вигляді дерева, а також додасть нову бічну панель до панелі елементів з корисною інформацією про вибраний елемент.

Щоб переглянути докладну документацію, перейдіть на сторінку github: https://github.

com/andreadev-it/stacking-contexts-inspector Якщо ви хочете повідомити про проблему або надіслати запит щодо функції, скористайтеся розділом «Проблема» у вищезгаданому репозиторії github.

ЖУРНАЛ ЗМІН: • v.

1.1.13 - Переміщено до маніфесту v3. До бічної панелі контекстної панелі стекування також додано z-індекс.

• v.

1.1.12 — Виправлена ​​помилка, через яку властивості з префіксом постачальника не виявлялися під час перевірки контекстів стекування.

• v.

1.1.11 – Додано значення z-індексу до розділу «Деталі контексту» на бічній панелі.

• v.

1.1.10 - Видалено непотрібний запит дозволу для дотримання Політики безпеки CWS.

• v.

1.1.9 – Реалізовано перевірку вузла DOM контексту в межах iframes і shadowDOM.

Тепер розширення працює також з локальними файлами (file:///схема).

• v.

1.1.8 - Додано попередження про зміну сторінки, підтримку тіньового DOM і базові налаштування.

• v.

1.1.7 - Невеликі виправлення стилю.

Тепер він також доступний у Firefox через деякі незначні зміни коду.

Очищений код.

• v.

1.1.5 - Виправлена ​​помилка, пов'язана з переходом модулів css (нестильований спінер).

• v.

1.1.4 - Додано темну тему (раніше її було неможливо використовувати з увімкненою темною темою).

• v.

1.1.3 - Виправлена ​​помилка навігації сторінкою.

• v.

1.1.2 – Додано підтримку iframes без атрибута "src" (деякі iframe з "src" можуть працювати, але цього не слід очікувати).

Крім того, на бічній панелі (панелі елементів) також було введено індикатор завантаження, а бічна панель тепер має власну кнопку «оновити контексти».

• v.

1.1.1 – Виправлена ​​помилка, через яку не виявлялися статичні контексти, створені їхнім батьківським комп’ютером, які мали гнучкість дисплея або сітку.

• v.

1.1.0 – тепер розширення працює на вкладках, які вже були відкриті під час його встановлення.

— Контекстне меню правої кнопки миші було замінено контекстними кнопками, оскільки воно не працювало належним чином (може бути додано знову в майбутньому).

— Тепер на сторінці дерева контексту відображатиметься індикатор завантаження, коли контекст стекування завантажуватиметься довго.

- З боку розробників увесь код було переміщено до preact, як перший крок, щоб зробити його відкритим кодом.

• v.

1.0.1 – невеликі зміни в доступності та візуальні налаштування.

Додаткова інформація:

- Пропонує Андреа Драготта
- Середня оцінка: 3.92 зірки (сподобалося)
- Розробник Ця електронна адреса захищена від спам-ботів. Ботів, для його перегляду включений JavaScript.

Веб-інспектор контексту стекування CSS extension інтегровано з OffiDocs Chromium онлайн