Есть ли расширение Chrome, которое я могу использовать для тестирования адаптивного дизайна?
Тестирование адаптивного веб-дизайна иногда представляет собой сложную задачу: тестируйте различные разрешения, держите инструменты разработки и инструменты открытыми, чтобы увидеть, что происходит… ну, вы поняли мою точку зрения.
Я ищу что-то, что я могу добавить в Chrome, что позволит мне справиться с этим без особых проблем. Что-то вроде Ctrl+ Shift+ mв Firefox.
С функцией перетаскивания окна для изменения разрешения, а также раскрывающегося списка с некоторыми предопределенными разрешениями.
Есть ли расширение, которое делает это и может помочь мне просто протестировать адаптивные макеты?
В Chrome есть неплохой UI-faker, а также некоторые предустановленные размеры экрана, включающие DPI.
Чтобы получить доступ к этим замечательным инструментам:
Откройте Инструменты разработчика в Chrome, нажав F12.
Откройте «ящик», щелкнув значок, расположенный в правом верхнем углу инструментов разработчика (это символ «больше» рядом с тремя горизонтальными линиями, расположенными друг над другом). Или нажав escв инструменте разработчика
Нажмите на вкладку «Эмуляция».
Сходить с ума. Вы можете эмулировать сенсорные события, координаты геолокации, данные акселерометра, разрешение экрана, пользовательские агенты и т. д.
Обратите внимание, что примерно в версии 30 Chrome эти параметры были перемещены в «ящик», описанный выше, однако в более старых версиях они находились в настройках инструментов разработчика (значок шестеренки).
Я бы посоветовал вам попробовать расширение Window Resizer .
Он дает вам список предопределенных разрешений, до которых окно браузера будет уменьшаться/увеличиваться при их выборе. Он также дает текущий размер отображения окна, поэтому вы можете настроить его вручную, если вам нужно. И поскольку он просто меняет размер окна на определенные разрешения, вы по-прежнему можете получить доступ к инструментам разработчика внутри Chrome.
Я бы посоветовал вам использовать расширение веб-разработчика для Chrome, классная вещь в этом расширении заключается в том, что оно позволяет вам добавлять собственные разрешения для изменения размера окна браузера.
Мало того, он также позволяет добавлять собственные разрешения в адаптивные коллекции...
Вы можете увидеть все эти адаптивные макеты на одном экране, где каждую версию можно свернуть/развернуть.
Помимо этого, существует множество функций, таких как отключение изображений, JavaScript, обработка файлов cookie, отключение CSS и многие другие, которые помогут вам сделать веб-сайты быстрее и чище.
В Chrome есть встроенная функция, которая сделает это за вас. Инструмент предоставляет вам список популярных размеров телефонов для тестирования и дает вам возможность ввести свои собственные. Он также изменяет пользовательский агент вашего браузера, чтобы он соответствовал телефону, который вы хотите использовать.
Чтобы перейти к просмотрщику на телефоне
Мишель