Responsive Tester - Мобильный вид, проверка брейкпоинтов и редактор CSS

Любая страница на нескольких экранах сразу. Проверяйте мобильный вид, размеры и брейкпоинты, редактируйте CSS вживую.

Responsive Tester помогает проверять адаптивный дизайн на экранах телефонов, планшетов и компьютеров в одной вкладке браузера. Откройте сайт в нескольких областях просмотра рядом, перемещайтесь по одной и той же странице с синхронной прокруткой и находите проблемы вёрстки без постоянного изменения размера окна браузера. Выбирайте готовые размеры устройств, задавайте свои или создавайте области просмотра на основе CSS-брейкпоинтов самого сайта. С Pro можно синхронизировать взаимодействия между экранами, исследовать адаптивные стили и редактировать CSS в реальном времени, сравнивая результаты. Бесплатные функции - Просмотр страницы на экранах разных размеров в прокручиваемом ряду или сетке. - Синхронизация прокрутки между областями просмотра, включая прокручиваемые блоки внутри страницы. - Готовые размеры телефонов, планшетов и компьютеров, а также настройка собственных размеров. - Определение CSS-брейкпоинтов сайта и создание соответствующих областей просмотра одним нажатием. - Изменение размера областей просмотра перетаскиванием для проверки ширины между брейкпоинтами. - Переключение между портретной и альбомной ориентацией и настройка масштаба под рабочее пространство. - Автоматические предупреждения о горизонтальном переполнении в каждой области просмотра. - Скриншоты отдельных областей просмотра. - Светлый или тёмный интерфейс либо тема в соответствии с настройками системы. Responsive Tester Pro Синхронизация взаимодействий Нажимайте, наводите указатель, вводите текст и переходите по страницам в одной области просмотра, чтобы наблюдать те же действия в остальных. Проверяйте меню, формы и адаптивную вёрстку одновременно. Инспектор брейкпоинтов Выберите элемент и сравните его размеры и адаптивные стили при разной ширине области просмотра. Узнайте, какие свойства меняются при перестроении макета. Редактирование CSS и классов в реальном времени Исследуйте соответствующие CSS-правила, редактируйте объявления, добавляйте правила и меняйте классы элементов прямо на странице. Проверяйте изменения во всех открытых областях просмотра: медиазапросы определяют, где применяется каждое правило. Принудительно включайте состояния :hover и :focus для проверки интерактивных стилей. Учёт изменений и экспорт CSS Просматривайте изменения, отменяйте и повторяйте правки, сбрасывайте выбранные изменения и копируйте отредактированный CSS в свой проект. Изменения классов учитываются отдельно, их можно копировать в виде списков классов. Сохранение изменений CSS Изменения таблиц стилей и добавленные правила сохраняются локально и восстанавливаются, когда на том же сайте доступны соответствующие правила. Встроенные стили и изменения классов действуют в течение текущего сеанса. Когда будете готовы опубликовать изменения, перенесите экспортированные правки в исходный код. ИИ-инструменты для программирования через MCP Подключите к Responsive Tester совместимый ИИ-клиент для программирования, например Claude Code или Cursor. Агент сможет открывать страницы, сравнивать элементы между областями просмотра, исследовать адаптивные стили, редактировать CSS и классы, а также делать скриншоты. Требуются локальный MCP-сервер и совместимый клиент. Попробуйте Pro бесплатно Каждая установка включает 7-дневный пробный период Pro без банковской карты. После его завершения бесплатные функции просмотра остаются доступны. Pro приобретается одним платежом и предоставляет бессрочный доступ с 3 активациями и 30-дневной гарантией возврата денег. Начало работы Откройте сайт и включите Responsive Tester с помощью значка на панели инструментов, контекстного меню правой кнопки мыши или Alt/Option + Shift + V. Выберите размеры областей просмотра и начните сравнение. Настройте сочетание клавиш на странице chrome://extensions/shortcuts. Требуется Chrome 116 или новее. Responsive Tester отображает страницы в областях просмотра разных размеров с помощью движка вашего браузера.