Item logo image for z-context

z-context

Featured
3.5(

41 ratings

)
Item media 1 screenshot
Item media 2 screenshot

Overview

A Chrome DevTools Extension that displays stacking contexts and z-index values in the elements panel

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

3.5 out of 541 ratings

Google doesn't verify reviews. Learn more about results and reviews.

Details

  • Version
    3.0.0
  • Updated
    November 28, 2024
  • Offered by
    gwwar
  • Size
    30.48KiB
  • Languages
    English
  • Developer
    Email
    kerryliu@gmail.com
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

The developer has disclosed that it will not collect or use your data.

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes

Related

VisBug

4.8(252)

Open source browser design tools

MobX Developer Tools

3.4(51)

Dev-tools for MobX and React

BrowserStack

2.9(95)

Instantly test your webpage on any desktop or mobile browser.

Grid Ruler

3.8(335)

Create grids and measure their distance easily.

DevTools z-index

3.5(13)

Print all elements with z-index sorted by that number.

CSS Stacking Context inspector

3.9(21)

Helps inspecting the css stacking contexts and solving the z-index war.

Web Vitals

4.2(43)

Measure metrics for a healthy site

CSS Used

4.5(184)

Get all css rules used by the selected DOM and its descendants.

Dimensions

4.1(454)

A tool for designers to measure screen dimensions

Xdebug helper

4.4(429)

Easy debugging, profiling and tracing extension for Xdebug

Positionable!

3.6(32)

An extension for visually manipulating elements in the browser.

Redux DevTools

4.6(726)

Redux DevTools for debugging application's state changes.

VisBug

4.8(252)

Open source browser design tools

MobX Developer Tools

3.4(51)

Dev-tools for MobX and React

BrowserStack

2.9(95)

Instantly test your webpage on any desktop or mobile browser.

Grid Ruler

3.8(335)

Create grids and measure their distance easily.

DevTools z-index

3.5(13)

Print all elements with z-index sorted by that number.

CSS Stacking Context inspector

3.9(21)

Helps inspecting the css stacking contexts and solving the z-index war.

Web Vitals

4.2(43)

Measure metrics for a healthy site

CSS Used

4.5(184)

Get all css rules used by the selected DOM and its descendants.

Google apps