Как прервать выполнение скрипта при отладке в Google Chrome?

210

Как пройти код JavaScript в отладчике Google Chrome, как прекратить выполнение скрипта, если я не хочу продолжать? Единственный способ, который я нашел, это закрыть окно браузера.

Нажатие «Обновить эту страницу» запускает остальную часть кода и даже отправляет формы, как если бы вы нажимали F8 «Продолжить».

ОБНОВЛЕНИЕ :

При нажатии F5 (Обновить) во время приостановки скрипта:

  • Google Chrome (v22) запускает скрипт. Если скрипт отправляет HTTP-запрос, отображается HTTP-ответ на этот запрос. Исходная страница не обновляется.
  • IE 9 просто зависает. Однако в IE есть опция «Остановить отладку», которая при нажатии (при условии, что вы не нажимали F5 ранее) продолжает запускать сценарий вне отладчика.
  • Firebug ведет себя идентично Chrome.

Закрытие, а затем повторное открытие окна браузера - это не всегда самый простой способ, потому что это уничтожит состояние сеанса браузера, и это может быть важно. Все ваши точки останова также потеряны.

ОБНОВЛЕНИЕ (январь 2014) :

Обновить во время отладки:

  • Chrome v31: позволяет запускать сценарии и останавливается на дальнейших точках останова (но не отправляет ajax-запросы), затем обновляется.
  • IE 11: обновление ничего не делает, но вы можете нажать F5, чтобы продолжить.
  • Firefox v26: позволяет запускать сценарии, но не останавливается на дальнейших точках останова, отправляет запросы ajax, а затем обновляет.

Вид прогресса!

Перейдите на ту же страницу во время отладки:

  • Chrome v31: такой же, как Refresh.
  • IE 11: сценарии прекращаются, начинается новый сеанс браузера (аналогично закрытию и открытию снова).
  • Firefox v26: ничего не происходит.

Также Juacala предложил эффективный обходной путь. Например, если вы используете jQuery, запустите delete $ из консоли остановит выполнение, как только встретится любой метод jQuery. Я протестировал его во всех вышеперечисленных браузерах и могу подтвердить, что он работает.

ОБНОВЛЕНИЕ (март 2015) :

Наконец, после более чем 2-х лет и почти 10 тысяч просмотров правильный ответ дал Александр К. В Google Chrome есть собственный диспетчер задач, который может завершить процесс вкладки, не закрывая саму вкладку, сохраняя все точки останова и другие вещи без изменений.

Я даже дошел до BrowserStack.com, чтобы протестировать его в Chrome v22, и обнаружил, что это работает даже в то время.

Обходной путь Juacala все еще полезен при отладке в IE или Firefox.

ОБНОВЛЕНИЕ (январь 2019) :

Наконец-то в Chrome Dev Tools добавлен правильный способ остановить выполнение скрипта, что приятно (хотя и немного скрыто). Обратитесь к ответу Джеймса Гентеса за подробностями.

srgstm
источник
12
введите debugger;в консоль инструментов dev, и он сразу же положит вещи в отладчик и остановит скрипт.
Джейк
3
Ответ Джеймса Гентеса кажется лучшим решением в 2019 году
Спиколинн
1
Почему все говорят об остановке сценария? Речь идет о прекращении / разрыве всего следующего «следующего / запланированного» кода.
Андре Элрико

Ответы:

188

В Chrome есть «Диспетчер задач», доступный через Shift + ESCили через

Меню → Дополнительные инструменты → Диспетчер задач

Вы можете выбрать задачу на странице и завершить ее, нажав кнопку «Завершить процесс».

Александр К
источник
4
chrome 48это будет только ЗАКРЫТЬ инструмент Dev, а не завершать его, открывая его снова, вы можете увидеть, что программа все еще работает ( tried setInterval())
Abdelouahab
11
Я не вижу «Диспетчер задач» в разделе «Дополнительные инструменты», а shift + esc ничего не делает ... (Chrome 50, OSX) Shift + ESC работает в Chrome / Windows, хотя ...
Майкл
2
Ух ты, я так давно этого хотел, и он был там годами! Это самый полезный ответ StackOverflow, который я видел весь год!
Майкл Шепер
4
В Macintosh (Chrome v.63) эта опция отображается в меню «Окно» в третьей группе. Там нет очевидного сочетания клавиш.
Аполлон
2
Это убьет вкладку
Хтафоя
105

