Stop `z-index: 999999` !!
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
doc
extension
tests
.editorconfig
.eslintrc.js
.gitignore
.travis.yml
README.md
package-lock.json
package.json
testem.json

README.md

DevTools z-index

Build Status Greenkeeper badge

日本語の紹介記事

Stop z-index: 999999 !!

This adds "z-index" sub-pane of Elements panel for Chrome, "z-index" panel for Firefox.

Install

Download from Chrome Web Store Download Firefox add-ons

What for?

You may be shocked by finding how large numbers are used in your page. Unconsidered large numbers would be killed by another larger numbers, and those larger numbers also killed by much-larger numbers like war. That sucks.

This extension offers a table that helps reduce those numbers. You can keep your CSS code clean, maintainable and peaceful.

No more z-index: 2147483647 !!

Chrome extension

https://chrome.google.com/webstore/detail/bcnpmhefiohkpmjacfoanhbjhikegmoe/

z-index pane in Elements panel, where you can find all elements with z-index

Click a selector to inspect the element in Elements panel

Firefox add-on

https://addons.mozilla.org/en-US/firefox/addon/devtools-z-index/

z-index panel where you can find all elements with z-index

Since Firefox doesn't allow us to add nice Inspector (Elements) panel's pane, I added it as a panel.

Code snippet

Basic idea was in Twitter and Gist.

https://gist.github.com/ginpei/073ab5d4679356f29585a9ae02277012

((document, limit) => {
  const data = Array.from(document.querySelectorAll('*'))
    .map((el) => ({zIndex: Number(getComputedStyle(el).zIndex), element: el }))
    .filter(({ zIndex }) => !isNaN(zIndex))
    .sort((r1, r2) => r2.zIndex - r1.zIndex)
    .slice(0, limit);
  console.table(data);
})(document, 50);

Future feature

Honestly, I'm not planning to update since I felt satisfied tough, it would be fun to add following features.

  • Fix: it finds a wrong element when some elements have the same selector (because it searches only by selector)
  • Show useful information like stacking context
  • Show something if an element's z-index is specified by style attribute
  • Ability to update z-index for preview, like DevTools Style sub-pane
  • Set better icon somehow

License

  • MIT

Contact