Если вы используете Chrome 111 или новее, возможно, вы уже заметили, что мы изменили дизайн боковой панели точек останова. В Chrome 113 новая боковая панель полностью заменяет старый дизайн. Нашей целью при редизайне было улучшить рабочий процесс точек останова путем:
Предоставление лучшего обзора всех установленных точек останова. Делаем обычные рабочие процессы пользователей с помощью точек останова более доступными и интуитивно понятными . Делаем видимыми интересные существующие функции точек останова .
В этом посте предполагается, что вы уже знакомы с отладкой с использованием точек останова. Если вы раньше не использовали точки останова, перейдите к этому обзору точек останова и узнайте больше о том, как можно использовать точки останова для отладки кода.
Теперь давайте посмотрим, что предлагает обновленный дизайн и как вы можете использовать новую боковую панель! Обратите внимание, что редизайн направлен на то, чтобы сделать существующие функции более интуитивно понятными в использовании и более простыми в доступе, а не на добавлении новых функций.
Сделайте паузу на исключениях, чтобы выяснить, почему ваш код выдает ошибку.
Выдает ли ваш код исключение? Не волнуйтесь! Chrome DevTools позволяет вам приостанавливать исключения, чтобы остановить выполнение в момент возникновения исключения. Это может помочь вам изучить и лучше понять обстоятельства, при которых ваш код выдает ошибку. Вы можете выбрать, хотите ли вы приостанавливать обработку перехваченных исключений, неперехваченных исключений или того и другого, установив соответствующие флажки на боковой панели.
Управляйте своими точками останова: разворачивайте соответствующие группы точек останова и сворачивайте другие, чтобы сосредоточиться на том, что важно.
Точки останова могут быть распределены по нескольким файлам. Боковая панель точек останова группирует точки останова в соответствии с файлом, которому они принадлежат. Сосредоточьтесь только на тех, которые важны для текущего сеанса отладки, развернув соответствующие группы точек останова и свернув оставшиеся.
Управляйте точками останова: одним щелчком мыши можно перейти к коду, удалить или включить/отключить точки останова.
Боковая панель точек останова позволяет выполнять стандартные задачи одним щелчком мыши. Вот обзор того, как вы можете...
Перейдите к месту точки останова в редакторе кода. Удалите одну точку останова или все точки останова в файле. Включите или отключите одну точку останова или все точки останова в файле.
И все это в один клик! Конечно, эти параметры также доступны в контекстном меню:
Перейдите к месту точки останова, щелкнув фрагмент кода точки останова.
Хотите проверить, в каком месте кода вы установили точку останова, и проанализировать окружающий код? Просто щелкните фрагмент кода точки останова на боковой панели, и местоположение кода откроется в редакторе кода.
Удалите одну точку останова или все точки останова в файле, нажав кнопку «Удалить».
Наведите указатель мыши на точку останова или группу точек останова, чтобы открыть кнопку удаления, которая удаляет одну или все точки останова в файле при нажатии.
Отключить одну или все точки останова в файле
Установите или снимите флажок рядом с точкой останова, чтобы включить или отключить ее.
Чтобы включить или отключить все точки останова в файле, наведите указатель мыши на группу точек останова и установите или снимите флажок, который появляется рядом с именем файла.
Используйте эти менее известные функции точек останова: условные точки останова и точки журнала.
Измените условия точки останова или измените журнал точек останова, отредактировав точку останова.
Отредактируйте условие точки останова или журнал, наведя курсор на точку останова и нажав появившуюся кнопку редактирования . Откроется диалоговое окно для изменения типа точки останова и сведений о вашей точке останова.
Либо выберите строку точки останова в редакторе кода и введите Control + Alt + b в Linux и Command + Alt + b в Mac, чтобы открыть диалоговое окно редактирования точки останова.
Вы также можете быстро перепроверить состояние или журнал точек журнала, наведя указатель мыши на точку останова на боковой панели:
Заключение
Нашей целью при изменении дизайна боковой панели точек останова было упростить отладку с помощью точек останова. Самое главное, мы стремились сделать вещи более структурированными, доступными и понятными. Мы надеемся, что эти улучшения помогут вам в следующем сеансе отладки!
Если у вас есть предложения по дальнейшим улучшениям, дайте нам знать, сообщив об ошибке !
Загрузите предварительный просмотр каналов
Рассмотрите возможность использования Chrome Canary , Dev или Beta в качестве браузера для разработки по умолчанию. Эти каналы предварительного просмотра дают вам доступ к новейшим функциям DevTools, тестируют передовые API-интерфейсы веб-платформы и находят проблемы на вашем сайте раньше, чем это сделают ваши пользователи!
Связь с командой Chrome DevTools
Используйте следующие параметры, чтобы обсудить новые функции и изменения в публикации или что-либо еще, связанное с DevTools.
- Отправьте нам предложение или отзыв через crbug.com .
- Сообщите о проблеме DevTools, используя дополнительные параметры.
> Справка > Сообщить о проблемах DevTools в DevTools. - Напишите в Твиттере @ChromeDevTools .
- Оставляйте комментарии к нашим видеороликам «Что нового в DevTools» на YouTube или «Советы разработчика» на YouTube .