Я работаю над существенно большим веб-страничным JavaScript-приложением. По какой-то причине недавнее изменение приводит к случайному зависанию браузера.
Как я могу сузить, где проблема? Поскольку браузер перестает отвечать на запросы, я не вижу никаких ошибок и не могу Break on next использовать FireBug.
Вместо того, чтобы комментировать ад из вашего кода, вы должны использовать журнал отладки консоли.
Вы должны использовать функциональность console.log(), предоставляемую большинством современных браузеров, или эмулировать ее, если вы используете браузер, который ее не поддерживает.
Каждый раз, когда вы вызываете console.log('sometext'), запись журнала в консоли отладки вашего браузера будет создана с указанным текстом, обычно за которым следует фактическое время.
Вы должны установить запись в журнале перед каждой важной частью потока приложений, затем все больше и больше, пока не найдете, какой журнал не вызывается. Это означает, что код до этого журнала висит в браузере.
Вы также можете написать свою собственную личную функцию регистрации с добавленными функциями, например состояние какой-либо определенной переменной, или объект, содержащий более подробный аспект вашего потока программ и т.д.
Пример
console.log('step 1');
while(1) {}
console.log('step 2');
Бесконечный цикл остановит программу, но вы все равно сможете увидеть журнал консоли с потоком программы, записанным до того, как программа остановится.
Итак, в этом примере вы не увидите "шаг 2" в журнале консоли, но вы увидите "шаг 1". Это означает, что программа остановлена между шагами 1 и 2.
Затем вы можете добавить дополнительный консольный журнал в код между двумя шагами, чтобы искать проблему глубоко, пока не найдете ее.
Вы можете добавить debugger; в любом месте вашего JS-кода, чтобы вручную установить точку останова. Он приостановит выполнение и позволит вам возобновить/проверить код (Firebug/FF).
Страница Wiki Firebug: http://getfirebug.com/wiki/index.php/Debugger;_keyword
Чтобы изолировать проблему, которую вы могли бы начать, удалив/отключив/комментируя разные разделы вашего кода, пока вы не сузили код до небольшой части, которая позволит вам найти ошибку. Другая возможность - посмотреть историю регистрации исходного кода для различных изменений, которые были недавно совершены. Надеюсь, вы поймете, в чем проблема.
Я удивлен, что на этот вопрос пока не ответил должным образом, и самый проголосовавший ответ в основном "ставит журналы консоли повсюду, пока вы не выясните", что на самом деле не является решением, особенно с более крупными приложениями, если вы действительно хотите потратить все свое время на копирование "консольного журнала".
В любом случае вам нужно всего лишь debugger; кто-то уже упоминал об этом, но на самом деле не объяснил, как это можно использовать:
В chrome (и большинстве других браузеров) debugger; остановит выполнение, отвезет вас в консоль dev и покажет вам текущий исполняемый код слева и трассировку стека справа. В правом верхнем углу консоли есть несколько кнопок типа стрелки. Первый - "возобновить script исполнение". Тот, который мы хотим, это следующий "шаг над следующим вызовом функции".
В принципе, все, что вам нужно сделать, это отложить отладчик в любом месте вашего кода, в тот момент, когда вы знаете, что страница еще не заморожена, а затем запустите ее и повторно нажмите "перейдите к следующему вызову функции", который выглядит как стрела, прыгающая по кругу. Он будет идти по очереди, вызывать по вызову, через выполнение вашего script, пока он не зависает/не застревает в бесконечном цикле. На этом этапе вы сможете увидеть, где именно застрял ваш код, а также все переменные/значения в настоящее время в области видимости, что должно помочь вам понять, почему застрял script.
Я просто ломал голову, пытаясь найти висячий цикл в довольно сложном JS, над которым я работаю, и мне удалось найти его примерно за 30 секунд, используя этот метод.
Установите Google Chrome, перейдите на страницу, нажмите f12, и появится консоль разработчика. Затем выберите кнопку Сценарии, затем выберите script (ex: myScript.js) из раскрывающегося списка в верхнем левом углу консоли. Затем щелкните по первой строке (или строке, в которой, по вашему мнению, не зависает), и будет выполнена точка останова. После того, как javascript достигнет точки прерывания, нажмите на одну из кнопок в правом верхнем углу консоли (вы увидите такую кнопку, как символ паузы, а затем другую кнопку 4). Нажмите кнопку 2º (или кнопку после паузы для перехода) или кнопку 3º (шаг). Мышь над кнопками, и они объяснят вам, что они означают. Затем вы войдете в свой код таким образом, пока он не зависает, а затем вы сможете отлаживать его лучше.
Отладчик Google Chrome намного лучше, чем Firebug и быстрее. Я сделал изменение от Firebug, и это действительно здорово!;)
Сегодняшние браузеры Firefox/Seamonkey (Ctrl-Shift-I/Debugger/PAUSE-Icon), Chrome,... обычно имеют встроенный JS-отладчик с кнопкой PAUSE, которая работает в любое время. Просто нажмите на это, когда на странице с циклом/интенсивностью процессора, и, скорее всего, панель "Стек вызовов" укажет вам на проблему - готова к дальнейшему обследованию...
По моему опыту, проблемы, из-за которых браузер становится невосприимчивым, обычно представляют собой бесконечные циклы или подобные.
В качестве начальной точки, исследуйте свои петли для глупых вещей, например, не увеличивая то, на что вы позже полагаетесь.
Как сказал более ранний плакат, кроме этого, закомментируйте фрагменты кода, чтобы изолировать проблему. Вы могли бы использовать методологию разделения и покорения и почти буквально прокомментировать половину страниц JS, если бы она работала с другой ошибкой, вы, вероятно, нашли правильный бит!
Затем разделите это пополам и т.д., пока не найдете виновника.
Я знаю, что он примитивен, но мне нравится посыпать мой js-код "alert", чтобы увидеть, насколько далеко мой код работает до возникновения проблемы. Если окна предупреждений слишком раздражают, вы можете настроить текстовое поле, к которому вы можете добавить журналы:
<textarea id='txtLog' ...></textarea>
<script>
...
function log(str) {
$('#txtLog').append(str + '\n');
}
log("some message, like 'Executing Step #2'...");
...
</script>
Я знаю, что этот вопрос старый, но в VS2013 и вы можете нажать кнопку паузы и получить полную трассировку стека JS. Это сводило меня с ума, потому что петля была внутри angular, поэтому я не мог поместить предупреждения, точки останова и т.д., Потому что я понятия не имел, куда их поместить. Я не знаю, работает ли это с бесплатным экспресс-выпуском, но это стоит того.
Я также читал, что у Chrome есть функция паузы, поэтому это может быть вариант, но я сам не пробовал.
Я думаю, что вы можете использовать консольный журнал, как этот
console.log(new Date() + " started Function Name or block of lines from # to #");
// functions or few lines of code
console.log(new Date() + " finished Function Name or block of lines from # to #")
К концу запуска вашей веб-страницы вы можете определить область, занимающую столько времени во время выполнения, b