Toggle device toolbar что это

8

Обзор Chrome DevTools. Решаем основные задачи веб-разработчика

Мы продолжаем цикл статей об инструментах разработчика — Chrome DevTools. В первых двух частях мы уже познакомились с вкладками Elements, Console, Sources и Network и разобрались с их основными функциями.

Возможности Chrome DevTools огромны. С их помощью можно изменять анимацию, проверять доступность, отлавливать ошибки, следить за производительностью сайта и выполнять многие другие задачи. Но на начальных этапах обучения веб-разработке не обязательно разбираться со всеми функциями. Достаточно знать набор базовых инструментов, который понадобится для решения повседневных задач.

Давайте разберёмся, какие задачи можно решить с помощью Chrome DevTools

Посмотреть, как выглядит страница с телефона и планшета

При создании адаптивных сайтов или веб-приложений полезно знать, как выглядит страница на планшете и мобильных устройствах. С помощью инструментов разработчика вы можете сделать это за несколько секунд. Для этого откройте Chrome Devtools, а затем кликните на иконку Toggle device toolbar в левом углу или нажмите комбинацию Ctrl+Shift+M:

Над страницей появится панель с режимами эмуляции из мобильных устройств и планшетов. По умолчанию панель инструментов открывается в режиме адаптивного окна просмотра. Чтобы изменить область до нужных размеров, задайте ширину или потяните за границы рабочей области. А если хотите увидеть, как страница отображается на конкретных устройствах, например, на iPhone 5, кликните на Responsive и выберите подходящий девайс.

Так выглядит страница в мобильной версии

На этой же панели есть еще одна полезная кнопка — DPR (Device Pixel Ratio). С её помощью проверяют, как выглядят изображения на ретина-дисплеях — экранах с повышенной плотностью. Чтобы посмотреть, как выглядит графика на разных устройствах, измените значение DPR и обновите страницу.

Быстро изменить стили прямо на странице

В процессе разработки бывает удобно менять стили прямо в браузере. Например, чтобы проверить, как выглядит элемент с новыми CSS-правилами, или выровнять его при вёрстке под PixelPerfect.

Менять стили в Chrome DevTools можно во вкладке Elements. Сначала выберите элемент, который хотите изменить. Для этого кликните по нему в дереве DOM или активируйте иконку выбора, а затем прямо на странице нажмите на этот элемент.

Меняем элемент прямо на странице

После этого в разделе Styles добавьте, удалите или поменяйте стилевые правила.

В разделе Styles также можно проверять, задавать и исправлять стилевые правила для :hover , :active , :focus и других псевдоклассов. Чтобы это сделать, выберите элемент, которому задано интерактивное состояние. Затем в разделе Styles нажмите на кнопку : hov, выберите подходящий псевдокласс и управляйте его стилями.

Изменяем стилевые правила для псевдоэлементов

Протестировать блоки на переполнение

Во вкладке Elements можно редактировать не только стили, но и DOM-дерево: добавлять и удалять элементы или блоки, менять текст, управлять атрибутами и классами. Это очень удобно, особенно если нужно протестировать какую-то гипотезу или проверить ошибки в вёрстке.

Одна из задач, выполняемых разработчикам с помощью Chrome DevTools — тестирование вёрстки на переполнение. То есть проверка, как ведут себя блоки и элементы при добавлении контента или изменении размеров страницы. Например, вы можете проверить, не выходит ли текст за рамки блока или не выпадают ли элементы из общего потока.

Популярный среди разработчиков мем и заодно пример того, как не нужно делать: вёрстка не должна ломаться при добавлении новых элементов, увеличении текста или изменении размеров страницы.

Как проверить элемент на переполнение текстом

Во вкладке Elements найдите в DOM-дереве элемент, кликните по нему два раза и добавьте текст:

Добавлять текст можно и на самой странице. Для этого откройте соседнюю вкладку Console, введите команду document.body.contentEditable = true и нажмите Enter. После запуска команды вы сможете нажать на элемент и отредактировать его.

Переполнение родительских блоков

