question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Feature Request: Find current breakpoint with Javascript

See original GitHub issue

It would be very useful if we could find out what breakpoint is being displayed at the moment with Javascript.

For example:

if( bootstrapBreakpoint() == "xs" ) { // do something } else { // do something }

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:1
  • Comments:13 (8 by maintainers)

github_iconTop GitHub Comments

6reactions
mdocommented, Dec 31, 2017

Closing out though—no plans to add this ourselves.

2reactions
patrickhlaukecommented, Dec 30, 2017

fwiw, this can be achieved with something like

var lg = window.getComputedStyle(document.documentElement).getPropertyValue('--breakpoint-lg');
if (window.matchMedia("(min-width: "+lg+")").matches) {
  /* do something */
} else {
  /* do something else */
}

(not exhaustively tested, so ymmv)

[edit: and for reference, it’s not possible to use var(--breakpoint-lg) directly in the query tested by matchMedia, as var() is not allowed in that context - hence the slightly awkward acrobatics]

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to detect responsive breakpoints of Twitter Bootstrap 3 ...
You can use IntersectionObserver to detect when a <div class="d-none d-?-block"></div> changes visibility (insert your desired breakpoint). Those CSS classes ...
Read more >
The 16 JavaScript debugging tips you probably didn't know
When it comes to debugging JavaScript, the faster the better. Here are our top 16 tips for faster and more efficient debugging. Read...
Read more >
JavaScript debugging reference - Chrome Developers
Discover new debugging workflows in this comprehensive reference of Chrome DevTools debugging features.
Read more >
debugger - JavaScript - MDN Web Docs
The debugger statement invokes any available debugging functionality, such as setting a breakpoint. If no debugging functionality is ...
Read more >
Debugging in the browser - The Modern JavaScript Tutorial
Breakpoints · Quickly jump to the breakpoint in the code (by clicking on it in the right panel). · Temporarily disable the breakpoint...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found