Responsive Tester - Mobile View, Breakpoint Checker & CSS Editor

Responsive Tester helps you check responsive design across mobile, tablet, and desktop screen sizes in one browser tab. Preview your website in multiple viewports side by side, follow the same page with synced scrolling, and catch layout problems without repeatedly resizing your browser. Use built-in device sizes, enter custom dimensions, or create viewports from your site’s own CSS breakpoints. With Pro, interact across screens, inspect responsive styles, and edit CSS live while comparing the results. Free features - Preview multiple screen sizes in a scrolling row or a grid. - Keep scrolling synced across viewports, including scrollable areas inside the page. - Choose device presets for phones, tablets, and desktops, or enter custom dimensions. - Detect your site’s CSS breakpoints and create matching viewports in one click. - Drag to resize viewports and check the widths between breakpoints. - Rotate between portrait and landscape, and adjust zoom to fit your workspace. - Spot horizontal overflow with automatic warnings for each viewport. - Capture screenshots of individual viewports. - Choose a light or dark interface, or follow your system theme. Responsive Tester Pro Interaction sync Click, hover, type, and navigate in one viewport to follow the same interactions across the others. Check menus, forms, and responsive layouts together. Breakpoint inspector Pick an element and compare its dimensions and responsive styles across viewport widths. See which properties change as the layout adapts. Live CSS and class editing Inspect matching CSS rules, edit declarations, add rules, and change element classes directly on the page. Preview edits across your open viewports, with media queries controlling where each rule applies. Force states such as :hover and :focus to inspect interactive styles. Change tracking and CSS export Review your changes, undo and redo edits, discard selected changes, and copy edited CSS into your project. Class changes are tracked separately and can be copied as class lists. Saved CSS edits Stylesheet changes and added rules are saved locally and restored when matching rules are available on the same site. Inline styles and class changes last for the current session. Apply exported changes to your source code when you’re ready to ship. AI coding tools through MCP Connect a compatible AI coding client, such as Claude Code or Cursor, to Responsive Tester. Let your agent open pages, compare elements across viewports, inspect responsive styles, edit CSS and classes, and capture screenshots. Requires the local MCP server and a compatible client. Try Pro free Every install includes a 7-day Pro trial with no card required. After the trial, the free preview features remain available. Pro is a one-time purchase for lifetime access with 3 activations and a 30-day money-back guarantee. Getting started Open a website and activate Responsive Tester from the toolbar icon, the right-click menu, or Alt/Option + Shift + V. Choose your viewport sizes and start comparing. Customize the shortcut at chrome://extensions/shortcuts. Requires Chrome 116 or newer. Responsive Tester previews pages at different viewport sizes using your browser’s rendering engine.