Чтобы проверить, не выпадают ли блоки из потока и сохраняется ли сетка, найдите родителя и ему добавьте несколько дополнительных дочерних элементов. Для этого кликните на одном из таких элементов правой кнопкой мыши и нажмите на Duplicate Element.

Пример переполнения: элементы выпадают из родительского блока.

Узнать, какие файлы подключены, и посмотреть их расположение

Порой разработчикам нужно проверить подключенные к проекту файлы и посмотреть их содержимое. В таких случаях на помощь приходит вкладка Sources:

Слева на панели находятся все загруженные ресурсы. Справа — редактор, в котором можно просмотреть любой из загруженных файлов, в том числе изображения. Здесь же можно редактировать CSS и JavaScript. При этом если вы редактируете скрипты, обязательно сохраняйте изменения с помощью команд Command + S для Mac или Control + S для Windows и Linux. Сохранять правки CSS не нужно, они сразу вступают в силу. Конечно, после перезагрузки страницы всё откатится до начального состояния.

Меняем цвет фона во вкладке Sources

Понять, почему не работают скрипты

Если вы написали код на JavaScript и что-то пошло не так, ищите ошибки с помощью вкладок Console и Sources. Во вкладке Console отображаются сообщения об ошибках с указанием файла и строки, на которых находится баг. Если нажать на этот файл, документ сразу же откроется на нужной строке.

Здесь разработчик добавил лишнюю кавычку. Ошибка на первой строке в документе diseasmap.js

Иногда бывает сложно разобраться, с чем связана ошибка и как её решить — особенно если вы только начали учиться разработке. В таких случаях приходится искать ответ в интернете: на форумах и профессиональных чатах.

Еще один способ найти и отладить ошибку — воспроизвести её. Используйте для этого точки останова, которые приостанавливают код в момент его выполнения.

Как использовать точки останова

Для начала откройте вкладку Sources и выберите файл со скриптом. Затем кликните по номеру строки, на которой вы хотите приостановить выполнение кода. Выбранные точки сразу появятся на панели справа в разделе Breakpoints.

Также можно пойти другим путём: кликните на Event Listener Breakpoints и выберите события, на которых нужно приостановить выполнение кода.

JavaScript выполняется последовательно. Когда Chrome дойдет до точек останова, он остановит выполнение скрипта, и вы сможете отследить, что происходит с кодом. Например, посмотреть значения переменных или разобраться с логикой функций. С этого момента только вы управляете кодом. Можете перейти к следующей точке, шагнуть внутрь функции или отключить точки останова. В этом вам помогут кнопки на панели справа.

Для чего они нужны, пойдем по порядку:

Resume Script Execution — продолжает выполнение скрипта до следующей точки останова. Горячая клавиша F8.

Step over next function call — выполняет строку кода и переходит к следующей функции. Горячая клавиша F10.

Step into next call function call — выполняет строку кода и затем ныряет внутрь функции — на первую строку. Горячая клавиша F11.

Step out of current function — выполняет до конца текущую функцию и останавливается на её последней строке. Горячая клавиша Shift + F11.

Step — по принципу действия похожа на Step into of current function. Но если Step into нужен для того, чтобы попасть внутрь функции, то Step просто выполнит её и покажет результат. Горячая клавиша F9.

Deactivate breakpoints — отключает точки останова. Горячая клавиша Ctrl + F8.

Pause on exceptions — выполнение JavaScript приостанавливается, когда появляется какое-то исключение.

Проверить качество сайта

При разработке сайта важно позаботиться о том, чтобы он быстро загружался и был доступен для пользователей и поисковых систем. С помощью инструмента Lighthouse вы можете протестировать свой сайт на скорость, семантику, доступность, разметку и другие характеристики.

Lighthouse оценивает классические сайты по четырём критериям: производительность, лучшие практики, SEO и доступность. Для сайтов, выполненных по технологии PWA (прогрессивные веб-приложения), добавляется пятый критерий — progressive web app.

Как использовать Lighthouse

