Skip to content

Instantly share code, notes, and snippets.

@tomhodgins
Created January 15, 2020 21:01
Show Gist options
  • Save tomhodgins/cb2be4734172e4df8ad593c736242597 to your computer and use it in GitHub Desktop.
Save tomhodgins/cb2be4734172e4df8ad593c736242597 to your computer and use it in GitHub Desktop.
Paste this into your browser's JS console to view all @media query and @element query breakpoints used on the site
// List all media query breakpoints
import('https://unpkg.com/cssomtools').then(({process, query}) => {
const found = new Set
process(
query(),
rule => {
if (
rule.media
&& rule.media.mediaText
) {
found.add(rule.media.mediaText)
}
}
)
console.group('Media Query Breakpoints')
console.log(found)
console.groupEnd()
});
// List all EQCSS breakpoints
(() => {
const found = new Set
if (
'EQCSS' in window
&& EQCSS.data
&& EQCSS.data.length
) {
EQCSS.data.forEach(query => {
const conditionText = query.conditions.map(({measure, value, unit}) =>
`and (${measure || ''}: ${value || ''}${unit || ''})`
).join(' ')
if (conditionText.length) {
found.add(conditionText)
}
})
}
console.group('EQCSS breakpoints')
console.log(found)
console.groupEnd()
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment