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
Languages Support
English
See more
Permissions
See more

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

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx","manifest_version": 3,"name": "z-context","version": "3.0.0","description": "A Chrome DevTools Extension that displays stacking contexts and z-index values in the elements panel","author": "gwwar","devtools_page": "devtools/index.html","background": {"service_worker": "background.js"},"content_scripts": [{"matches": ["http://*/*","https://*/*"],"js": ["content-script.js"],"all_frames": true,"run_at": "document_end"}],"icons": {"16": "icons/icon_16.png","48": "icons/icon_48.png","72": "icons/icon_72.png","96": "icons/icon_96.png","128": "icons/icon_128.png","144": "icons/icon_144.png","192": "icons/icon_192.png"}}
Read more

Similar Extensions

icon

DevTools z-index Extension · Developer Tools 7,000+ 13 ★ 22.53KiB

icon

CSS Stacking Context inspector Extension · Developer Tools 7,000+ 21 ★ 262KiB

icon

Web Vitals Extension · Developer Tools 7,000+ 43 ★ 398KiB

icon

CSS Used Extension · Developer Tools 7,000+ 184 ★ 164KiB

icon

Dimensions Extension · Developer Tools 7,000+ 454 ★ 17.28KiB

icon

Xdebug helper Extension · Developer Tools 7,000+ 429 ★ 70.13KiB

icon

Positionable! Extension · Developer Tools 7,000+ 32 ★ 116KiB

icon

Redux DevTools Extension · Developer Tools 7,000+ 726 ★ 1.2MiB

icon

VisBug Extension · Developer Tools 7,000+ 252 ★ 5.38MiB

icon

MobX Developer Tools Extension · Developer Tools 7,000+ 51 ★ 682KiB

icon

BrowserStack Extension · Developer Tools 7,000+ 95 ★ 805KiB

icon

Grid Ruler Extension · Developer Tools 7,000+ 335 ★ 288KiB

icon

LiveReload Extension · Developer Tools 7,000+ 808 ★ 60.78KiB

icon

axe DevTools - Web Accessibility Testing Extension · Accessibility 7,000+ 114 ★ 2.89MiB

icon

Apollo Client Devtools Extension · Developer Tools 7,000+ 266 ★ 490KiB

icon

Refined GitHub Extension · Developer Tools 7,000+ 213 ★ 572KiB

icon

Angular DevTools Extension · Developer Tools 7,000+ 159 ★ 3.2MiB

icon

Requestly - Intercept, Modify & Mock HTTP Requests Extension · Developer Tools 7,000+ 1227 ★ 876KiB

icon

WAVE Evaluation Tool Extension · Accessibility 7,000+ 143 ★ 344KiB

icon

Meteor DevTools Extension · Developer Tools 7,000+ 43 ★ 430KiB

icon

Vue.js devtools (beta) Extension · Developer Tools 7,000+ 149 ★ 2.54MiB

icon

DevTools Theme: Zero Dark Matrix Extension · Developer Tools 7,000+ 545 ★ 56.82KiB

icon

ng-inspect for AngularJS Extension · Developer Tools 7,000+ 87 ★ 585KiB

icon

Accessibility Insights for Web Extension · Developer Tools 7,000+ 37 ★ 3.62MiB

User reviews

icon

Zachary Wiles (ID: 00000003802614d5) Voted 4 ★ - Updated 03/04/2023 I have found that z-context v2.1.0 doesn't work (empty panel) upon first install until the browser is restarted. Temp fix: restart chrome browser after install. FAQ: Where does the Z-index panel appear? On the panel row with the Styles tab, at the very end, probably need to click the disclosure >> You can then rearrange by dragging the tab left.

icon

Rollmops94 (ID: 000000c5ce9b7331) Voted 1 ★ - Updated 01/05/2023 Funktioniert nicht.

icon

Lumbardh Elshani (ID: 0000009ccb7822bd) Voted 1 ★ - Updated 08/19/2022 Not working

icon

Patrick Baumann (ID: 00000009eaa380cb) Voted 1 ★ - Updated 05/12/2022 Not working

icon

Sebastian Vittersø (ID: 0000006683447aa2) Voted 5 ★ - Updated 11/02/2021 Worked wonders, super helpful for solving a problem related to stacking context.