Чтобы запустить проверку, перейдите во вкладку Lighthouse и нажмите на кнопку Generate report. Во время тестирования инструмент будет менять размеры браузера, имитировать отключение и подключение интернета и выполнять другие операции.

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

Результаты проверки.

Ниже находятся показатели, которые повлияли на оценку, скриншоты поэтапной отрисовки страницы и предложения — что можно улучшить. Например, Lighthouse может предложить оптимизировать картинки и шрифты, включить отложенную загрузку графики, уменьшить неиспользуемый CSS и JavaScript или внести другие изменения. Каждое предложение подробно описано, можно даже перейти на отдельную страницу и прочитать о нём подробнее.

Lighthouse не единственный инструмент для оценки качества сайта. Есть и другие сервисы, например, PageSpeed Insights. Но он хорошо справляется со своей задачей, и его можно можно использовать при работе с сайтами на локальном сервере.

При оптимизации сайта в Chrome DevTools вы также можете использовать вкладку Network. Она поможет проанализировать загрузку страницы, посмотреть приоритет и вес загружаемых ресурсов, а также увидеть другую полезную информацию. Более подробно о ней мы рассказали в статье «Введение в Chrome DevTools. Console, Sources, Network».

Chrome DevTools облегчает процесс разработки. И хотя начинающим разработчикам бывает непросто сразу разобраться во всех инструментах — это и не нужно. Сначала осваивайте базу и читайте документацию. А чтобы научиться применять Chrome DevTools на практике, попробуйте наши интенсивы «HTML и CSS. Адаптивная вёрстка и автоматизация» и «JavaScript. Профессиональная разработка веб-интерфейсов».

Toggle device toolbar что это

Simulate mobile devices with Device Mode

Published on Monday, April 13, 2015 • Updated on Monday, July 4, 2022

Technically, I’m a writer

Technical Writer, Google Chrome

Use Device Mode to approximate how your page looks and performs on a mobile device.

Device Mode is the name for a collection of features in Chrome DevTools that help you simulate mobile devices. These features include:

Alternatively, you can throttle connection speed in the Network panel.

# Limitations

Think of Device Mode as a first-order approximation of how your page looks and feels on a mobile device. With Device Mode you don’t actually run your code on a mobile device. You simulate the mobile user experience from your laptop or desktop.

There are some aspects of mobile devices that DevTools will never be able to simulate. For example, the architecture of mobile CPUs is very different than the architecture of laptop or desktop CPUs. When in doubt, your best bet is to actually run your page on a mobile device. Use Remote Debugging to view, change, debug, and profile a page’s code from your laptop or desktop while it actually runs on a mobile device.

# Simulate a mobile viewport

Click Toggle Device Toolbar to open the UI that enables you to simulate a mobile viewport.

By default, the Device Toolbar opens in viewport with Dimensions set to Responsive.

# Responsive Viewport Mode

Drag the handles to resize the viewport to whatever dimensions you need. Or, enter specific values in the width and height boxes. In this example, the width is set to 480 and the height is set to 415 .

Alternatively, use the width presets bar to set the width with a click to one of the following:

# Show media queries

To show media query breakpoints above your viewport, click More options > Show media queries.

DevTools now displays two additional bars above the viewport:

• The blue bar with max-width breakpoints.
• The orange bar with min-width breakpoints.

Click between breakpoints to change the viewport’s width so that the breakpoint gets triggered.

To find the corresponding @media declaration, right-click between breakpoints and select Reveal in source code. DevTools opens the Sources panel at the corresponding line in the Editor.

# Set device pixel ratio

Device pixel ratio (DPR) is the ratio between physical pixels on the hardware screen and logical (CSS) pixels. In other words, DPR tells Chrome how many screen pixels to use to draw a CSS pixel. Chrome uses the DPR value when drawing on HiDPI (High Dots Per Inch) displays.

To set a DPR value:

Click More options > Add device pixel ratio.

In the action bar at the top of the viewport, select a DPR value from the new DPR drop-down menu.

# Set the device type

Use the Device Type list to simulate a mobile device or desktop device.

If you can’t see the list on the action bar at the top, select More options > Add device type.

