real HTML programmers debug in 3D

Key Takeaways

if you're an HTML programmer you've likely Seen Crazy nested code like this ugly code is one thing but the real problem is that your UI disappeared because you've got a bunch of other junk stacked on top of it this might make you want to gouge your eyes out but luckily there's a better approach first find 3D view in your browser Dev tools you see the browser needs to go through multiple steps to turn your code into actual pixels on the screen composite view will visualize how these steps take place in 3D which is super useful for debugging animations but when something doesn't show up in the Dom the typical solution is to increase the zindex until it shows up but don't do that blind because in 3D view we can visualize the zindex of every single element and finally Dom mode allows us to visualize HTML hell it creates a heat map that shows how all the elements are nested and you can even customize the colors the more complex the result the more it means your website sucks pretty awesome but to use 3D view there's just one catch it's only available in Microsoft Edge