The ResponsiveUI tool in Firefox makes testing CSS Media Queries super easy, it comes with some presets which I’m sure mean something to somebody but since I work mostly in Bootstrap I wanted to have some easy to access Bootstrap presets in there.
Setting devtools.responsiveUI.presets
- In a new window or tab type about:config into the address bar and hit Enter.
- Heed the warning about dragons
- In the Search box type “responsiveUI”
- Double click on the preference named devtools.responsiveUI.presets and then copy & paste the code below into it.
- If you can’t see devtools.responsiveUI.presets either create it as a a string, or save a preset from the ResponsiveUI mode in Firefox which will create the key with a value for you to replace.
- Disable Responsive UI View, refresh the page, then re-enable the responsive view for the settings to take effect.
devtools.responsiveUI.presets Bootstrap Settings
Double click to select all:
[{"key": "bootstrap-xs-max","name": "Bootstrap: Extra Small Max (xs)","width": 767,"height": 1000},{"key": "bootstrap-sm-min","name": "Bootstrap: Small Min (sm)","width": 768,"height": 1000},{"key": "bootstrap-sm-max","name": "Bootstrap: Small Max (sm)","width": 991,"height": 1000},{"key": "bootstrap-md-min","name": "Bootstrap: Medium Min (md)","width": 992,"height": 1000},{"key": "bootstrap-md-max","name": "Bootstrap: Medium Max (md)","width": 1199,"height": 1000},{"key": "bootstrap-lg-min","name": "Bootstrap: Large Min (lg)","width": 1200,"height": 1000}]
Using the Bootstrap Settings
There’s a setting for the smallest and largest Bootstrap Grid breakpoints, and each one between has two – a Min and a Max – to show you the two extremes for each size band.
More devtools.responsiveUI.presets Options
- DjangoFR has posted some good devtools.responsiveUI.presets for a variety of mobile devices
- If you want to make the JSON setting string easier to edit, jsonlint.com is your friend.
- Here you can reset the devtools.responsiveUI.presets to defaults.