Как установить точку останова JavaScript из кода в Chrome?


688

Я хочу заставить отладчик Chrome разрывать строку с помощью кода или использовать какой-либо тег комментария, например что-то вроде console.break().


46
Вы пробовали debugger;или просто используете обычные точки останова на панели инструментов разработчика?
— Diaho

Вы имеете в виду установить точки останова из самого кода, а не устанавливать их с помощью средства отслеживания сценариев в инструментах разработчика?
— Фарис М


9
Не дубликат «в Chrome» против «в коде» - это две разные вещи, и этот вопрос применим ко многим не-XHR-сценариям. Да 1 из ответов на другой вопрос отвечает на этот вопрос, но другие не применимы. Я буквально погуглил «установить точку останова javascript из кода chrome», и это первый результат, а другой вопрос даже не на первой странице.
— AaronLS

Ответы:


1162

Вы можете использовать debugger;в своем коде. Если консоль разработчика открыта, выполнение будет прервано. Это работает и в firebug.


8
Хорошая хитрость - запустить отладчик через несколько секунд:setTimeout(function(){debugger;}, 3000);
— Shahar

30
Является ли трюк с таймером обычной практикой? Проверка / обоснование?
— Юстус Иапен

4
Это очень полезно. Примечание также debugger;поддерживается во всех основных браузерах. Для получения дополнительной информации: w3schools.com/jsref/jsref_debugger.asp
— ScottyG

16
@ScottyG MDN менее блестящий, более полезный: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
— jpaugh

@JustusEapen Проблема в том, что Javascript является однопоточным, поэтому он не может прервать выполнение кода.
— Витрувий

27

Настройте слушателя нажатия кнопки и вызовите debugger;

пример

$("#myBtn").click(function() {
 debugger;   
});

демонстрация

http://jsfiddle.net/hBCH5/

Ресурсы по отладке в JavaScript


1
Это устанавливает
— точку

@PeterV Я нашел бы это полезным, если бы я просто пытался открыть свой код в месте, которое было близко к блоку кода, который я отлаживал ... но не хотел отлаживать все время ... но да , если это просто открыть отладчик ... тогда для этого есть нажатие клавиши.
— Армстронгест

27

Вы также можете использовать debug(function), чтобы сломать, когда functionвызывается.

Справочник по API командной строки: отладка


2
Очень мило - похоже, что Chrome только сейчас, но в любом случае это моя основная платформа. Теперь мне просто нужно помнить, чтобы перестать называть мой глобальный флаг отладки "отладкой" ...
— brichins

Справочник по API командной строки Chrome Debugger содержит некоторые другие полезные вещи, о которых я не знал. Спасибо!
— Питер Т.

16

Как уже говорили другие, debugger;это путь. Я написал небольшой скрипт, который вы можете использовать из командной строки в браузере для установки и удаления точки останова непосредственно перед вызовом функции: http://andrijac.github.io/blog/2014/01/31/javascript-breakpoint/


8

На вкладке «Сценарии» перейдите туда, где находится ваш код. Слева от номера строки нажмите. Это установит точку останова.

Скриншот:

скриншот точки останова в Chrome

После этого вы сможете отслеживать точки останова на правой вкладке (как показано на скриншоте).


41
Это не отвечает на вопрос, он хочет быть в состоянии сделать это в коде
— Роберт

39
xn .: «Вот картинка с моим ответом, когда он был еще маленьким ребенком с 0 голосами. Теперь он весь вырос».
— AaronLS

3
Если вы загружаете JS-скрипт с помощью Ajax-вызова, он здесь не будет отображаться, поэтому в коде требуется точка останова.
— Петруза

@FlorianMargaine, больше нет вкладки «Сценарии». Пожалуйста, обновите изображение.
— Pacerier

В некоторых средах, таких как Drupal, JS получает добавленный суффикс строки запроса к кешу. Если вы очищаете кеш, он часто обновляет этот суффикс, который может уничтожить любые точки останова, которые вы установили при предыдущей загрузке.
— Ник

7

debugger является зарезервированным ключевым словом EcmaScript и дает дополнительную семантику начиная с ES5

В результате, он может быть использован не только в Chrome, но и Firefox и Node.js с помощьюnode debug myscript.js .

Стандарт говорит :

Синтаксис

DebuggerStatement :
    debugger ;

Семантика

Оценка производства DebuggerStatement может позволить реализации вызвать точку останова при запуске под отладчиком. Если отладчик отсутствует или активен, это утверждение не имеет видимого эффекта.

Производственный DebuggerStatement: отладчик; оценивается следующим образом:

  1. Если средство отладки, определенное реализацией, доступно и включено, то
    1. Выполните определенное для реализации действие отладки.
    2. Пусть result будет значением Завершения, определяемым реализацией.
  2. еще
    1. Пусть результат будет (обычный, пустой, пустой).
  3. Вернуть результат.

Никаких изменений в ES6.


3

Это возможно, и есть много причин, по которым вы можете захотеть сделать это. Например, отладка бесконечного цикла javascript рядом с началом загрузки страницы, которая мешает корректной загрузке набора инструментов разработчика chrome (или firebug).

Смотрите раздел 2

http://www.laurencegellert.com/2012/05/the-three-ways-of-setting-breakpoints-in-javascript/

или просто добавьте строку, содержащую слово отладчик, в ваш код в нужной контрольной точке.


3

Точка останова: -

точка останова прекратит выполнение и позволит вам изучить значения JavaScript.

Изучив значения, вы можете возобновить выполнение кода (обычно с помощью кнопки воспроизведения).

Отладчик: -

Отладчик; останавливает выполнение JavaScript и вызывает функцию отладки.

Оператор отладчика приостанавливает выполнение, но не закрывает файлы и не очищает переменные.

Example:-
function checkBuggyStuff() {
  debugger; // do buggy stuff to examine.
};


2

Есть много способов отладки кода JavaScript. Следующие два подхода широко используются для отладки JavaScript с помощью кода

  1. Используется console.log()для распечатки значений в консоли браузера. (Это поможет вам понять значения в определенных точках вашего кода)

  2. Ключевое слово отладчика. Добавьте debugger;в места, которые вы хотите отладить, откройте консоль разработчика браузера и перейдите на вкладку источников.

Дополнительные инструменты и способы отладки кода JavaScript приведены в этой ссылке W3School .


1
+1 и использование console.log также помогает найти ваш код, потому что обычно файл / строка # показывается рядом с сообщением, и вы можете щелкнуть по нему, чтобы открыть свой код в отладчике, установить точку останова и т. Д.
— Джон Хенкель

0

Я бы не рекомендовал, debugger;если вы просто хотите убить и остановить код JavaScript, поскольку debugger;он просто временно заморозит ваш код JavaScript и не остановит его навсегда.

Если вы хотите правильно убить и остановить JavaScript-код по вашей команде, используйте следующее:

throw new Error("This error message appears because I placed it");

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.