BreakpointLens

Understand responsive CSS at a glance. BreakpointLens resolves every @media query in your stylesheets - including ones built from SCSS and LESS variables - to a concrete pixel range and device class, shows it inline, flags overlapping or broken breakpoints with one-click fixes, maps every breakpoint used across your project, and previews your page live at any viewport width, all without leaving the editor.

Highlights

• Inline ranges - 768px -> 1023px | Tablet next to every @media line, even when the value comes from $bp-md, map-get($breakpoints, lg), @screen-md, or @custom-media.
• Breakpoint checks - catch the classic max-width: 768px / min-width: 768px overlap, 1px gaps, queries that can never match, and unresolved variables in the Problems panel, with quick fixes.
• Project inventory - a Breakpoints view listing every breakpoint in the workspace, how often it is used, and near-duplicates like 767px vs 768px vs 769px.
• Live responsive preview - render the page that uses your stylesheet (or your dev server) at the slider width, or every device side by side. Unsaved CSS edits update as you type. Apps with sign-in or embedding protection open in browser mode: a real browser locked to the slider width and mirrored into the panel.
• Smart autocomplete - suggests the breakpoints your project already uses and ready-made queries like "Tablet and up".
• Rich hovers - see the resolved query and which device presets it matches.

Features

Inline breakpoint info

Every @media line gets an after-line annotation with its resolved range and device class:

@media (min-width: 768px) and (max-width: 1023px) { ... }   768px -> 1023px | Tablet
@media (width >= 1440px) { ... }                             1440px+ | Desktop
@media (max-width: 40em) { ... }                             0px -> 640px | Mobile
@media (min-width: $bp-md) { ... }                           768px+ | Tablet -> Desktop
@media print { ... }                                         print only
@media (min-width: 1200px) and (max-width: 900px) { ... }    ⚠ never matches (min 1200px > max 900px)

Lines with a problem are highlighted in the warning color.

The parser understands:

• min-width / max-width / width in px, em, and rem (em/rem at a 16px base)
• Modern range syntax: width >= 768px, 768px <= width, 400px <= width < 700px, <, >, and =
• SCSS: $variables (across files in the workspace), maps with map-get($map, key) / map.get($map, key), #{...} interpolation, quoted media strings, and arithmetic like $md - 1px or $tab * 2
• LESS: @variables, escaped strings ~"(min-width: 768px)", and arithmetic like (@screen-md - 1)
• CSS: @custom-media --tablet (min-width: 768px) used as @media (--tablet)
• not, only, and media types - @media print is shown as print-only, and not all and (max-width: 767px) is resolved to 768px+
• orientation, prefers-color-scheme, hover, pointer, prefers-reduced-motion, prefers-contrast, resolution/pixel-ratio, aspect ratio, min-height/max-height, and more, shown as readable notes
• Conditions combined with and, plus comma-separated query lists
• CSS, SCSS, and LESS files, and <style> blocks inside HTML, Vue, and Svelte files

Breakpoint checks and quick fixes

BreakpointLens reports common responsive bugs in the Problems panel:

For overlaps and gaps, press Ctrl+. (Cmd+. on macOS) and choose Change max-width to 767px - the fix edits just the number so the two ranges meet exactly. When the value comes from a variable, the warning is still shown but no automatic edit is offered, so shared variables are never changed behind your back. Intentional large overlaps and ranges with different orientations or color schemes are not flagged.

Project breakpoint inventory

The Breakpoints view in the Explorer lists every breakpoint used across the workspace, grouped by the width where the layout changes. max-width: 767px and min-width: 768px are counted as the same 768px breakpoint. Each entry shows its device class, how many times it is used, and in how many files; expand it to jump to each usage.

Breakpoints within 3px of each other get a warning icon - 768px and 769px are almost always meant to be the same value, and inconsistencies like that cause the overlaps and gaps above.

Breakpoint Visualizer

Run BreakpointLens: Open Breakpoint Visualizer (or click the device icon in the editor title bar of a stylesheet) to open a panel with:

• A horizontal pixel ruler with device class bands and one colored bar per media query
• An overlap density strip revealing where multiple queries apply at once
• A draggable viewport cursor, slider, and numeric input; queries active at the chosen width light up in the panel and the matching @media lines flash in the editor
• Configurable device preset buttons (iPhone 375, iPad 768, iPad Pro 1024, Laptop 1280, Desktop 1920 by default)
• Warning markers on queries with problems and hatched rows for queries that use unresolved variables
• Click any query row to jump to its line

Live responsive preview

Below the ruler, the Live preview renders a real page at the width you choose:

