Как настроить в Chrome панель разработчика так, чтобы при работе с ней, внешне был вид реального устройства?

Подскажите пожалуйста, как настроить панель разработчика так, чтобы при работе вид был как на первом фото? Сейчас у меня внешка как на втором?

1 2

Заранее спасибо!


Ответы (1 шт):

Автор решения: yar85

Для отображения рамки устройства, при активном режиме эмуляции вьюпорта надо вызвать меню (кнопка "три точки" вверху справа) и выбрать пункт "Show device frame":

GIF

Рамка отображается не у всех устройств которые можно добавить в список эмулируемых.
И, пункт меню для включения/отключения рамки устройства недоступен при выборе в списке устройств "Responsive", то есть режима свободного изменения размеров вьюпорта.


Больше "скинов" устройств (заявлено 54шт.) есть в браузере Blisk, который тоже основан на исходном коде Chromium. То есть, это почти тот же Chrome - но без встроенной интеграции с гуглосервисами (такими как синхронизация), и с некоторыми дополнительными возможностями взамен (такими как отображение одновременно мобильного и десктопного вида страницы).
// Должен оговориться, что у меня негативный опыт использования Blisk (глючил), но все же советую посмотреть-попробовать: возможно, его старые баги уже устранены...

→ Ссылка