Возможно, вы уже знакомы с основными функциями инструментов разработчика Chrome: инспектором DOM, панелью стилей и консолью JavaScript. Но есть ряд менее известных функций, которые могут значительно улучшить рабочие процессы отладки или создания приложений.
Темная тема
Chrome поставляется со встроенной темной темой для инструментов разработчика. Вы можете включить его, щелкнув значок с тремя точками в верхнем правом углу панели инструментов разработчика, нажав «Настройки», а затем переключив тему.
Иногда мне так легче на глаза, и, очевидно, выглядит намного круче :)
Режим выбора
Инструменты разработчика Chrome (DevTools) предлагают несколько способов выбора элементов, наиболее удобным из которых является режим выбора.
Этот инструмент, активируемый нажатием значка мыши в верхнем левом углу панели инструментов разработчика (или с помощью cmd + shift + c), позволяет вам выбирать элементы на странице, просто щелкая по ним.
После активации вы можете перемещать указатель мыши по странице и просматривать выбор, а затем щелкать, чтобы выбрать элемент для проверки.
Этот инструмент отлично подходит для быстрого выбора элемента на странице, поскольку нажатие cmd + shift + c откроет инструменты разработчика и сразу перейдет в режим выбора.
Сохранить как глобальную переменную
Проверка сложных объектов, которые записываются в консоль, иногда может быть сложной задачей, если они имеют много ключей или содержат значения, которые трудно проанализировать вручную. К счастью, Chrome позволяет легко проверять такие объекты с помощью JavaScript.
Для этого щелкните правой кнопкой мыши объект в консоли и нажмите «сохранить как глобальную переменную». Это сохраняет объект как глобальную переменную, доступную в консоли под названием temp1, с которой вы затем можете работать, используя JavaScript.
Инструменты анимации
Недавно команда Chrome добавила ряд новых функций для отладки и создания анимации.
Если щелкнуть раскрывающийся список в верхнем левом углу консоли, откроется панель «Анимации», которая позволяет ограничить скорость всех анимаций на сайте.
Вы также можете приостановить всю анимацию. Это особенно полезно для сайта, который переполнен анимированным контентом.
Щелкнув значок фиолетовой кривой в свойстве элемента transition, можно просмотреть кривую движения для анимации и настроить ее свойства. Кроме того, вы можете использовать значки со стрелками для прокрутки списка предустановленных анимаций, которые нужно применить к вашему элементу.
Имитация псевдосостояния элемента
Еще один удобный инструмент для стилизации элементов - симулятор состояния элемента, доступ к которому можно получить, щелкнув значок :hov в правом верхнем углу панели «Стили».
Этот инструмент позволяет имитировать псевдосостояния элемента при наведении, активном, сфокусированном и посещенном, а также стилях просмотра, связанных с этими селекторами.
Чтобы добавить стили для этих псевдосостояний, добавьте новый селектор (со значком +) и добавьте :<state> в конец строки селектора.
Например, чтобы добавить правило наведения на li с классом logo, создайте новый селектор li.logo:hover и добавьте туда стили.
Затем вы можете протестировать свои стили, проверив состояние элемента :hover, чтобы имитировать наведение курсора на элемент.
Усовершенствуйте CSS и JavaScript
Отладка или просмотр миниатюрных JavaScript и CSS очень сложны. Но, к счастью, DevTools предоставляет инструмент, который делает это немного проще.
После открытия минифицированного файла на вкладке «Источники» вы можете щелкнуть логотип в скобках в нижнем левом углу файла, и DevTools «усовершенствует» код.
Это довольно хорошо работает с файлами CSS и неплохо справляется с JavaScript, хотя некоторая информация (например, имена переменных) теряется в процессе минификации.
Alt + Вверх / Alt + Вниз
При отладке CSS вы можете выбрать свойство и использовать клавиши вверх / вниз, чтобы настроить его значение. По умолчанию клавиши со стрелками изменяют значения на +/- 1. Однако, удерживая клавишу alt, вы можете использовать клавиши со стрелками для точной настройки значений с шагом 0.1, что особенно полезно при работе с дробными значениями.
И наоборот, вы можете удерживать shift, чтобы изменять значения с шагом 10.
Сохранить журнал
Сохранить журнал - это флажок, который позволяет сохранять журналы между обновлениями страниц. Это полезно при отладке проблем с веб-сайтом, требующих обновления страницы, поскольку в противном случае весь вывод консоли очищается.
Когда этот параметр включен, в консоли появляется новый тип журнала «Навигация», в котором отображаются обновления страниц или события перехода к другим страницам.
Сеть + Фильтры журналов
При отладке приложения, которое имеет много сетевых запросов или журналов консоли, может быть полезно отфильтровать определенные типы событий.
В Chrome есть язык фильтрации, который поддерживает множество различных свойств, а также такие операторы, как *, для сопоставления с подстановочными знаками.
Если вы наберете «-», Chrome покажет напечатанный текст, который показывает различные свойства, по которым вы можете фильтровать. Вы также можете включить режим «регулярного выражения», чтобы выполнить сопоставление регулярного выражения с данными, отображаемыми в каждой строке.
Покрытие кода
Покрытие кода позволяет запускать веб-приложение, а затем для каждого файла JavaScript и CSS видеть, какие строки кода выполнялись, а какие нет. Это полезно, поскольку при работе над сложным или долгосрочным проектом легко накапливать мертвый код.
Чтобы использовать его, убедитесь, что у вас установлен Chrome 59 или выше, и перейдите на вкладку «Покрытие». Нажмите «запись», а затем начните использовать свое приложение. Когда вы закончите, Chrome покажет вам точный код, который был запущен во время вашего сеанса.
Отладка проблем в производстве
DevTools работает, только если вы запускаете приложение на собственном компьютере. Если вам интересно узнать об ошибках и проблемах с производительностью, которые пользователи видят в производственной среде, попробуйте LogRocket.
LogRocket - это интерфейсный инструмент для ведения журнала, который позволяет воспроизводить проблемы, как если бы они произошли в вашем собственном браузере. Вместо того, чтобы угадывать, почему происходят ошибки, или запрашивать у пользователей снимки экрана и дампы журналов, LogRocket позволяет воспроизвести сеанс, чтобы быстро понять, что пошло не так. Он отлично работает с любым приложением, независимо от фреймворка, и имеет плагины для регистрации дополнительного контекста из React, Angular и Vue.js.
LogRocket позволяет вашему приложению записывать журналы консоли, сетевые запросы / ответы с заголовками и телами, метаданные браузера, действия / состояние Redux и тайминги производительности. Он также записывает HTML и CSS на страницу, воссоздавая видео с точностью до пикселя даже самых сложных одностраничных приложений.
Вы можете проверить LogRocket здесь.
Спасибо за прочтение. Я надеюсь, что эти передовые методы DevTools помогут вам создавать лучшие приложения с меньшим стрессом.
Хакерский полдень - это то, с чего хакеры начинают свои дни. Мы часть семьи @AMI. Сейчас мы принимаем заявки и рады обсуждать рекламные и спонсорские возможности.
Если вам понравился этот рассказ, мы рекомендуем прочитать наши Последние технические истории и Современные технические истории. До следующего раза не воспринимайте реалии мира как должное!
