Closed Bug 1558415 Opened 2 years ago Closed 2 years ago

Better MediaQuery CSS debug

Categories

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

69 Branch
Desktop
Unspecified
enhancement

Tracking

(Not tracked)

RESOLVED DUPLICATE of bug 1031585

People

(Reporter: mikaleb, Unassigned)

Details

(Keywords: css3)

Attachments

(1 file)

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.

Type: defect → enhancement
Component: Untriaged → General
Keywords: css3
Hardware: Unspecified → Desktop
Component: General → Inspector
Product: Firefox → DevTools
Component: Inspector → Responsive Design Mode
Priority: -- → P3
Status: UNCONFIRMED → RESOLVED
Closed: 2 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 1031585
You need to log in before you can comment on or make changes to this bug.