Автор оригинала: FreeCodeCamp Community Member.
By Ben Edelstein
Вы уже можете быть знакомы с основными особенностями инструментов разработчика Chrome: DOM-инспектор, панель стилей и консоли JavaScript. Но существует ряд меньших функций, которые могут значительно улучшить ваши рабочие процессы для создания отладки или приложений.
Темная тема
Chrome поставляется со встроенной темной темой для инструментов разработки. Вы можете включить его, нажав три значка точек в правом праве панели «Инструменты DEV», нажав «Настройки», а затем переключение темы.
Иногда я нахожу этого проще на моих глазах, и, очевидно, это выглядит очень круче:)
Режим выбора
Chrome Developer Tools (devtools) предлагают ряд способов выбора элементов – наиболее удобный из которых является режим выбора.
Этот инструмент, активированный нажатием значка мыши в верхнем левом углу панели инструментов DEV (или с CMD + Shift + C), позволяет вам выбрать элементы на странице, просто нажав на них.
После активации вы можете переместить мышь по странице и предварительно выбирать, затем нажмите, чтобы выбрать элемент для проверки. Этот инструмент отлично подходит для быстрого выбора элемента на странице, поскольку удар CMD + Shift + C откроет инструменты DEV и перейдите прямо в режим выбора.
Хранить как глобальная переменная
Осмотрите сложные объекты, которые зарегистрированы в консоли, иногда могут быть сложными, если у них есть много ключей или содержать значения, которые трудно разбирать вручную. К счастью, Chrome позволяет легко проверить такие объекты с JavaScript.
Чтобы сделать это, щелкните правой кнопкой мыши на объекте в консоли и нажмите «Хранить как глобальную переменную». Это хранит объект как глобальная переменная, доступная в консоли, называемой Temp1 Затем вы можете работать с использованием JavaScript.
Инструменты анимации
Недавно команда Chrome добавила ряд новых функций для отладки и создания анимации.
Нажатие на выпадение в верхнем левом углу консоли, открывает панель «анимации», которая позволяет вам ограничить скорость для всех анимаций на сайте.
Вы также можете приостановить все анимации. Это особенно полезно для сайта, который гудит с анимированным контентом.
Нажав на фиолетовый значок кривой в элементе Переход Свойство позволяет просматривать кривую движения для анимации и точно настроить его свойства. Кроме того, вы можете использовать значки стрелки для прокрутки списка предустановленных анимаций, чтобы применить к вашему элементу.
Имитация элемента Pseudo State
Другой удобный инструмент для стилей элементов – это симулятор состояния элемента, который доступа к нажатию на : HOV Значок в верхнем правом углу панели стилей.
Этот инструмент позволяет моделировать элемент Pseudo Pests of Uver, активных, сфокусированных и посещенных и просмотра стилей, связанных с этими селекторами.
Чтобы добавить стили для этих псевдословных состояний, добавьте новый селектор (с значком + ) и добавьте :
Например, чтобы добавить правило зависания на Ли с классом Логотип Сделайте новый селектор, Li.Logo: Hover и добавьте там стили.
Затем вы можете проверить свои стили, проверив : hover Состояние элемента для симуляции зависания на элементе.
Напечатайте CSS и JavaScript
Отладка или просмотр Mainified JavaScript и CSS очень сложно. Но к счастью, devtools предоставляет инструмент, который делает это немного легче.
После открытия минизованного файла на вкладке «Источники» вы можете щелкнуть логотип кронштейнов в левом нижнем углу файла, и devtools “Prettify” код.
Это работает довольно хорошо с файлами CSS и делает достойную работу с JavaScript, хотя некоторые данные (например, имена переменной) теряются в процессе замирения.
Alt + Up/Alt + Down
При отладке CSS вы можете выбрать свойство и использовать клавиши вверх/вниз для настройки его значения. По умолчанию клавиши со стрелками настраиваются значения на +/- 1 Отказ Однако, удерживая Alt Клавиша, вы можете использовать клавиши со стрелками для тонко настраивания значений в шагах 0,1 , что особенно полезно при работе с дробными значениями.
И наоборот, вы можете держать Сдвиг Чтобы настроить значения в шагах 10 Отказ
Сохранить журнал
Журнал PROVERVE – это флажок, который позволяет сохранять журналы между обновлениями страницы. Это полезно при отладке проблем веб-сайта, которые требуют, чтобы вы обновили страницу, поскольку весь выход консоли в противном случае очищен.
Когда эта опция включена, в консоли появится новый тип журнала «навигационного» журнала «навигация».
Сеть + Журнальные фильтры
При отладке приложения, которое имеет много сетевых запросов или консольных журналах, это может быть полезно для фильтрации для определенных типов событий.
Chrome имеет язык фильтрации, который поддерживает множество различных свойств, а также операторы, такие как * делать подстановочные знаки.
Если вы напечатаете «-», Chrome вызовет Typeabead, которая показывает различные свойства, для которых вы можете фильтровать. Вы также можете включить режим «REGEX», чтобы сделать совпадение REGEX на данных, показанных в каждой строке.
Покрытие кода
Покрытие кода позволяет запустить ваше веб-приложение, а затем для каждого файла JavaScript и CSS, см. Какие строки кода RAN и что не сделали. Это полезно, поскольку при работе над сложным или долгосрочным проектом легко накапливать Dead Code.
Чтобы использовать его, убедитесь, что у вас есть Chrome 59 или выше, и перейдите на вкладку «Покрытие». Нажмите «Запись», а затем начните использовать свое приложение. Когда вы закончите, Chrome покажет вам точный код, который управлял во время вашего сеанса.
Вопросы отладки в производстве
Devtools работает только, если вы используете свое приложение на собственной машине. Если вы заинтересованы в понимании ошибок и проблем с производительностью, которые пользователи видят в производстве, попробуйте Logrocket Отказ
Logrocket Это инструмент для регистрации передней работы, который позволяет воспроизводить проблемы, как если бы они произошли в вашем браузере. Вместо того, чтобы угадать, почему случаются ошибки, или просят пользователей за скриншоты и журнал свалки, Lognocket позволяет вам воспроизвести сессию, чтобы быстро понять, что пошло не так. Он отлично работает с любым приложением, независимо от рамок, и имеет плагины для регистрации дополнительного контекста из React, Angular, и Vue.js.
Logrocket Instruments Ваше приложение для записи консольных журналов, сетевых запросов/ответов с заголовками + тел, метаданные браузера, Areux Actions/State и время исполнения. Он также записывает HTML и CSS на странице, воссоздая Pixel-Perfect видео даже самых сложных одностраничных приложений.
Вы можете Проверьте lognocket здесь Отказ
Logrocket |. Регистрация журнала и сеанса для приложений JavaScript Lognocket поможет вам понять проблемы, влияющие на ваших пользователей, чтобы вы могли вернуться к созданию отличного программного обеспечения. logrocket.com
Спасибо за прочтение. Я надеюсь, что эти Advanced Devtools Techniques помогут вам построить лучшие приложения с меньшим стрессом.
Оригинал: “https://www.freecodecamp.org/news/mastering-chrome-developer-tools-next-level-front-end-development-techniques-3ac0b6fe8a3/”