Скрытые возможности Chrome DevTools

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

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

Массив Pretty-Print в виде таблицы

При работе с большим количеством данных в JavaScript (например, создание визуализаций данных) ничего не получается с первого раза, и вам неизбежно придется перейти в веб-консоль и просмотреть данные — вероятно, с помощью console.log. Это приведет к объекту JavaScript (JSON), который в случае 2D-массивов будет трудночитаемым и в нем будет сложно найти полезную информацию. Но для этого есть простое решение:

Все, что нужно, — это заменить console.logна console.table. Эта функция может легко отображать одномерные и двухмерные массивы, но что делает эту функцию дополнительной полезной, так это то, что она также может правильно отображать имена столбцов и, кроме того, также позволяет вам сортировать по каждому из этих столбцов. Итак, чтобы получить таблицу, подобную приведенной выше, вы должны использовать данные в следующем формате:

Использование мультикурсора

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

Мульти Курсор с использованием CTRL + Click:

Мультикурсор полезен, но не очень точен и немного громоздок, когда вам нужно выделить и заменить множество вхождений текста. Для этих случаев вы можете использовать гораздо более подходящий CTRL + Dярлык:

В приведенном выше GIF-изображении вы можете увидеть, как можно использовать CTRL + Dдля выбора (и, при желании, CTRL + Uдля отмены выделения) вхождений текста, чтобы легко их изменять или заменять.

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

В Chrome DevTools есть много инструментов, вкладок, файлов, команд и т. Д., И запомнить имя или место, где можно найти каждый из них, может быть невозможно. Чтобы помочь с этим, вы можете использовать палитру команд, которую можно открыть с помощью CTRL + Shift + P. В этой палитре вы найдете все ярлыки, панели, настройки консоли, вкладки, настройки и многое другое.

Также, если вы используете CTRL + P, он предоставит вам список всех доступных файлов, которые вы можете открыть. Это также может быть удобно, если на вашем сайте много исходных файлов.

Удобная палитра цветов

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

Это особенность хорошо, но реальная игра смены является возможность выбрать любой цвет с веб — сайта , просто нажав на него в то время как Color Picker открыта — например , так:

Темный режим

Из приведенных выше снимков экрана и GIF вы, вероятно, уже заметили, что я использую темный режим в Chrome DevTools . Итак, если вам интересно, как перейти из светлого режима в темный режим, вы можете перейти в верхний правый угол DevTools — нажмите значок 3 вертикальных точки , затем выберите Дополнительные инструменты, а затем Настройки . В меню настроек выберите Preferences и, наконец, установите Theme на Dark . Это оно! Добро пожаловать на темную сторону !

Найти, где определено свойство CSS

Работа с CSS требует большого количества проб и ошибок (по крайней мере, для меня, во всяком случае), и вместо того, чтобы переходить между редактированием кода в IDE и обновлением вкладки браузера, почему бы не сэкономить время и не сделать все это в DevTools? Один из таких приемов экономии времени — CTRL + Clickнайти, где определено свойство CSS, чтобы вы могли редактировать его в исходном файле:

Сделайте веб-сайт редактируемым в режиме дизайна

Еще один прием CSS / дизайна — использовать режим дизайна для непосредственного редактирования чего-либо на веб-сайте. Нет необходимости изменять исходные файлы HTML и CSS — просто щелкните / выделите что-нибудь на странице и измените это! Чтобы включить этот режим, просто введите document.designMode = "on"в консоль и начните проектировать (ну, на самом деле просто возиться со всем и вся):

Имитация медленного Интернета

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

После добавления и выбора этого профиля все, что осталось сделать, это обновить страницу и посмотреть, как она работает при ужасном подключении к Интернету. Остерегайтесь — попробовав это — вы можете просто понять, насколько медленным на самом деле является ваш веб-сайт (своего рода депрессивный личный опыт).

Вывод

Это всего лишь несколько моих любимых советов и приемов, и это определенно не исчерпывающий список всех функций Chrome DevTools . Вы можете найти множество полезных функций в Chrome DevTools Guides, которые подходят для вашего рабочего процесса. Кроме того, я предлагаю следить за последними обновлениями в разделе « Что нового» , которые добавляют в ваш браузер больше полезных инструментов.

Если вам не хватает каких-либо конкретных функций, стоит проверить расширения DevTools в Интернет-магазине Chrome, так как есть дополнительные инструменты, созданные как Google, так и сообществом пользователей. И если вы не можете найти инструмент / расширение для вашей конкретной проблемы, возможно, подумайте о том, чтобы создать что-то самостоятельно, используя руководство по расширению DevTools . ?