Как пользоваться дебаггером в Chrome DevTools? Как поставить точку останова на чужом сайте без доступа к исходному коду?

В Chrome DevTools дебаггер позволяет ставить точки останова (breakpoints), чтобы остановить выполнение JavaScript и исследовать состояние программы.

Короткий ответ

Что ответить на собеседовании

В Chrome DevTools дебаггер позволяет ставить точки останова (breakpoints), чтобы остановить выполнение JavaScript и исследовать состояние программы.

Подробный разбор

Ответ с пояснениями

В Chrome DevTools дебаггер позволяет ставить точки останова (breakpoints), чтобы остановить выполнение JavaScript и исследовать состояние программы.

Чтобы поставить точку останова на чужом сайте без доступа к исходному коду:

  1. Откройте DevTools (F12 или Ctrl+Shift+I).
  2. Перейдите на вкладку Sources.
  3. Найдите нужный скрипт в списке файлов. Если код минифицирован, можно нажать на кнопку Pretty print ({}) для форматирования.
  4. Поставьте точку останова, кликнув по номеру строки.

Если исходный код недоступен или скрипт загружен динамически, можно:

  • Использовать Event Listener Breakpoints (в правой панели Sources) — поставить точку останова на определённые события (например, клики, загрузка и т.п.).
  • Использовать XHR/fetch Breakpoints для остановки при сетевых запросах.
  • Вставить debugger; вручную через консоль, если есть возможность выполнить код на странице.

Таким образом, даже без прямого доступа к исходникам можно исследовать поведение сайта и отлаживать его.

Практика в реальном времени

Подготовьтесь к следующему собеседованию

Interview Boost учитывает вакансию, резюме и технологии и помогает сформулировать ответ прямо во время интервью.

Начать подготовку