Безумные функции, о которых большинство людей не знает.

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

Одним из таких инструментов является Chrome DevTools, который предлагает множество функций и является незаменимым инструментом для фронтенд-разработчиков всех уровней.

DevTools имеет широкий спектр функций и опций, и Google проделал фантастическую работу по документированию этого инструмента.

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

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

№1. Контроль скорости сети

На ваш сайт будут заходить люди со всего мира, использующие устройства разных размеров и платформ.

Вы можете создавать сайты, которые реагируют на запросы, используя медиа-запросы, но как насчет скорости сети?

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

К счастью, DevTools имеет возможность переключаться между 3 сетевыми предустановками:

  1. Быстрый 3G
  2. Медленный 3G
  3. Не в сети

Вы также можете добавить собственный профиль.

Вы можете найти эту функцию на вкладке «Сеть», щелкнув раскрывающееся меню «Без регулирования».

№2. Мульти Курсор

DevTools имеет встроенный отличный редактор кода.

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

Кроме того, это очень легко настроить. Все, что вам нужно сделать, это нажать и удерживать Ctrl (Command на Mac) и щелкнуть строки, в которых вы хотите установить несколько курсоров.

Вы также можете отменить свой выбор, нажав и удерживая Ctrl (Command на Mac) + U.

Кроме того, вы также можете нажать Alt и перетащить, чтобы получить несколько курсоров. Вы можете увидеть реализацию здесь.

№3. Темный режим

На мой взгляд, темный режим увеличивает видимость и снижает нагрузку на глаза. У использования темного режима есть как плюсы, так и минусы.

Различные статьи посвящены этой теме.

Я использую темный режим везде, где это возможно, от приложения Twitter до своего калькулятора.

DevTools - не исключение.

Чтобы включить темный режим, откройте Настройки, щелкнув три вертикальные точки в правом углу экрана.

Затем перейдите в Настройки ›Внешний вид› Тема. и, наконец, выберите Темный.

№4. Командное меню

Вы можете быстро открыть командное меню, нажав Ctrl (CMD на Mac) + Shift + P, когда открыт DevTools.

Он обеспечивает быстрый способ навигации по DevTools, и со временем вы познакомитесь с ним.

Эта функция удобна, если вы знакомы с палитрой команд VS Code.

Вы можете удалить > и заменить его на ?, чтобы увидеть все функции, предлагаемые в этом меню.

№5. Обнаружение неиспользуемого кода

Современные приложения JavaScript становятся все более сложными и полагаются на множество сторонних библиотек.

Всегда есть какой-то код, который не используется и становится избыточным.

DevTools поможет вам найти такой избыточный код, который может без необходимости снижать скорость вашего сайта.

Для этого щелкните три вертикальные точки в правом верхнем углу DevTools. Затем нажмите «Дополнительные инструменты» и выберите «Покрытие».

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

Вы можете увидеть общее количество байтов, а также неиспользованные байты вместе с визуальной полосой использования.

№6. Автоматический старт

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

В настройках DevTools есть глобальная опция для автоматического открытия DevTools для всплывающих окон.

Однако лучший способ сделать это - запустить DevTools не только во всплывающих окнах, но и в самом браузере Chrome.

Вы можете сделать это, добавив следующую строку в качестве свойства в Google Chrome.

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --auto-open-devtools-for-tabs

А для пользователей Mac

--auto-open-devtools-for-tabs

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

№7. Палитра цветов

Color Picker - отличный способ выбрать именно тот цвет, который вам нужен, и легко добавить его в CSS вашего сайта.

DevTools предлагает палитру цветов, и получить к ней доступ очень просто.

Перейдите на вкладку «Элементы» и оттуда выберите панель «Стили», чтобы увидеть CSS.

Просто нажмите на цветной квадрат (не на значение), и появится палитра цветов.

Палитра цветов имеет возможность легко преобразовывать цветовые режимы, например, из HEX в RGBA.

№8. Мобильный эмулятор

Более 60% всех поисковых запросов в Интернете выполняется с помощью мобильных устройств, что делает адаптивный веб-дизайн важной частью веб-разработки.

К счастью, DevTools предлагает мобильный эмулятор, который имеет предопределенную высоту и ширину, которые соответствуют некоторым популярным мобильным устройствам, таким как iPhone, Pixel, Surface и iPad.

Откройте DevTools и щелкните Toggle Device Toolbar, как показано на медиафайле выше.

Вы также можете выбрать между мобильным телефоном среднего или низкого уровня в раскрывающемся меню «Без регулирования».

Кроме того, перетаскивание маркеров для изменения размера области просмотра - еще один удобный способ получить точные размеры, которые вам нужны.

№9. Контрольные точки

Вы когда-нибудь задумывались, сколько сайтов с медиа-запросами, таких как YouTube? Вы можете легко проверить это, включив опцию просмотра медиа-запросов.

Просто щелкните 3 вертикальные точки, как показано на медиафайле выше, и включите видимость медиа-запросов.

Вы увидите новую панель, показывающую различные точки останова медиа-запроса, которые вы можете щелкнуть, чтобы применить.

Помимо этого, вы также можете легко установить точки останова в своем коде JavaScript.

Один из способов сделать это - написать в коде debugger, который приостановит выполнение при достижении debugger .

console.log('a');
console.log('b');
debugger;
console.log('c');

Другой способ - перейти на вкладку «Источники», а затем перейти к файлу кода и найти строку, в которой вы хотите приостановить выполнение.

Затем вам нужно щелкнуть номер строки в левой части кода, что приведет к появлению синего значка на этом номере строки. Вот и все.

DevTools приостановит выполнение этой строки кода.

Последние мысли

DevTool - это набор инструментов, встроенный в Google Chrome, который упрощает процесс разработки внешнего интерфейса.

Он предоставляет некоторые из наиболее распространенных инструментов, которые время от времени нужны каждому веб-разработчику.

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

DevTools очень помог мне в создании платформы для ведения блогов на React, хотя позже мне пришлось преобразовать ее в Next.

Я обсуждал причины, которые заставили меня переключиться с React на Next в моем недавнем блоге.

Надеюсь, вам понравилось читать этот блог.

Больше контента на plainenglish.io