How to debug safe-area-inset-top etc. using chrome/firefox dev tools

Question

When designing for newer iPhones/devices with a notch, I use safe-area-inset-* a lot. I would like to preview what my layout is going to look like on my PC though, because it's sometimes not possible to use a native device. Is there an option in Firefox/Chrome devtools, so that I don't have to go through deploying to staging every time?

Answer 1

There is still (as of September 2025) no way of simulating the notch/nonsafe areas in Chrome or Firefox devtools - although the feature is in development for Chromium.

There aren't any Bugzilla issues for Firefox Devtools.

In the meantime here are two solutions better than deploying to staging:

• Simulate devices on MacOS and access your site on localhost:

/Applications/Xcode.app/Contents/Developer/Applications/Simulator.app/Contents/MacOS/Simulator -CurrentDeviceID 8528838E-4B47-4F0E-B415-E87F8C8A6163

• Run a local web server and access your site over LAN. Guide