Як встановити точку зламу JavaScript від коду в Chrome?


686

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


46
ви намагалися debugger;або просто використовуєте звичайні точки перерви на панелі інструментів розробника?
— діахо

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


9
Не дублікат. "у Chrome" проти "у коді" - це дві різні речі, і це питання стосується багатьох сценаріїв, що не стосуються XHR. Так 1 з відповідей на інше питання відповідає на це питання, але інші не застосовуються. Я буквально гуглив "встановити точку розриву JavaScript від коду chrome", і це перший результат, а інше питання навіть не на першій сторінці.
— AaronLS

Відповіді:


1160

Ви можете використовувати debugger;у своєму коді. Якщо консоль розробника відкрита, виконання буде перервано. Він працює і в firebug.


8
Гарний трюк - запустити налагоджувач через кілька секунд:setTimeout(function(){debugger;}, 3000);
— Шахар

30
Чи є фокус таймера звичайною практикою? Перевірка / обґрунтування?
— Justus Eapen

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 фактично містить деякі інші дуже корисні речі, про які я не знав. Дякую!
— Петро Т.

16

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


8

На вкладці "Сценарії" перейдіть туди, де знаходиться ваш код. Ліворуч від номера рядка натисніть. Це встановить точку перерви.

Знімок екрана:

скріншот точки зламу в хромі

Тоді ви зможете відслідковувати свої точки прориву на правій вкладці (як показано на скріншоті).


41
Це не відповідає на запитання, він хоче мати змогу це зробити в коді
— robertc

39
xn .: "Ось картина моєї відповіді, ще тоді, коли це була лише маленька дитина, набравши 0 голосів. Зараз усе доросло."
— AaronLS

3
Якщо ви завантажите JS-скрипт з викликом Ajax, він не відображатиметься тут, отже, необхідність в точці розриву в коді.
— Петруза

@FlorianMargaine, Вкладки Сценаріїв більше немає. Оновіть зображення.
— Pacerier

У деяких рамках, як-от Drupal, JS додає суфікс рядка запиту, що перебуває в кеші. Якщо ви очищаєте кеші, він часто оновлює цей суфікс, який може стерти будь-які точки перерви, встановлені для попереднього завантаження.
— Нік

7

debugger є зарезервованим ключовим словом від EcmaScript і надає додаткову семантику з ES5

Як результат, його можна використовувати не тільки в Chrome, але і Firefox та Node.js vianode debug myscript.js .

Стандарт каже :

Синтаксис

DebuggerStatement :
    debugger ;

Семантика

Оцінка виробництва DebuggerStatement може дозволити реалізації впровадити точку розриву при запуску під налагоджувачем. Якщо налагоджувач відсутній або активний, це твердження не має спостережуваного ефекту.

Виробництво DebuggerStatement: налагоджувач; оцінюється наступним чином:

  1. Якщо доступна та увімкнена програма налагодження, визначена реалізацією, то
    1. Виконайте налагоджувальну дію налагодження.
    2. Нехай результат - значення, визначене виконанням.
  2. Інше
    1. Нехай результат буде (нормальний, порожній, порожній).
  3. Повернення результату.

У ES6 немає змін.


3

Це можливо, і є багато причин, з яких ви можете це зробити. Наприклад, налагодження нескінченного циклу JavaScript біля початку завантаження сторінки, що перешкоджає правильному завантаженню набору інструментів для розробників хрому (або 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.