Как отладить утечки памяти, бесконечные циклы и выполнение Javascript в браузере?

Каковы рекомендуемые способы проверки бесконечных циклов в javascript в браузере? Скажем, я открываю Chrome, и он падает, есть ли способ остановиться или как-то определить, где это произошло?

Тогда мне интересно, как я могу увидеть запущенный список исполняемых скриптов в браузере (скажем, какой-то таймер, который я потерял, работает, и это замедляет работу)? Предпочтительно в Chrome/Safari, но Firefox тоже будет работать.

Я постоянно использую инспектор/консоль элементов, я просто не понял способы эффективного отладки этих трех вещей.

Спасибо!

ОТВЕТЫ

Ответ 1

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

Один из способов увидеть, что выполняется с вашего JS, - это профилировать его. Все инструменты dev поставляются с профилировщиком. Просто прокомментируйте свой код в течение нескольких секунд после загрузки страницы, и это даст вам представление о том, что еще работает. Если вы используете библиотеку, такую ​​как jQuery, вы увидите много внутренних функций jQuery и некоторые из ваших собственных. Посмотрите на функцию, которая занимает наибольшее время работы (за звонок) и пытается свести к минимуму их использование, поскольку они являются наиболее дорогостоящими.

Если у вас есть бесконечный цикл в "не-threaded" JS, ваша страница вообще не будет загружаться полностью. Firefox должен сказать вам, что script занимает много времени для загрузки и позволяет вам отлаживать его (что покажет вам, где оно). Для "резьбовых" JS (те, которые работают от обратного вызова или setTimeout), вы можете отслеживать их с помощью профилировщика.

Ответ 2

1. Утечка памяти

2. Инфинитовые петли

Я не совсем понимаю, что браузер может указать вам в случае сложного бесконечного цикла, распространяющегося на сотни функций. Конечно, мне бы хотелось, чтобы браузер точно определял простые циклы, как некоторая функция, не возвращающаяся на 15 секунд. Но, по крайней мере, у нас есть что-то, браузер говорит вам, что a) что script работает медленно, и б) какие функции были вызваны и сколько времени было у каждого. Кроме того, вы можете установить точку останова и наблюдать за ее запуском шаг за шагом.

3. Контроль таймеров и интервалов

Откройте панель временной шкалы WebKit, нажмите "Запись" и проверьте все, что вы можете знать о каждом таймере и интервалах. Если вы не используете WebKit, вы можете прописать что-то простое:

_setTimeout = setTimeout
setTimeout = function(fn, time) {
  var timeout = _setTimeout(function() {
    console.log('Timeout #' + timeout + ' fired on ' + (fn.name || 'anonymous'))
    fn()
  }, time)
  return timeout
}

Обычно я просто делаю document.title мигающим, когда срабатывает тайм-аут/интервал.

4. Общая производительность кода