Generate media-queries, show screen sizes width and link to a list of media-queries snippets.
Breakpoint media-queries Extension
1. Add the extension to your Google Chrome browser.
2. Start resize your window and see where your content are breaking.
3. Click into the Breakpoint icon.
4. Click \"generate code\".
5. Copy the code generated.
6. Past into your style sheets.
Pretty simple and useful.
Version 1.0:
- removed Jquery
- re-built with vanilla javascript
Version 0.7:
- Design improvements.
Version 0.6:
- Design improvements.
Version 0.5:
- Added external link to media-queries snippets with a bunch of devices.
- Design improvements.
Version 0.4:
- update from min-width to max-width.
Version 0.3:
- icon updated.
Credits:
Thanks to David Nemes for the Media-Queries Snippets.
Source Manifest.json
Similar Extensions
Seesponsive 1,000+ 2 ★ 50.46KiB
Responsive Inspector Reloaded 1,000+ 13 ★ 499KiB
Responswitch 1,000+ 2 ★ 55.49KiB
Grid Ruler 1,000+ 335 ★ 288KiB
Tailwind CSS Media Query Inspector 1,000+ 4 ★ 631KiB
Viewport Dimensions 1,000+ 158 ★ 48.58KiB
Viewport Resizer: Ultimate Device Emulator & Website Testing Tool 1,000+ 277 ★ 143KiB
Viewport Detector 1,000+ 3 ★ 153KiB
Responsive Window 1,000+ 9 ★ 5.38KiB
Breakpoint 1,000+ 31 ★ 8.21KiB
Bootstrap Viewport 1,000+ 22 ★ 118KiB
Bootstrap resize tool 1,000+ 11 ★ 45.39KiB
CSS Used 1,000+ 184 ★ 164KiB
Emmet Re:view 1,000+ 162 ★ 74.65KiB
CSSViewer 1,000+ 371 ★ 301KiB
Width and Height Display 1,000+ 34 ★ 17.87KiB
Responsive Viewer 1,000+ 298 ★ 639KiB
Dimensions 1,000+ 454 ★ 17.28KiB
Screen Size 1,000+ 15 ★ 19.14KiB
Web Developer Checklist 1,000+ 54 ★ 32.65KiB
Live editor for CSS, Less & Sass - Magic CSS 1,000+ 266 ★ 2.15MiB
Live CSS Editor 1,000+ 182 ★ 24.38KiB
Window Resizer 1,000+ 2278 ★ 503KiB
Dimensions Inspect | Gridman 1,000+ 87 ★ 816KiB
User reviews
Norbert Akonsi (ID: 000000c572e7f0a7) Voted 5 ★ - Updated 10/03/2019