Debug z-index snippet

readme.md

Debug z-index spippet

How to install

• Open up the Chrome DevTools.

• Switch to the Sources tab.

• It the left column tabs ("Page", "Filesystem", "Overrides", ...) pick Snippets.

• Create a new one, paste the code and save it using any name you like.

How to use

• Inspect any element

• Hit Control (Command) + Shift + P. The command palette would show up.

• Erase the > in the text field and type ! instead.

• Select the snippet and run it with Enter (Return).

Debug z-index.js

console.table(
	$x('ancestor-or-self::*', $0).reverse().map(el => {
		const computedStyle = el.ownerDocument.defaultView.getComputedStyle(el);
		return { element: el, 'z-index': computedStyle.zIndex, position: computedStyle.position };
	})
);