С апреля 2018 года в Chrome можно останавливать бесконечные циклы :

  1. Откройте панель « Источники» в Инструментах разработчика ( Ctrl+ Shift+I **).
  2. Нажмите кнопку Пауза , чтобы приостановить выполнение скрипта .

Также обратите внимание на сочетания клавиш: F8и Ctrl+\

введите описание изображения здесь

Джеймс Гентес
источник
Такая скрытая жемчужина на этом интерфейсе.
Норберт
Ответчик имеет ключ к секретам Вселенной.
Сэм
Ярлык особенно полезен, когда у вас есть бесконечно запущенный скрипт, который вы хотите остановить, чтобы проверить консоль. Спасибо.
Алексей
@DanDascalescu У меня Chrome 80.0.3987.149, и он выглядит так же
Джеймс Гентес
Может быть, мы смотрим на кнопку в разных состояниях исполнения? Мое в том, что я выбрал bodyэлемент здесь в SO, установил "break on -> поддеревья модификации", а затем щелкнул где угодно. Кнопка выглядит как на скриншоте, который я разместил.
Дан Даскалеску
37

Один из способов сделать это - приостановить выполнение сценария, посмотреть, какой код следует за тем, где вы остановились в данный момент, например:

var something = somethingElse.blah;

В консоли сделайте следующее:

delete somethingElse;

Затем запустите сценарий: он вызовет фатальную ошибку при попытке доступа somethingElse , и сценарий умрет. Вуаля, вы прекратили сценарий.

РЕДАКТИРОВАТЬ: Первоначально я удалил переменную. Это не достаточно хорошо. Вы должны удалить функцию или объект, для которого JavaScript пытается получить доступ к свойству.

juacala
источник
3
you have to delete a function or an objectтакой мерзкий взлом! (в пользовательском интерфейсе это было бы хорошо, как кнопка « убить всех» )
Марс Робертсон,
Это довольно неприятно, но я не могу придумать другого пути.
Juacala
Год спустя я возвращаюсь к тому же вопросу ... И я не могу понять это! Есть ли способ сделать его более общим?
Марс Робертсон
Вы не можете понять, как прекратить выполнение скрипта? Я всегда был в состоянии сделать это. У вас есть пример, который не позволяет вам убить сценарий таким образом?
Juacala
1
@ Хашим, ты должен быть в состоянии поставить точку останова внутри функции. Поэтому убедитесь, что внутренняя часть функции находится на отдельной строке от определения функции. В вашем случае вам потребуется в консоли, как только она будет приостановлена, набрать «document.getElementById ('see_older'). ParentNode.removeChild (document.getElementById ('see_older'));". Это потому, что у вас нет ничего в javascript для взлома. К сожалению, это тоже меняет HTML. Если вы можете изменить код на "var el = document.getElementById ('see_older'); \ n el.getEl ...", то вы можете просто сделать "delete el;" и это остановит это.
Juacala
12

Апрель 2020 года

Начиная с Chrome 80, ни один из текущих ответов не работает. Нет видимой кнопки «Пауза» - вам нужно долго нажимать кнопку «Воспроизвести», чтобы получить доступ к значку Стоп:

Остановить выполнение скрипта в Chrome DevTools

Дан Дакалеску
источник
2
Слава Богу! Реальный ответ на вопрос ОП.
user1023110
1
@ user1023110: я не знаю о Боге, но не за что :)
Дан Даскалеску
5

Если вы столкнулись с этим при использовании debuggerзаявления,

debugger;

... тогда я думаю, что страница будет работать вечно до тех пор, пока не закончится время выполнения js или следующий перерыв. Предполагая, что вы находитесь в режиме прерывания по ошибке (переключение значка паузы), вы можете убедиться, что произошел разрыв, вместо этого сделав что-то вроде:

debugger;throw 1;

или, может быть, вызвать несуществующую функцию:

debugger;z();

(Конечно, это не помогает, если вы пытаетесь пройтись по функциям, хотя, возможно, вы могли бы динамически добавить в throw 1илиz() или что-то подобное на панели «Источники», Ctrl-S, чтобы сохранить, а затем Ctrl-R, чтобы обновить ... это может, однако, пропустить одну точку останова, но может работать, если вы находитесь в цикле.)

Если вы выполняете цикл и ожидаете debuggerповторного запуска оператора, вы можете просто ввести throw 1вместо него.

throw 1;

Затем, когда вы нажмете Ctrl-R, будет выполнен следующий бросок, и страница обновится.

(протестировано с Chrome v38, около апреля 2017 г.)

