Есть ли расширение Chrome, которое я могу использовать для тестирования адаптивного дизайна?

Мишель

Есть ли расширение Chrome, которое я могу использовать для тестирования адаптивного дизайна?

Тестирование адаптивного веб-дизайна иногда представляет собой сложную задачу: тестируйте различные разрешения, держите инструменты разработки и инструменты открытыми, чтобы увидеть, что происходит… ну, вы поняли мою точку зрения.

Я ищу что-то, что я могу добавить в Chrome, что позволит мне справиться с этим без особых проблем. Что-то вроде Ctrl+ Shift+ mв Firefox.

Отзывчивый дизайн Firefox

С функцией перетаскивания окна для изменения разрешения, а также раскрывающегося списка с некоторыми предопределенными разрешениями.

Предустановленное разрешение

  • Работает в Chrome (расширение)
  • Имейте предопределенные разрешения ИЛИ поле для информирования о конкретном разрешении
  • Возможность перетаскивания для создания разрешений (например, окна)
  • Уметь открывать и использовать инструменты разработчика Chrome

Есть ли расширение, которое делает это и может помочь мне просто протестировать адаптивные макеты?

Мишель

PS: Было бы здорово, если бы это был бесплатный инструмент

Джаспер

В Chrome есть неплохой UI-faker, а также некоторые предустановленные размеры экрана, включающие DPI.

Чтобы получить доступ к этим замечательным инструментам:

  1. Откройте Инструменты разработчика в Chrome, нажав F12.

  2. Откройте «ящик», щелкнув значок, расположенный в правом верхнем углу инструментов разработчика (это символ «больше» рядом с тремя горизонтальными линиями, расположенными друг над другом). Или нажав escв инструменте разработчика

    ящик стола

  3. Нажмите на вкладку «Эмуляция».

  4. Сходить с ума. Вы можете эмулировать сенсорные события, координаты геолокации, данные акселерометра, разрешение экрана, пользовательские агенты и т. д.

Обратите внимание, что примерно в версии 30 Chrome эти параметры были перемещены в «ящик», описанный выше, однако в более старых версиях они находились в настройках инструментов разработчика (значок шестеренки).

Мишель

Не пытайтесь открыть дискуссию. Зайдите в чат, чтобы обсудить темы.

Мишель

У него нет разрешения 1900x1200, и его нельзя изменить. (Это отлично подходит для мобильных устройств)

Джаспер

@Michel Под «нельзя изменить размер» вы имеете в виду, что другие инструменты позволяют вам просматривать область просмотра, превышающую разрешение вашего экрана?

пользователь1086

Я бы посоветовал вам попробовать расширение Window Resizer .

Он дает вам список предопределенных разрешений, до которых окно браузера будет уменьшаться/увеличиваться при их выборе. Он также дает текущий размер отображения окна, поэтому вы можете настроить его вручную, если вам нужно. И поскольку он просто меняет размер окна на определенные разрешения, вы по-прежнему можете получить доступ к инструментам разработчика внутри Chrome.

Джаспер

Большой флаг на расширении Window Resizer. Раньше я использовал его, но люди, которые его разработали, решили, что они не получают достаточно денег за счет пожертвований, поэтому они включили некоторый код, добавляющий рекламные ссылки на страницы. Это не было задокументировано создателями, и я считаю, что меня удалили, но я не вижу возможности доверять разработчикам. Также эта функция уже существует в Chrome.

Мистер Чужой

Я бы посоветовал вам использовать расширение веб-разработчика для Chrome, классная вещь в этом расширении заключается в том, что оно позволяет вам добавлять собственные разрешения для изменения размера окна браузера.

введите описание изображения здесь


Мало того, он также позволяет добавлять собственные разрешения в адаптивные коллекции...

введите описание изображения здесь

Вы можете увидеть все эти адаптивные макеты на одном экране, где каждую версию можно свернуть/развернуть.

введите описание изображения здесь

Помимо этого, существует множество функций, таких как отключение изображений, JavaScript, обработка файлов cookie, отключение CSS и многие другие, которые помогут вам сделать веб-сайты быстрее и чище.

Том

В Chrome есть встроенная функция, которая сделает это за вас. Инструмент предоставляет вам список популярных размеров телефонов для тестирования и дает вам возможность ввести свои собственные. Он также изменяет пользовательский агент вашего браузера, чтобы он соответствовал телефону, который вы хотите использовать.

Чтобы перейти к просмотрщику на телефоне

  1. Нажмите F12клавишу или откройте инструменты разработчика
  2. Нажмите на значок телефона/планшета
  3. Выберите из раскрывающегося списка размеры, которые вы хотели бы использовать.

Скриншот