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