ninjagecko
источник
3

Хороший вопрос здесь. Я думаю, что вы не можете прекратить выполнение скрипта. Несмотря на то, что я никогда не искал его, я довольно долго работал с отладчиком Chrome. Я обычно устанавливаю точки останова в своем коде javascript, а затем отлаживаю часть кода, которая мне интересна. Когда я заканчиваю отладку этого кода, я обычно просто запускаю остальную часть программы или обновляю браузер.

Если вы хотите предотвратить выполнение остальной части скрипта (например, из-за вызовов AJAX, которые будут сделаны), единственное, что вы можете сделать, это удалить этот код в консоли на лету, тем самым предотвращая эти вызовы после выполнения , вы можете выполнить оставшийся код без проблем.

Надеюсь, это поможет!

PS: Я пытался найти вариант для прекращения выполнения в некоторых руководствах / руководствах, таких как следующие, но не смог найти его. Как я уже говорил, вероятно, нет такой возможности.

http://www.codeproject.com/Articles/273129/Beginner-Guide-to-Page-and-Script-Debugging-with-C

http://www.nsbasic.com/app/tutorials/TT10.htm

Ромен Родригес-Хиль
источник
Я помог? Кажется, что нет опции завершения, но для того, чтобы предотвратить выполнение следующего кода, вы можете либо прокомментировать его ранее, либо удалить следующий код / ​​вызвать "live" в отладчике Chrome (эта последняя опция сделает кнопку продолжения вести себя как прекратить). Я знаю, что они не являются идеальными решениями, но я думаю, что они являются наиболее приемлемыми. Любые комментарии?
Ромен Родригес-Хиль
1
Во многих случаях код, который необходимо предотвратить, выполняется в стеке вызовов (функции, которые получат управление после возврата текущей функции). Конечно, я могу пойти и отредактировать функции в стеке вызовов, а затем найти и отредактировать все функции, которые могут быть вызваны асинхронно. Я уверен, что браузер должен обновлять страницу с помощью сценария, все еще находящегося в состоянии паузы, если он был приостановлен во время нажатия кнопки «Обновить страницу». Я также думаю, что это должно быть ожидаемое поведение для любого браузера (к сожалению, это не так).
srgstm
2
На самом деле я нашел обходной путь для прекращения выполнения скрипта !: В chrome я открываю отладчик для отладки одного из моих приложений и устанавливаю точку останова. Я запускаю страницу. Выполнение приостанавливается в точке останова. Затем я изучаю проблему и понимаю, что является причиной ошибки. Чтобы прекратить выполнение, я нажимаю кнопку X рядом с URL (чтобы остановить загрузку страницы), а затем, при продолжении сценария (F8), он прекращается. Я думаю, это довольно простой способ добиться этого. Что вы думаете об этом?
Ромен Родригес-Хиль
Кнопка X в Chrome заменяется кнопкой «Обновить» после загрузки страницы, поэтому после этого невозможно нажать X (я также пробовал ее в IE, в котором X все время доступен, но он всегда зависает). Я также проверил ваше предложение во время загрузки страницы и обнаружил, что сценарий не завершается после нажатия X и затем F8. Вероятно, что сценарии, которые еще не были загружены в браузер во время нажатия X, впоследствии не загружаются, но это должно быть очевидно.
srgstm
О, вы правы, это был быстрый тест, который не был репрезентативным ... Тогда кажется, что решения нет.
Ромен Родригес-Хиль
3

Ссылаясь на ответ, данный @scottndecker на следующий вопрос , в chrome теперь есть опция «отключить JavaScript» в разделе «Инструменты разработчика»:

  • Вертикально ...в правом верхнем углу
  • настройки
  • А в разделе «Настройки» перейдите в раздел «Отладчик» в самом низу и выберите «Отключить JavaScript».

Хорошо, что вы можете остановиться и запустить снова, просто установив / сняв отметку.

