English
See more
A Chrome DevTools Extension that displays stacking contexts and z-index values in the elements panel
Latest Version
Version
3.0.0
Update
November 28, 2024
Size
30.48KiB
Developer
Category
Users
7,000+ 
Rating
3.45238 ★
Manifest Version
3
Web Store Status
Extension ID
Languages Support
Permissions
z-context Extension
Why use it? Browsers support a hierarchy of stacking contexts, rather than a single global one. This means that z-index values are often used incorrectly, and arbitrarily high values get set.
By Using Z-Context, you'll know:
- If the current element creates a stacking context, and why
- What its parent stacking context is
- The z-index value
--------
v3.0.0 - Update to manifest v3 and update stacking context rules https://github.com/gwwar/z-context/pull/29
v2.1.0 - Includes http protocol to facilitate development use cases https://github.com/gwwar/z-context/pull/23
v2.0.0 - Adds support for inspecting iframes https://github.com/gwwar/z-context/pull/21 https://github.com/gwwar/z-context/pull/22
v1.1.0 - Adds z-index stacking context rules as of 2021. Adds fixes for position sticky and shadow dom, props to roperzh and edenilan! See pulls 10, 17 and 18 at https://github.com/gwwar/z-context.
v1.0.4 - fixes will-change case. a stacking context is created for opacity/transform but not other values https://github.com/gwwar/z-context/pull/9
v1.0.3 - fixes display reason for flex-items https://github.com/gwwar/z-context/pull/4
v1.0.2 - adds new z-index rules, fixes a bug when inspecting a shadow dom elements. https://github.com/gwwar/z-context/pull/3
v1.0.1 - fix reason message for non-static positions, props to giuseppeg. https://github.com/gwwar/z-context/pull/1
Read more
By Using Z-Context, you'll know:
- If the current element creates a stacking context, and why
- What its parent stacking context is
- The z-index value
--------
v3.0.0 - Update to manifest v3 and update stacking context rules https://github.com/gwwar/z-context/pull/29
v2.1.0 - Includes http protocol to facilitate development use cases https://github.com/gwwar/z-context/pull/23
v2.0.0 - Adds support for inspecting iframes https://github.com/gwwar/z-context/pull/21 https://github.com/gwwar/z-context/pull/22
v1.1.0 - Adds z-index stacking context rules as of 2021. Adds fixes for position sticky and shadow dom, props to roperzh and edenilan! See pulls 10, 17 and 18 at https://github.com/gwwar/z-context.
v1.0.4 - fixes will-change case. a stacking context is created for opacity/transform but not other values https://github.com/gwwar/z-context/pull/9
v1.0.3 - fixes display reason for flex-items https://github.com/gwwar/z-context/pull/4
v1.0.2 - adds new z-index rules, fixes a bug when inspecting a shadow dom elements. https://github.com/gwwar/z-context/pull/3
v1.0.1 - fix reason message for non-static positions, props to giuseppeg. https://github.com/gwwar/z-context/pull/1
Source Manifest.json
{"update_url": "https://clients2.google.com/service/update2/crx",\t"manifest_version": 3,\t"name": "z-context",\t"version": "3.0.0",\t"description": "A Chrome DevTools Extension that displays stacking contexts and z-index values in the elements panel",\t"author": "gwwar",\t"devtools_page": "devtools/index.html",\t"background": {\t\t"service_worker": "background.js"\t},\t"content_scripts": [\t\t{\t\t\t"matches": [\t\t\t\t"http://*/*",\t\t\t\t"https://*/*"\t\t\t],\t\t\t"js": [\t\t\t\t"content-script.js"\t\t\t],\t\t\t"all_frames": true,\t\t\t"run_at": "document_end"\t\t}\t],\t"icons": {\t\t"16": "icons/icon_16.png",\t\t"48": "icons/icon_48.png",\t\t"72": "icons/icon_72.png",\t\t"96": "icons/icon_96.png",\t\t"128": "icons/icon_128.png",\t\t"144": "icons/icon_144.png",\t\t"192": "icons/icon_192.png"\t}}
Read more