The table below describes the differences between the options. Rendering method refers to whether Chrome renders the page as a mobile or desktop viewport. Cursor icon refers to what type of cursor you see when you hover over the page. Events fired refers to whether the page fires touch or click events when you interact with the page.

# Mobile Device Viewport Mode

To simulate the dimensions of a specific mobile device, select the device from the Dimensions list.

# Rotate the viewport to landscape orientation

Click Rotate to rotate the viewport to landscape orientation.

Note that the Rotate button disappears if your Device Toolbar is narrow.

# Show device frame

When simulating the dimensions of a specific mobile device like a Nest Hub, select More options > Show device frame to show the physical device frame around the viewport.

Note: If you don’t see a device frame for a particular device, it probably means that DevTools just doesn’t have art for that specific option.

In this example, DevTools shows the frame for the Nest Hub.

# Add a custom mobile device

To add a custom device:

Click the Device list and then select Edit.

On the Settings > Devices tab, either choose a device from the list of supported ones or click Add custom device to add your own.

If you’re adding your own, enter a name, width, and height for the device, then click Add.

The device pixel ratio, user agent string, and device type fields are optional. The device type field is the list that is set to Mobile by default.

Back in the viewport, select the newly added device from the Dimensions list.

# Show rulers

Click More options > Show rulers to see rulers. The sizing unit of the rulers is pixels.

DevTools shows rulers above and to the left of the viewport.

Click the rulers at specific marks to set the viewport’s width and height.

# Zoom the viewport

Use the Zoom list to zoom in or out.

# Capture a screenshot

To capture a screenshot of what you currently see in the viewport, click More options > Capture screenshot.

To capture a screenshot of the whole page including the content that isn’t currently visible in the viewport, select Capture a full size screenshot from the same menu.

# Throttle the network and CPU

To throttle both the network and CPU, select Mid-tier mobile or Low-end mobile from the Throttle list.

Mid-tier mobile simulates fast 3G and throttles your CPU so that it is 4 times slower than normal. Low-end mobile simulates slow 3G and throttles your CPU 6 times slower than normal. Keep in mind that the throttling is relative to the normal capability of your laptop or desktop.

Note that the Throttle list will be hidden if your Device Toolbar is narrow.

# Throttle the CPU only

To throttle the CPU only and not the network, go to the Performance panel, click Capture Settings , and then select 4x slowdown or 6x slowdown from the CPU list.

# Throttle the network only

To throttle the network only and not the CPU, go the Network panel and select Fast 3G or Slow 3G from the Throttle list.

Or press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux, ChromeOS) to open the Command Menu, type 3G , and select Enable fast 3G throttling or Enable slow 3G throttling.

You can also set network throttling from the Performance panel. Click Capture Settings and then select Fast 3G or Slow 3G from the Network list.

# Emulate sensors

Use the Sensors tab to override geolocation, simulate device orientation, force touch, and emulate idle state.

The sections below provice a quick look on how to override geolocation and set device orientation. For a complete list of featrues, see Emulate device sensors.

# Override geolocation

To open the geolocation overriding UI, click Customize and control DevTools and then select More tools > Sensors.

Or press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux, ChromeOS) to open the Command Menu, type Sensors , and then select Show Sensors.

Select one of the presets from the Location list, or select Other. to enter your own coordinates, or select Location unavailable to test out how your page behaves when geolocation is in an error state.

# Set orientation

To open the orientation UI, click Customize and control DevTools and then select More tools > Sensors.

Or press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux, ChromeOS) to open the Command Menu, type Sensors , and then select Show Sensors.

Select one of the presets from the Orientation list or select Custom orientation to set your own alpha, beta, and gamma values.

Name already in use

developer.chrome.com / site / en / docs / devtools / device-mode / index.md

• Go to file T
• Go to line L
• Copy path
• Copy permalink

• Open with Desktop
• View raw
• Copy raw contents Copy raw contents

Copy raw contents

Copy raw contents

Use Device Mode to approximate how your page looks and performs on a mobile device.