theFreedomBanana
источник
1
Если вы не согласны с мнением из-за того, что вы путаетесь между меню инструментов разработчика и меню Chrome, это очень печально :(
theFreedomBanana
Не работал для меня Я установил флажок Отключить JavaScript, но скрипт просто продолжает работать.
Пол Горбас
1

Вы можете сделать это, но сначала вы должны подготовить свой код.

Инструкции по прекращению выполнения скрипта в Google Chrome Dev Tools:

(1) Сначала подготовьте свой код, создав глобальную переменную:

var devquit=0;
$(document).ready({
    //the rest of your code

(2) В любом месте, где вы можете выйти, проверьте значение этой переменной:

//Lotsa code
if (devquit > 0) return false;

(3) Приостановить выполнение скрипта во время или перед вышеупомянутыми тестовыми строками.

(4) Переключиться на консоль

(5) Тип:

> devquit
0
> devquit=1   <=== only this line is necessary
> devquit
1

(6) Продолжить выполнение скрипта. Сценарий будет, return falseкогда он выполняет тест из шага (2) выше


Ноты:

(A) Этот прием работает с глобальными переменными и объектами, но он не будет работать с локальными переменными. Обратите внимание, что this:
newVar = 'never used before';
создает новое свойство объекта window (работает с указанным выше трюком), а это:
var newVar = 'never used before';
создает локальную переменную (НЕ работает с указанным выше трюком!)

(B) Таким образом, вы все еще можете использовать этот трюк с уже запущенным кодом, если у вас есть либо глобальная переменная, либо объект, который вернет false, если у него есть заданное значение.

(C) В крайнем случае, вы можете использовать хитрость Juacala и удалить элемент из DOM (на вкладке элементов), что приведет к ошибке JavaScript. Например, предположим, что у вас есть код var cartype = $('#cartype').val();Если вы удалите элемент с ID = cartypeперед этой строкой кода, то js будет разбит на этой строке. Тем не менее, элемент все равно будет отсутствовать при попытке перезапустить код. Описанный выше прием позволяет вам запускать и перезапускать код до бесконечности.


Больше примечаний:

(a) Вставьте точку останова в код: просто введите debugger;строку отдельно. Если DevTools открыт, сценарий перейдет в отладчик в этот момент. Если DevTools не открыт, код будет игнорировать оператор.

(б) Хотите избежать использования библиотеки jQuery при отладке кода? Черный ящик это. См. Инструкции черного ящика для Chrome - или - для Firefox


Благодарность (пожалуйста, посетите и upvote):

Отладка Javascript построчно с помощью Google Chrome

Можно ли изменить значения переменных javascript при отладке в Google Chrome?

cssyphus
источник
2
Any place where you may wish to quit, test the value of this variableЭто ужасно! Я хочу бросить курить, куда бы я ни шел в данный момент, я не знаю заранее, где это может быть!
Майкл
Если вы готовы заняться работой над кодом, это наиболее удобный для пользователя клиент, пытающийся остановить выполнение скрипта.
Гусь
??? Вам не нужна глобальная переменная. Просто нажмите на эту кнопку .
Дан Даскалеску
0

Вы можете сделать паузу на любом шаблоне XHR, который я считаю очень полезным при отладке подобных сценариев.

Например, я дал точку останова в шаблоне URL, содержащем «/»

введите описание изображения здесь

Аби
источник
0

Если у вас есть мошеннический цикл, приостановите код в отладчике Google Chrome (маленькая ||кнопка " " на вкладке "Источники").

Переключитесь обратно на сам Chrome, откройте «Диспетчер задач» ( Shift+ESC ), выберите вкладку, нажмите кнопку «Завершить процесс».

Вы получите сообщение Aww Snap, а затем можете перезагрузить ( F5).

Как отмечали другие, перезагрузка страницы в момент приостановки аналогична перезапуску мошеннического цикла и может вызвать неприятные блокировки, если отладчик также затем блокируется (в некоторых случаях приводя к перезапуску Chrome или даже ПК). Отладчику нужна кнопка «Стоп». Nb: Принятый ответ устарел в том смысле, что некоторые его аспекты сейчас явно неверны. Если вы проголосуете за меня, пожалуйста, объясните :) .

WWW-0av-Com
источник
1
Есть лучший способ .
Дан Даскалеску
-1

Откройте вкладку источника в «Инструментах разработчика», щелкните номер строки в запущенном скрипте, это создаст точку останова, и отладчик прекратит работу там.

Тодд
источник
-1

Есть много подходящих решений этой проблемы, как упомянуто выше в этом посте, но я нашел небольшой взлом, который может быть вставлен в скрипт или вставлен в консоль Chromes (отладчик) для достижения этой цели:

jQuery(window).keydown(function(e) { if (e.keyCode == 123) debugger; });

Это приведет к приостановке выполнения при нажатии F12.

Муртаза Хуссейн
источник
Что если вы (надеюсь) не используете jQuery?
Дан Даскалеску
затем используйте чистый Javascript, например document.addEveneListner .., чтобы получить событие keydown ..
Муртаза Хуссейн