Safari web inspector breaks media queries

safariweb-inspector

Using Safari Version 11.1, whenever I open the web inspector on a web page, all media queries in the CSS stop working. If I close the inspector, the problem goes away. This happens on any site.

Are other people experiencing this? Is there a setting that I've toggled?

Any help would be much appreciated! Thanks.

Best Answer

Probably you enabled "Force Print Media Styles" (a small printer icon in the upper right corner under the Elements tab):

Related Solutions

MacOS – Web Inspector crashes on Safari 7

I have just fixed precisely the same problem on a site. Its annoying when a debugger chokes so it can't help you find the problem!

My problem was caused by a stray class making its way into a style.

<div style="background: #ffb380; padding-bottom:30px; width:300px; text-center;">

Removing the text-center fixed the problem and web-inspector loads correctly. I would expect you also have an error in the page that is causing web-inspector to choke. Two approaches I can recommend:

An online error checker e.g. http://www.onlinewebcheck.com/
Track down the issue by removing content from the page until web-inspector loads.

Where does Safari Web Inspector store images

This indeed looks to be a bug.

You can watch all file access on your system with the opensnoop command. This requires root access - run it, then try hitting the download button - you'll see no access from Safari.

Time to hit Feedback Assistant and tell them what's going on!

The earlier comment is a good workaround - once the image is displayed, just hit CMD-C to copy it for pasting elsewhere.

Best Answer

Related Solutions

MacOS – Web Inspector crashes on Safari 7

Where does Safari Web Inspector store images

Related Question