Улучшите свой рабочий процесс и навыки отладки с помощью этих
В Chrome есть некоторые функции для отладки, которые действительно могут пригодиться при устранении неполадок кода. На самом деле инструментов так много, что большинство из них остаются скрытыми, ожидая раскрытия.
Однако команда разработчиков Chrome DevTools выпускает ежемесячные обновления на своем веб-сайте, и вы также можете найти отличные советы, опубликованные в их официальном аккаунте в Twitter. Если вы хотите узнать больше об инструментах, которые предоставляет Chrome, я настоятельно рекомендую их проверить.
В этой статье я собрал 10 функций, которые я часто использую и которые могут быть неизвестны другим. Они помогли мне оптимизировать рабочий процесс, чтобы я мог делать больше за меньшее время.
# 1: сохранить журнал
Начнем с простого, которое раньше вызывало много разочарований: сохранение журналов в консоли. Представьте, что у вас есть проблема, которая возникает непосредственно перед перезагрузкой страницы или при навигации - вы пытаетесь войти в консоль, но все очищается. Решение простое, но я не знал о нем целую вечность:
# 2: точки останова для слушателей событий
Часто проблема возникает, когда происходит взаимодействие с пользователем. Может быть безопаснее поймать эти события, чтобы узнать, где и что происходит при взаимодействии. К счастью, мы можем сделать это, перейдя на вкладку Sources и отметив флажками соответствующие события:
# 3: Точки останова для манипуляций с DOM
То же самое можно сделать и с манипуляциями с DOM. Часто узел получает изменение атрибута, такое как добавление классов. Поиск ответственного кода в большом репозитории займет много времени - вместо этого вы можете просто добавить точку останова для элемента и позволить DevTools обработать все остальное.
# 4: Покрытие кода
Когда дело доходит до оптимизации производительности, мы часто оставляем мертвый код. С помощью инструмента покрытия вы можете профилировать свои ресурсы и видеть, какие строки не выполняются. Чтобы получить более точную картину, важно выполнять, если не все, взаимодействия с пользователем, кроме релевантных. Вы можете открыть панель инструментов, щелкнув Ctrl + Shift + P, и начать запись, щелкнув значок перезагрузки. Все, что показано красным, не выполняется.
# 5: Показать перекраски
Ненужная перекраска также может вызвать проблемы с производительностью. Представьте, что на вашей странице идет обратный отсчет, и каждое обновление приводит к перекрашиванию всей страницы. Вы можете решить эти проблемы и посмотреть, какие элементы вызывают их, включив мигание краски на вкладке Render. Опять же, Ctrl + Shift + P вызовет панель инструментов.
# 6: Проверка анимации
Раз уж мы говорим о рендеринге, давайте посмотрим, как можно отлаживать CSS-анимацию. Откройте меню инструментов с помощью Ctrl + Shift + P и введите «animation». Откроется вкладка Animations, на которой будет записываться любая анимация, происходящая на вашем сайте. Вы можете воспроизвести их, увидеть их динамику и настроить время или продолжительность:
# 7: Скриншоты
Нам часто приходится делиться снимками экрана друг с другом, чтобы проверить изменения. Эта задача может сэкономить время, если вам придется повторить несколько шагов:
- Откройте стороннее приложение
- Обрезать часть сайта
- Сохраните его как изображение и отправьте
Это можно сделать внутри DevTools. Вы можете создавать изображения со всей страницы, из отдельных узлов (те, которые выбраны) или из области просмотра:
# 8: черный бокс
Представьте, что вы отлаживаете проблему и в вашем коде есть несколько точек останова. Вы идете вниз по трассировке стека, но большинство из них происходит из файлов ядра фреймворка, таких как React или jQuery. Чтобы избежать включения этих файлов ядра в ваш отладчик, вы можете поместить их в черный ящик, что означает, что DevTools будет пропускать эти файлы, чтобы вы могли сосредоточиться на своем собственном коде.
# 9: Локальные переопределения
Локальные переопределения - одно из моих любимых, и я использую его все чаще и чаще. Это мощный инструмент, который позволяет загружать локальные копии производственных файлов и использовать их вместо их связанных копий. Это особенно полезно, когда проблема возникает только в определенной среде и не может быть воспроизведена локально.
Вы можете включить локальные переопределения на вкладке Sources. Если вы не видите ссылку Overrides, нажмите на шевроны рядом с Page. Вы можете скопировать красиво напечатанный файл в свой комплект и расширить его. Переопределения сохраняются при перезагрузке страницы.
Если вас интересуют локальные переопределения, у меня есть целое руководство по теме, на которое вы можете перейти по предоставленной ссылке.
# 10: Маяк
И последнее, но не менее важное: я постоянно использую Lighthouse панель. Это для аудита вашего сайта по различным категориям: производительность, PWA, доступность или SEO. У вас также есть возможность проводить аудит на разных устройствах, а также эмулировать сетевое соединение. Он дает вам краткую информацию о том, что можно улучшить и как это улучшить. Вы можете добраться до Маяка на вкладке Audits. Если вы не видите вкладку, просто нажмите на шевроны, чтобы открыть скрытые вкладки. После создания отчета вы можете сохранить результаты в виде файла JSON и позже импортировать его для сравнения.
Это 10 обязательных функций Chrome DevTools, которые помогли мне упростить рабочий процесс и сделать больше за меньшее время.
Какие функции вы используете ежедневно? Дайте нам знать об этом в комментариях.
Спасибо за чтение и удачной отладки!
