Chromium Developer Tools – Layers

As a Web Developer, have you ever wished there were a way to determine in which order different elements stack on top of each other? You may have also encountered a scenario where you wish you could see what was being rendered outside of the viewport. 

Thankfully, there is a feature within the Chromium developer tools that makes both actions possible – the Layers tool.

Download the Codebase 

You can download the source code for this project if you do not want to set it up yourself: https://github.com/fearnycompknowhow/chromium-layers-dev-tool

Where can it be found? 

The Layers tool is found buried deep within the developer tools. To find it: 

1. Open the Chromium developer tools by clicking on the menu button on the top-right corner of your browser, open the “More Tools” submenu, and click on “Developer Tools.” 

2. Click the context menu on the top-right corner of the dev tools window, open the “More Tools” submenu, and click on “Layers”: 

View layer ordering

To start, create a simple static site using HTML and CSS. To get the best results, stack multiple elements on top of each other using various position types (I.e., “fixed,” “absolute,” etc.). 

The following screenshot contains a few statically positioned elements (the blue blocks) and a few fixed position elements (the green blocks). Recall that the “static” position is the default position type, and the “fixed” position type positions elements relative to the viewport and not to their parent elements. 

When looking at the site on the left, it is not obvious that there is a blue element underneath the “Fixed 1” element on the top-left corner of the page. It is also not clear that there are 3 green blocks stacked on top of each other on the bottom-left corner of the page. However, when you view the page in the Layers tool, these hidden blocks are easily noticed. 

Notice the Move and Rotate tools on the top-left of the Layers pane. Use these to change the orientation and position of the 3D model to get the best view. 

View off-screen content 

The Layers tool not only shows the render order of elements, but it also shows the content that is being rendered outside of the viewport. Notice what happens when I shrink the window vertically: 

I added two orange lines to clearly show how much of the page is visible on screen. You will notice that “Static 1” and “Static 5” are both off screen, and “Static 2” and “Static 4” are partly off screen. However, the Layers tool clearly renders all the content regardless of whether it is on screen or not. 

Find an element’s DOM position 

If you ever need to identify exactly which element you are seeing in the Layers pane, you can right click on it in within the 3D model or you can right click on it in the list of elements on the left side of the Layers pane:

As a bonus, notice that the element on the page gets highlighted and you can see high-level styling properties when you hover the element in the Layers pane. 

Conclusion

Admittedly, this tool provides benefits for some rather niche scenarios, but that benefit is great when you find yourself in a situation where you need it. 

Thank you for your time; I hope you learned something!