• Single - the page at the slider width, scaled to fit, so you can drag the slider and watch the layout respond
• Compare devices - every device preset rendered side by side, each labeled with how many queries are active; click one to inspect it at full size

BreakpointLens picks the preview source automatically:

1. An HTML file previews itself.
2. For a stylesheet, it uses an HTML page in the workspace that links it with <link rel="stylesheet">.
3. Otherwise it uses the breakpointLens.previewUrl dev server, if set.

Use Choose page... (or BreakpointLens: Choose Live Preview Page or URL) to pick another page, browse for an HTML file, enter a dev-server URL such as http://localhost:5173, or turn the preview off. The choice is remembered per stylesheet.

With an HTML page, unsaved edits to open HTML and CSS files update the preview as you type, and relative images and fonts keep working. Page scripts are disabled in file previews for safety - use a dev-server URL for JavaScript-rendered apps (React, Vue, Svelte, and so on). SCSS and LESS files preview through the compiled CSS your page loads.

Browser mode for apps with sign-in or embedding protection

Many real apps can't be shown inside an editor panel: they send X-Frame-Options: DENY / SAMEORIGIN or a Content-Security-Policy: frame-ancestors rule, redirect to a single sign-on page, or use a self-signed HTTPS certificate. This is a browser security rule, so no embedded preview can display them.

Before loading a URL, BreakpointLens checks it. If the page can't be embedded, the preview explains exactly why (for example "localhost:4200 refuses to be shown inside another page (X-Frame-Options: DENY)") instead of showing a blank frame, and offers Preview in Chrome at this width:

• BreakpointLens opens Google Chrome, Microsoft Edge, Chromium, or Brave with a separate BreakpointLens profile, locks its viewport to the exact slider width, and mirrors it live into the panel.
• Moving the slider, clicking a device preset, or visualizing a breakpoint resizes the real browser's viewport, so media queries respond exactly as they would on that device.
• Clicks and scrolling in the panel are forwarded to the page. Type and sign in directly in the browser window; the session is kept in the BreakpointLens profile for next time.
• Compare devices captures every device preset from the real browser, side by side.
• Localhost HTTPS certificates (such as the ASP.NET or Angular dev certificates) are accepted.
• Stop ends mirroring and returns to the embedded check; closing the panel stops mirroring but leaves the browser window open. If you close the browser window, press Reload to open it again.

You can also start browser mode directly with BreakpointLens: Preview Page in Browser at Current Width, or pick Preview a URL in a real browser from Choose page.... Set breakpointLens.browserPath to use a specific Chromium-based browser.

Browser mode uses the Chrome DevTools Protocol on a local debugging port bound to 127.0.0.1, and only for the dedicated BreakpointLens profile - your everyday browser profile is never touched.

Autocomplete

• After @media , choose from ready-made queries built from your device boundaries: Mobile only, Tablet and up, Tablet only, Laptop and up, Desktop and up, Dark mode, Reduced motion, Touch devices, Landscape, and Print.
• Inside min-width:, max-width:, or width >=, BreakpointLens suggests the breakpoints your project already uses, ranked by how often they appear. For max-width it suggests the value 1px below the breakpoint (for example 767px), so ranges line up without overlapping.
• In SCSS and LESS, variables that resolve to a length (like $bp-md = 768px) are suggested too.

Hover

Hover an @media query to see its resolved range, what variables resolve to, which device presets it matches, any problems, and a Visualize this breakpoint link.

CodeLens and status bar

Each @media line has a Visualize this breakpoint CodeLens that opens the visualizer with the cursor inside that query's range. When a stylesheet is active, the status bar shows N breakpoints (plus a warning count when there are problems); hover it to list every range, click it to open the visualizer.

Commands

Configuration

Example:

{
  "breakpointLens.deviceBoundaries": { "mobileMax": 639, "tabletMax": 1023, "laptopMax": 1279 },
  "breakpointLens.devicePresets": [
    { "label": "Galaxy S", "width": 360 },
    { "label": "iPad", "width": 768 },
    { "label": "MacBook", "width": 1440 }
  ],
  "breakpointLens.previewUrl": "http://localhost:5173"
}

Enjoying BreakpointLens?

If BreakpointLens makes responsive CSS easier, a quick rating helps others find it. After you have used it for a while it shows a small prompt with Rate BreakpointLens, Remind me later, and No thanks - your choice is remembered. You can also click the ★ in the visualizer or run BreakpointLens: Rate BreakpointLens any time.

Getting started

The extension ships with a walkthrough: open the Command Palette and run Welcome: Open Walkthrough, then pick Get Started with BreakpointLens.

Requirements

• VS Code 1.85.0 or higher

Author

Kanaihya Kumar - kanaihyakmr@gmail.com

License

MIT