Новый режим устройства для первого поколения мобильных устройств
Чуть больше года назад мы представили режим устройства, способ эмулировать устройства и работать с адаптивным дизайном. Теперь пришло время первого крупного обновления, начиная с Chrome 49. Итак, что нового?
Мобильные устройства становятся отправной точкой в Chrome DevTools. Хотя в прошлом мы предлагали способы эмуляции мобильных устройств, при разработке по умолчанию использовался настольный компьютер. Мобильную эмуляцию всегда приходилось включать. Теперь, когда потребление мобильных сайтов во многих местах обогнало настольные компьютеры, мы также меняем свою позицию в DevTools.
Что нового?
Прежде всего, пользовательский интерфейс оптимизирован и занимает намного меньше места. Мы ожидаем, что новый режим устройства станет основным режимом разработки для большинства, поэтому требовался чистый и простой дизайн, расширяющий основную панель навигации DevTools.
Новая линейка устройств быстрого перехода по медиа-запросам.
Кроме того, мы центрировали область просмотра и добавили новую линейку устройств быстрого перехода вверху, которая очень помогает при адаптивном проектировании и дает представление о наиболее распространенных размерах устройств.
И, наконец, многие опции по возможности объединены или спрятаны за переключателем. Эти новые композитные параметры значительно упрощают переключение между режимами. Чтобы переключить определенные элементы управления или настроить панель инструментов, нажмите на маленький трехточечный значок меню.
Адаптивный по умолчанию
Основная панель инструментов DevTools теперь расширяется в левой части окна браузера и включает в себя наиболее важные инструменты для эмуляции различных мобильных и настольных устройств. Вы можете выбрать один из двух режимов разработки:
- Отзывчивый
- Конкретное устройство
В обоих режимах область просмотра находится в отдельном окне изменяемого размера в Chrome. Это имеет значительное преимущество: вы можете максимизировать окно браузера и DevTools так, как вам нравится, и не заставлять их прыгать, когда вы тестируете несколько размеров своей страницы и перемещаетесь туда и обратно.
Адаптивный режим — это режим, в котором вам следует находиться во время активной итерации, чтобы ваш сайт работал на всех типах устройств, а не только на нескольких конкретных. В этом режиме размеры маркеров рядом с областью просмотра можно свободно изменять.
Конкретное устройство означает, что вы выбираете конкретное устройство и фиксируете область просмотра в соответствии с его размером. Это становится полезным, когда вы хотите получить окончательные исправления и доработки для нескольких популярных устройств перед запуском. Именно поэтому в раскрывающемся списке мы показываем не просто огромный список всевозможных устройств, а самые популярные на данный момент. Если вы выберете один из них, мы сделаем все возможное, чтобы его поведение было максимально приближено к реальному: события касания, пользовательский агент, область просмотра, хром устройства и пользовательский интерфейс (если доступен) эмулируются.
Интегрированная удаленная отладка
Эмуляции, даже самые лучшие из доступных, не помогут вам добиться определенного результата. Есть просто вещи, которые эмуляции сегодня не могут сделать, например:
- Проверьте, достаточно ли большая кнопка для вашего большого пальца.
- Проверьте производительность вашего сайта на более медленном телефоне.
- Отладка случайных особенностей и ограничений определенных устройств.
Чтобы в достаточной степени протестировать все эти сценарии, вам необходимо тестировать, работать и отлаживать, используя реальные физические устройства.
Уже некоторое время вы можете перейти на chrome://inspect , подключить свое устройство через USB и открыть сеанс удаленной отладки через DevTools. Но теперь мы пошли еще дальше и изменили внешний вид и поведение удаленной отладки, встроив ее в ядро DevTools. Вместо перехода на другую страницу теперь вы можете получить доступ к «Проверке устройств» в виде диалогового окна непосредственно в новом главном меню. Это значительно упрощает включение физической отладки в ваш рабочий процесс — просто подключите телефон и не нужно выходить из DevTools!
Новые дома для остальных элементов управления эмуляцией.
Поскольку мобильные устройства теперь используются по умолчанию в DevTools, такие функции, как регулирование сети, переместились в свое место, в данном случае на панель сети.
Некоторые функции, такие как эмуляция датчиков или настройки рендеринга, такие как эмуляция печатных носителей, были перенесены в постоянное место в ящике. Вы можете найти все дополнительные возможности в новом главном меню в разделе «Дополнительные инструменты».
Мы знаем, что это значительное изменение, к которому нам всем придется привыкнуть. Полную информацию обо всем, что там есть, вы найдете в только что обновленной документации по режиму устройства . Мы будем рады услышать ваше мнение в Твиттере или, если вам нужно более 140 символов, в нашем трекере ошибок (да, даже для запросов на добавление функций).