5 инструментов Chrome DevTools, упрощающие разработку

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

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

Ссылка на элементы HTML

Одна из самых малоизвестных функций Chrome DevTools — возможность ссылаться на элементы HTML. Это можно сделать в два простых шага.

- Откройте Chrome DevTools и перейдите к представлению Elements.

- Щелкните правой кнопкой мыши элемент, на который вы хотите сослаться, и выберите Store as global variable.

Теперь у вас есть ссылка на HTML-элемент, к которому вы можете получить доступ и проверить его в консоли.

Логпоинты

Логпоинты — это способ предоставления отладочной информации в консоль без необходимости прибегать к console.log(). Эта функция позволяет очистить кодовую базу от мусора, который образуется в результате работы с console.log.

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

Live expressions

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

Все, что вам нужно сделать, — нажать на кнопку Create live expressions и указать выражение, которое вы хотите отслеживать. После этого будет автоматически показываться значение выражения по мере его изменения.

console.trace()

console.trace() — это утилита, которая позволяет узнать, где был сделан конкретный вызов определенной функции. Допустим, у вас есть внутренняя функция, которая используется в разных местах и вызывает проблему. Чтобы устранить эту проблему, необходимо сначала выяснить, где она вызывается.

console.trace() предоставляет эту информацию. Достаточно просто вставить ее внутрь функции, которую нужно отследить.

Обратите внимание: трассировка стека показывает, что вызову innerFunction предшествовал вызов outterFunction.

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

Консольные утилиты

Консольные утилиты являются неотъемлемой частью функций Chrome Dev Tools. Console Utilities API содержит набор удобных функций для выполнения распространенных задач. Более подробно о них можно прочитать здесь.

Утилиты $() и $$() заменяют document.querySelector() и document.querySelectorAll() соответственно.

Они возвращают ожидаемый список узлов и приводят результаты к массивам, чтобы вы могли использовать map() и filter().

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