Точки останова
Если вы не слишком знакомы с отладчиками, я уже упоминал точки останова, не объясняя, что они собой представляют… но это ненамного сложнее того, что я уже сказал.
Короче говоря, вы говорите отладчику, что хотите, чтобы выполнение вашего кода приостанавливалось, когда оно достигает определённой строки… и всё!
В Chrome браузер приостановится, и оттуда вы сможете вручную управлять выполнением кода… и делать ещё несколько интересных вещей, которые я объясню чуть позже.
Последний вызов, вы можете посмотреть его на видео!
Условные точки останова
Название говорит само за себя, но я объясню его на примере.
for (let i = 0; i < 100; i++) {
const winner = calculateWinner(players[i]);
winner.doSomething();
}
Я хочу отладить функцию calculateWinner, но только для 87-й итерации цикла. С обычной точкой останова мне пришлось бы приостанавливать и возобновлять выполнение кода 86 раз… не идеальный вариант.
Вместо этого я могу добавить условную точку останова и сказать отладчику приостановить выполнение только в том случае, если i === 87.
Вот так просто, но ооочень мощно!
Логпойнты
Но консольные логи? Я не могу жить без них!
Хорошо, вы можете установить специальные точки останова, которые на самом деле являются логпойнтами. Это означает, что вместо приостановки выполнения кода отладчик просто выведет сообщение в консоль.
Преимущества? Вам не нужно выкладывать тонну console.log в код, который вам нужно будет удалить позже, вы можете добавить логпойнт и удалить его, когда закончите.
Как? Читайте следующую главу 👇
Удаление точек останова
Вы можете удалить точку останова, щёлкнув по ней. Если вы хотите удалить все точки останова, вы можете нажать кнопку Deactivate breakpoints в правом верхнем углу. На самом деле это не удаляет их, но деактивирует, чтобы вы могли повторно активировать все одним щелчком мыши.
В любом случае, на вкладке Breakpoints вы можете включать/отключать и даже удалять точки останова в удобном обзоре.
Продолжение следует...
Перевод с некоторыми авторскими правками.
Автор оригинала: Leonardo Montini.