Plenty of developers add their own little widget in to the webpages to help them identify which break point they are currently in.
This is fine but.. Just fine! But it comes with some caveats like requiring environmental switches to hide on production, getting in the way of the UI which can sometimes cause usability issues.
This Browser Extension (Firefox & Chrome) adds an extension icon within your toolbar that displays the currently configured breakpoint.
Out of the box we ship with the default Tailwind CSS configuration, however you're free to modify this however you like via the extension options, you don't even need to be using Tailwind! In fact this is completely framework agnostic, simply enter the media queries you'd like to monitor within the options and you are away!
- Visit us on the Chrome Web Store!
- Or Firefox Addons!
Once installed, pin the extension to your browser toolbar, then click the Icon to open the configuration.
Make sure you enable the plugin, and are happy with the breakpoint configuration.
If you're happy click save.
You'll need to refresh your browser tabs for it to kick in.
After this is done, you should be able to resize your browser and see the breakpoint icon change!
Enjoy!