Инспектор контекста стекирования CSS в Chrome с ОфиДокс

ОПИСАНИЕ

Вы когда-нибудь пытались использовать свойство z-index только для того, чтобы обнаружить, что независимо от того, насколько высоко вы его установите, оно не будет работать так, как ожидалось? Это связано с тем, что свойство z-index основано на неявной концепции, называемой «контексты стекирования».

После изучения того, что они собой представляют и как они работают (информацию вы можете найти на MDN), вы можете использовать это расширение devtools для проверки этих контекстов и устранения любых проблем с z-index, с которыми вы можете столкнуться.

Это расширение добавит новую панель, которая будет отображать контексты стекирования в виде дерева, а также добавит новую боковую панель к панели элементов с некоторой полезной информацией о выбранном элементе.

Чтобы просмотреть подробную документацию, посетите страницу github: https://github.

com/andreadev-it/stacking-contexts-inspector Если вы хотите сообщить о проблеме или сделать запрос на добавление функции, воспользуйтесь разделом «Проблема» в вышеупомянутом репозитории GitHub.

ИЗМЕНЕНИЯ: • v.

1.1.13 — Перенесено в манифест v3. Также добавлен z-индекс в боковую панель контекстной панели стекирования.

• с.

1.1.12 — Исправлена ​​ошибка, из-за которой свойства с префиксом поставщика не обнаруживались при проверке контекстов стекирования.

• с.

1.1.11 — Добавлено значение z-index в раздел «Сведения о контексте» на боковой панели.

• с.

1.1.10 — Удален ненужный запрос разрешения для соблюдения политики безопасности CWS.

• с.

1.1.9 — Реализована контекстная проверка узлов DOM внутри iframe иshadowDOM.

Теперь расширение работает и с локальными файлами (схема file:///).

• с.

1.1.8 - Добавлено предупреждение при изменении страницы, поддержка теневого DOM и базовых настроек.

• с.

1.1.7 - Небольшие исправления стиля.

Теперь он также доступен в Firefox из-за небольших изменений кода.

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

• с.

1.1.5 - Исправлена ​​ошибка, связанная с переходом модулей CSS (нестилизованный счетчик).

• с.

1.1.4 - Добавлена ​​темная тема (раньше ее было невозможно использовать с включенной темной темой).

• с.

1.1.3 - Исправлена ​​ошибка навигации по страницам.

• с.

1.1.2 — Добавлена ​​поддержка iframe без атрибута «src» (некоторые iframe с «src» могут работать, но этого не следует ожидать).

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

• с.

1.1.1 — Исправлена ​​ошибка, из-за которой статические контексты, созданные их родителем и имеющие гибкое отображение или сетку, не обнаруживались.

• с.

1.1.0 - Теперь расширение работает на вкладках, которые уже были открыты при его установке.

- Контекстное меню, вызываемое правой кнопкой мыши, заменено контекстными кнопками, поскольку оно работало неправильно (в будущем оно может быть добавлено снова).

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

- Со стороны разработчиков весь код был перенесен в Preact в качестве первого шага к открытию исходного кода.

• с.

1.0.1 — Небольшие изменения доступности и визуальные настройки.

Дополнительная информация:

- Предложено Андреа Драготта
- Средняя оценка: 3.92 звезды (понравилось)
- разработчик Этот адрес электронной почты защищен от спам-ботов. Ботов, для его просмотра включен JavaScript.

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