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 - iframe 및 shadowDOM 내에서 컨텍스트 DOM 노드 검사를 구현했습니다.

이제 확장은 로컬 파일(file:/// 스킴)에서도 작동합니다.

• V.

1.1.8 - 페이지 변경 시 경고 추가, Shadow DOM 지원 및 기본 설정.

• V.

1.1.7 - 약간의 스타일 수정.

이제 약간의 코드 변경으로 인해 Firefox에서도 사용할 수 있습니다.

정리된 코드.

• V.

1.1.5 - css 모듈 전환(스타일이 지정되지 않은 스피너)과 관련된 버그가 수정되었습니다.

• V.

1.1.4 - 어두운 테마를 추가했습니다(이전에는 어두운 테마를 사용하면 사용할 수 없었습니다).

• V.

1.1.3 - 페이지 탐색 버그 수정.

• V.

1.1.2 - "src" 속성이 없는 iframe에 대한 지원이 추가되었습니다("src"가 있는 일부 iframe은 작동할 수 있지만 예상하지 않아야 함).

또한 로드 표시기가 사이드바(요소 패널)에도 도입되었으며 이제 사이드바에 자체 "새로 고침 컨텍스트" 버튼이 있습니다.

• V.

1.1.1 - 부모가 만든 정적 컨텍스트가 감지되지 않는 디스플레이 플렉스 또는 그리드가 있는 버그를 수정했습니다.

• V.

1.1.0 - 이제 확장 프로그램이 설치될 때 이미 열려 있던 탭에서 작동합니다.

- 오른쪽 클릭 상황에 맞는 메뉴가 제대로 작동하지 않았기 때문에 상황에 맞는 버튼으로 대체되었습니다(향후 다시 추가될 수 있음).

- 이제 스택 컨텍스트를 로드하는 데 시간이 오래 걸리면 컨텍스트 트리 페이지에 로딩 표시기가 표시됩니다.

- 개발자 측에서는 오픈 소스로 만들기 위한 첫 번째 단계로 모든 코드를 preact로 옮겼습니다.

• V.

1.0.1 - 작은 접근성 변경 및 시각적 조정.

추가 정보 :

- 안드레아 드라고타 제공
- 평균 평점 : 별 3.92개(좋아요)
-개발자 이 이메일 주소는 스팸봇으로부터 보호됩니다. 당신은 자바 스크립트를 활성화해야합니다.

CSS Stacking Context 인스펙터 웹 extension OffiDocs와 통합 Chromium 온라인