Device Mode is the name for a collection of features in Chrome DevTools that help you simulate mobile devices. These features include:

Think of Device Mode as a first-order approximation of how your page looks and feels on a mobile device. With Device Mode you don’t actually run your code on a mobile device. You simulate the mobile user experience from your laptop or desktop.

There are some aspects of mobile devices that DevTools will never be able to simulate. For example, the architecture of mobile CPUs is very different than the architecture of laptop or desktop CPUs. When in doubt, your best bet is to actually run your page on a mobile device. Use Remote Debugging to view, change, debug, and profile a page’s code from your laptop or desktop while it actually runs on a mobile device.

Simulate a mobile viewport

Click Toggle Device Toolbar <% Img src="https://github.com/GoogleChrome/developer.chrome.com/blob/main/site/en/docs/devtools/device-mode/image/admin/9FiBHFCzfPgP8sy6LMx7.png", alt="Toggle Device Toolbar.", width="20", height="22" %>to open the UI that enables you to simulate a mobile viewport.

By default, the Device Toolbar opens in viewport with Dimensions set to Responsive.

Responsive Viewport Mode

Drag the handles to resize the viewport to whatever dimensions you need. Or, enter specific values in the width and height boxes. In this example, the width is set to 480 and the height is set to 415 .

Alternatively, use the width presets bar to set the width with a click to one of the following:

Show media queries

To show media query breakpoints above your viewport, click <% Img src="image/NJdAV9UgKuN8AhoaPBquL7giZQo1/N5Lkpdwpaz4YqRGFr2Ks.svg", alt="More options.", width="20", height="20" %>More options > Show media queries.

DevTools now displays two additional bars above the viewport:

• The blue bar with max-width breakpoints.
• The orange bar with min-width breakpoints.

Click between breakpoints to change the viewport’s width so that the breakpoint gets triggered.

To find the corresponding @media declaration, right-click between breakpoints and select Reveal in source code. DevTools opens the Sources panel at the corresponding line in the Editor.

Set device pixel ratio

Device pixel ratio (DPR) is the ratio between physical pixels on the hardware screen and logical (CSS) pixels. In other words, DPR tells Chrome how many screen pixels to use to draw a CSS pixel. Chrome uses the DPR value when drawing on HiDPI (High Dots Per Inch) displays.

To set a DPR value:

In the action bar at the top of the viewport, select a DPR value from the new DPR drop-down menu.

Set the device type

Use the Device Type list to simulate a mobile device or desktop device.

If you can’t see the list on the action bar at the top, select More options <% Img src="image/NJdAV9UgKuN8AhoaPBquL7giZQo1/N5Lkpdwpaz4YqRGFr2Ks.svg", alt="More options.", width="20", height="20" %>> Add device type.

The table below describes the differences between the options. Rendering method refers to whether Chrome renders the page as a mobile or desktop viewport. Cursor icon refers to what type of cursor you see when you hover over the page. Events fired refers to whether the page fires touch or click events when you interact with the page.

Mobile Device Viewport Mode

To simulate the dimensions of a specific mobile device, select the device from the Dimensions list.

Rotate the viewport to landscape orientation

Show device frame

When simulating the dimensions of a specific mobile device like a Nest Hub, select More options <% Img src="image/NJdAV9UgKuN8AhoaPBquL7giZQo1/N5Lkpdwpaz4YqRGFr2Ks.svg", alt="More options.", width="20", height="20" %>> Show device frame to show the physical device frame around the viewport.

Note: If you don’t see a device frame for a particular device, it probably means that DevTools just doesn’t have art for that specific option.

In this example, DevTools shows the frame for the Nest Hub.

Add a custom mobile device

To add a custom device:

Click the Device list and then select Edit.

On the Settings > Devices tab, either choose a device from the list of supported ones or click Add custom device to add your own.

If you’re adding your own, enter a name, width, and height for the device, then click Add.

The device pixel ratio, user agent string, and device type fields are optional. The device type field is the list that is set to Mobile by default.

Back in the viewport, select the newly added device from the Dimensions list.

