1558415 - Better MediaQuery CSS debug

Status: RESOLVED DUPLICATE of bug 1031585

(DevTools :: Responsive Design Mode, enhancement, P3)

Description

[mikaleb]

Attachment: Capture d’écran 2019-06-11 à 09.49.56.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36

Steps to reproduce:

When I want to debug the my css (or sass/scss) style, i open the debug tool and click n the phone icon.

Actual results:

It opens the "adaptative view" but this view have a limited amount of options in regard to what is available on Chrome/ Chromium.

• We only can resize the window from the right border (that's really not clear at all or intuitive, nothing show that's only here).
• We can't adjust zoom directly on this special window
• There is no option for seeing the media queries rules applied by css nor there is option to easily switch between them.

Expected results:

All the contrary of what I listed, therefore something nice to implement would be a debugger for scss / sass, to easily change var or functions from thoses files, maybe possible to save it while working on localhost.