extension ExtPose

z-context

Description from extension meta A Chrome DevTools Extension that displays stacking contexts and z-index values in the elements panel
Image from store z-context
Description from store 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 -------- 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
Latest reviews (2019-10-30) David Rickard: Thanks. Was going crazy trying to figure out why a stacking context was getting created and this one told me exactly why. (2019-06-24) Pedro Torchio: Crazy useful. Can't dev Webapps without it anymore (2019-06-05) Tien Nguyen: could not figure out how to use if :( (2019-05-27) Drazen Bjelovuk: Super handy. (2019-02-10) wesh cousin: I guess this extension might be useful, but it doesn't show every stacking contexts. In my case it didn't show that positioning an element to fixed or sticky creates a stacking context, even without any opacity or z-index rule. as it can be seen here https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context and as it definitely applies. (2018-12-05) Ivan Fedulov: Occurred to be very helpful when I stuck with debugging z-index issue in markup. Would be very nice if displayed properties *current* and *parentStackingContext* will point to real DOM nodes in Elements tab, not just strings with class names (which sometimes are absent when element has inline styles). (2018-09-11) Josh Wright: You have to completely restart Chrome for this extension to start working. Took me a while to figure that out. (2018-09-05) Ben McCallum: Great to understand/debug your z-indexes and stacking contexts. Should def be in DevTools natively :) Thanks heaps. (2018-08-23) vamshi krishna: Could not see the tab in dev tools , even after restarting and refresh . A good how to is helpful (2018-07-31) Ryan Karumanchery: Insanely helpful. I've spent hours trying to figure out the stacking context of my elements, while this extension helped solve my problem in a few minutes. (2017-12-04) Dmitri Pisarev: This extension is very helpful. But I wasted a ton of time because of the bug in it. It reports new stacking context for any value of "will-change", even smth like "will-change: left", which obviously doesn't create a stacking context. According to the spec: "Element with a will-change value specifying any property that would create a stacking context on non-initial value" (2017-09-27) Tristan Scaglia: Perfect to find out which stacking context an element belongs to. (2017-09-15) Nils Lundquist: awesome extension. so useful for debugging unexpected z-index behaviour. (2017-06-08) Dmitrii Dmitriev: Awesome: very useful for checking an element z-index (2017-05-22) Max Dudzinski: Awesome extension, has helped me a lot when trying to level stacking contexts in order to display custom overlays. Light and straight to the point, with good selection of information that it makes available at a glance. Like Aviral said really surprising that its not part of CDT (2017-01-17) Aviral Dasgupta: Works well for what it does. Surprising that this isn't built into CDT already. (2016-08-02) James Williams: Really handy! But why on earth does it need permissions to *change* data on websites I visit? Surely *reading* that data is enough for the current functionality?

About Extpose

Extpose is a service for Chrome extension publishers.
It helps tracking and optimizing browser extension performance in Chrome Web Store.

The most valuable features are available after creating an account.

Learn more

If you are not an extension developer and want to install this extension please proceed to Chrome Web Store

Go to Chrome Web Store

Statistics

Installs
8,087
Category
Rating
4.2692 (26 votes)
Last update / version
2018-02-17 / 1.0.4

Links

Keywords

...
...
...
...
...
and 2 more

Similar extensions