25.4K ·GitHub
Что это такое?
Изменённый веб-браузер на базе Electron для адаптивной вёрстки: вы видите свой сайт сразу на множестве устройств одновременно и взаимодействуете со всеми ними синхронно. Его позиционируют как незаменимый инструмент для веб-разработчиков.
Изменённый веб-браузер на базе Electron для адаптивной вёрстки: вы видите свой сайт сразу на множестве устройств одновременно и взаимодействуете со всеми ними синхронно. Его позиционируют как незаменимый инструмент для веб-разработчиков.Чем это отличается от простого изменения размера обычного браузера или dev-инструментов?Это отдельное настольное приложение, которое показывает все ваши устройства рядом: прокрутка, клики и ввод текста дублируются на каждом устройстве, а единый инспектор элементов работает сразу для всех. Раскладку предпросмотра можно настроить под себя.
Это отдельное настольное приложение, которое показывает все ваши устройства рядом: прокрутка, клики и ввод текста дублируются на каждом устройстве, а единый инспектор элементов работает сразу для всех. Раскладку предпросмотра можно настроить под себя.Нужен ли Node или какие-то другие инструменты для работы?Нет — это самодостаточное настольное приложение, достаточно просто его установить. Вы просто открываете в нём URL своего локального dev-сервера, как в обычном браузере.
Нет — это самодостаточное настольное приложение, достаточно просто его установить. Вы просто открываете в нём URL своего локального dev-сервера, как в обычном браузере.Есть ли особенности на разных платформах, о которых стоит знать?На Linux приложение поставляется в виде AppImage, и перед использованием вместе с агентом нужно запустить его один раз — так CLI узнаёт, где оно находится. MCP-сервер приложения тоже слушает только localhost.
На Linux приложение поставляется в виде AppImage, и перед использованием вместе с агентом нужно запустить его один раз — так CLI узнаёт, где оно находится. MCP-сервер приложения тоже слушает только localhost.Можно ли сделать скриншоты всех устройств сразу?Да — по одному клику скриншоты делаются для всех устройств в предпросмотре одновременно.
Да — по одному клику скриншоты делаются для всех устройств в предпросмотре одновременно.Изменения в коде подхватываются автоматически (hot reload)?Да, hot reload поддерживается, так что правки появляются во всех предпросмотрах устройств без ручного обновления.
Да, hot reload поддерживается, так что правки появляются во всех предпросмотрах устройств без ручного обновления.Могу ли я тестировать на устройствах, которых нет во встроенном списке?Доступно более 30 встроенных профилей устройств, а ещё можно добавлять свои собственные устройства.
Доступно более 30 встроенных профилей устройств, а ещё можно добавлять свои собственные устройства.Почему стоит использовать это вместо обычных dev-инструментов?Чтобы экономить время на адаптивной вёрстке: в README утверждается, что вы становитесь в 5 раз быстрее, просматривая и тестируя все свои устройства в одном месте вместо того, чтобы проверять каждое по отдельности.
Чтобы экономить время на адаптивной вёрстке: в README утверждается, что вы становитесь в 5 раз быстрее, просматривая и тестируя все свои устройства в одном месте вместо того, чтобы проверять каждое по отдельности.What are similar projects?reactide, redux-devtools-extension, mcp-chrome, redux-devtools, devtools-v6, edgeever, git-history, zustand
reactide, redux-devtools-extension, mcp-chrome, redux-devtools, devtools-v6, edgeever, git-history, zustandWhich topics is it in?responsive-web-design, contributions-welcome, good-first-issue, redux, screenshot, responsive, devtools, agplv3, chrome-extension, browser-extension, electron, browser
responsive-web-design, contributions-welcome, good-first-issue, redux, screenshot, responsive, devtools, agplv3, chrome-extension, browser-extension, electron, browser