A quick and easy solution to this problem is to have your JS import the breakpoints directly from the CSS values in the DOM. This solution brings the current breakpoint variable into your JS in a way that’s:
Simple & Lightweight
Compatible with all browsers that support media queries (IE9+)
$0 in console
Arrow functions in the console
Experimenting with colors
Checking the rendered font
Edit any text on the page
Filtering on the network tab
Twelve Fancy Chrome DevTools Tips
Modify all model properties in the controller rather than the view; let the view have access to the capability via controller functions.
Keep all magic values (if you must have them at all) in the controller accessing them in the view via controller functions.
Evaluate all comparison, computation, and logical expressions in the controller, giving the view access to them via controller functions.
Pass to a controller function only what it does not already know: the loop parameter if in a loop, or no parameters at all if outside of a loop.
4 Keys to a Clean Angular Implementation