Click More options <% Img src="image/NJdAV9UgKuN8AhoaPBquL7giZQo1/N5Lkpdwpaz4YqRGFr2Ks.svg", alt="More options.", width="20", height="20" %>> Show rulers to see rulers. The sizing unit of the rulers is pixels.

DevTools shows rulers above and to the left of the viewport.

Click the rulers at specific marks to set the viewport’s width and height.

Zoom the viewport

Use the Zoom list to zoom in or out.

Capture a screenshot

To capture a screenshot of what you currently see in the viewport, click <% Img src="image/NJdAV9UgKuN8AhoaPBquL7giZQo1/N5Lkpdwpaz4YqRGFr2Ks.svg", alt="More options.", width="20", height="20" %>More options > Capture screenshot.

To capture a screenshot of the whole page including the content that isn’t currently visible in the viewport, select Capture a full size screenshot from the same menu.

Throttle the network and CPU

To throttle both the network and CPU, select Mid-tier mobile or Low-end mobile from the Throttle list.

Mid-tier mobile simulates fast 3G and throttles your CPU so that it is 4 times slower than normal. Low-end mobile simulates slow 3G and throttles your CPU 6 times slower than normal. Keep in mind that the throttling is relative to the normal capability of your laptop or desktop.

Note that the Throttle list will be hidden if your Device Toolbar is narrow.

Throttle the CPU only

To throttle the CPU only and not the network, go to the Performance panel, click Capture Settings <% Img src="image/NJdAV9UgKuN8AhoaPBquL7giZQo1/9gzXiTYY0nZzBxGI6KrV.svg", alt="Capture settings.", width="24", height="24" %>, and then select 4x slowdown or 6x slowdown from the CPU list.

Throttle the network only

To throttle the network only and not the CPU, go the Network panel and select Fast 3G or Slow 3G from the Throttle list.

Or press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux, ChromeOS) to open the Command Menu, type 3G , and select Enable fast 3G throttling or Enable slow 3G throttling.

You can also set network throttling from the Performance panel. Click Capture Settings <% Img src="image/NJdAV9UgKuN8AhoaPBquL7giZQo1/9gzXiTYY0nZzBxGI6KrV.svg", alt="Capture settings.", width="24", height="24" %>and then select Fast 3G or Slow 3G from the Network list.

Use the Sensors tab to override geolocation, simulate device orientation, force touch, and emulate idle state.

The sections below provice a quick look on how to override geolocation and set device orientation. For a complete list of featrues, see Emulate device sensors.

To open the geolocation overriding UI, click Customize and control DevTools <% Img src="image/NJdAV9UgKuN8AhoaPBquL7giZQo1/N5Lkpdwpaz4YqRGFr2Ks.svg", alt="Customize and control DevTools.", width="20", height="20" %>and then select More tools > Sensors.

Or press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux, ChromeOS) to open the Command Menu, type Sensors , and then select Show Sensors.

Select one of the presets from the Location list, or select Other. to enter your own coordinates, or select Location unavailable to test out how your page behaves when geolocation is in an error state.

To open the orientation UI, click Customize and control DevTools <% Img src="image/NJdAV9UgKuN8AhoaPBquL7giZQo1/N5Lkpdwpaz4YqRGFr2Ks.svg", alt="Customize and control DevTools.", width="20", height="20" %>and then select More tools > Sensors.

Or press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux, ChromeOS) to open the Command Menu, type Sensors , and then select Show Sensors.

Select one of the presets from the Orientation list or select Custom orientation to set your own alpha, beta, and gamma values.

Toggle device toolbar что это

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

Быстро и легко можно проверить сайт с помощью эмулятора экрана режима устройства Toggle device toolbar, который встроен в браузер Chrome.

В Google Сhrome открываем консоль (F12) или (CTRL+SHIFT+I) /// ярлык телефона /// выбираем параметры /// проверяем

Есть возможность выбрать модель телефона (часть моделей скрыто в edit)

Задать произвольный размер экрана (Responsive)

Вот, такой простой инструмент для проверки отображения сайта с разных экранов.