Есть десятки панелей и сотни функций в браузерных DevTools...

Есть десятки панелей и сотни функций в браузерных DevTools, которые помогут улучшить процесс отладки ваших сайтов

Познакомимся с самыми популярными приемами DevTools, которые могут повысить вашу производительность и эффективность.

— Zoom DevTools:

Если текст в DevTools кажется вам слишком мелким для чтения, щелкните в любом месте DevTools, чтобы фокус был именно там, а затем нажмите Ctrl+ (или Cmd+ на macOS), чтобы увеличить масштаб.

— Удаление раздражающих оверлеев:

Вы можете использовать DevTools для удаления раздражающих накладок или всплывающих окон на веб-странице. Просто выберите элемент, который вы хотите удалить, и нажмите Delete на клавиатуре.

— Список шрифтов, используемых на странице:

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

— Измерение произвольных расстояний на странице:

Инструмент измерения Firefox в DevTools можно использовать для измерения размера области на веб-странице или расстояния между двумя объектами.

— Обнаружение неиспользуемого кода:

В браузерах на базе Chromium вы можете использовать инструмент "Coverage", чтобы определить, какие части вашего кода не используются.

— Изменить скорость воспроизведения видео:

Если на веб-странице трудно или невозможно управлять видео, вы можете использовать DevTools для управления им с помощью JavaScript.

— Использовать DevTools на другом языке:

Если английский не является вашим родным языком, вы можете использовать переведенную версию DevTools, которая соответствует вашей операционной системе, браузеру или языку по вашему выбору.

— Отключите слушателей (listeners) событий:

Если слушатели событий мешают отладке веб-страницы, их можно отключить, выбрав элемент, к которому они применяются, в инструменте "Elements".

— Просмотр логов консоли в браузерах, отличных от Safari, на iOS:

Существует способ просмотра логов консоли в Chrome и Edge (и, возможно, в других браузерах на базе Chromium) при использовании iOS.

— Копирование стилей элементов:

Chrome, Edge и другие браузеры на базе Chromium позволяют копировать все стили, применяемые к выбранному элементу, включая унаследованные стили и пользовательские свойства.

— Скачать все изображения на странице:

Если вы хотите скачать все изображения, находящиеся на веб-странице, вы можете выполнить определенный код JavaScript в инструменте "Console".

— Визуализация страницы в 3D:

Edge - единственный браузер, который предоставляет инструмент, предназначенный для визуализации веб-страниц в 3D различными способами.

— Отключить нежелательные сообщения отладчика:

Некоторые веб-сайты добавляют в свой код сообщения отладчика, которое заставляет DevTools приостанавливать основной поток веб-сайта при открытии DevTools. Вы можете отключить эти сообщения в инструменте "Sources".

— Редактирование и повторная отправка сетевых запросов:

Инструмент "Network Console" в Edge или функция "Edit and Resend" инструмента "Network" в Firefox позволяют начать с существующего запроса, изменить его и повторно отправить.

— Моделирование устройств:

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

-

Как это все сделать, рассказано и показано в статье:

https://www.smashingmagazine.com/2023/06/popular-devtools-tips/

@MikeBlazerX

Источник новости https://t.me/mikeblazerx/1862...