Как я могу отладить мой код JavaScript?
Когда я обнаружу, что у меня есть проблемный фрагмент кода, как мне отладить его?
20 ответов
Firebug - один из самых популярных инструментов для этой цели.
Все современные браузеры имеют встроенную отладочную версию JavaScript. Детали этого будут рассмотрены на соответствующих веб-страницах технологий. Мое личное предпочтение отладки JavaScript - Firebug в Firefox. Я не говорю, что Firebug лучше любого другого; это зависит от ваших личных предпочтений, и вы все равно должны проверить свой сайт во всех браузерах, но мой первый, личный, первый выбор - это Firebug.
Я расскажу о некоторых высокоуровневых решениях ниже, используя в качестве примера Firebug:
Fire Fox
Firefox поставляется с собственным встроенным средством отладки JavaScript, но я бы порекомендовал вам установить надстройку Firebug. Это обеспечивает несколько дополнительных функций на основе базовой версии, которые удобны. Я собираюсь говорить только о Firebug здесь.
После установки Firebug вы можете получить к нему доступ, как показано ниже:
Во-первых, если вы щелкнете правой кнопкой мыши по любому элементу, вы можете проверить элемент с помощью Firebug:
Нажав на это, вы откроете панель Firebug в нижней части браузера:
Firebug предоставляет несколько функций, но одна из них заинтересовала вкладку сценария. При нажатии на вкладку скрипта открывается следующее окно:
Очевидно, что для отладки нужно нажать перезагрузить:
Теперь вы можете добавить точки останова, нажав на строку слева от фрагмента кода JavaScript, к которому вы хотите добавить точку останова:
Когда ваша точка останова достигнута, она будет выглядеть так:
Вы также можете добавить переменные наблюдения и, как правило, делать все, что ожидаете в современном инструменте отладки.
Для получения дополнительной информации о различных опциях, предлагаемых в Firebug, посмотрите FAQ по Firebug.
Хром
Chrome также имеет собственную встроенную опцию отладки JavaScript, которая работает очень похожим образом: щелчок правой кнопкой мыши, проверка элемента и т. Д. Взгляните на Chrome Developer Tools. Я обычно нахожу трассировку стека в Chrome лучше, чем Firebug.
Internet Explorer
Если вы разрабатываете в .NET и используете Visual Studio с использованием среды веб-разработки, вы можете отлаживать код JavaScript напрямую, устанавливая точки останова и т. Д. Ваш код JavaScript выглядит точно так же, как если бы вы отлаживали код C# или VB.NET.
Если у вас его нет, Internet Explorer также предоставляет все инструменты, показанные выше. Досадно, что вместо того, чтобы щелкнуть правой кнопкой мыши по элементам Chrome или Firefox, вы получаете доступ к инструментам разработчика, нажимая F12. Этот вопрос охватывает большинство вопросов.
- Internet Explorer 8 (Инструменты разработчика - F12). Все остальное - второй рейтинг в Internet Explorer.
- Firefox и Firebug. Нажмите F12 для отображения.
- Safari (Показать строку меню, Настройки -> Дополнительно -> Показать строку меню " Разработка")
- Консоль Google Chrome JavaScript (F12 или (Ctrl + Shift + J)). В основном тот же браузер, что и Safari, но Safari лучше ИМХО.
- Opera (Инструменты -> Дополнительно -> Инструменты разработчика)
В JavaScript есть ключевое слово отладчика для отладки кода JavaScript. Поставить отладчик; фрагмент в вашем коде JavaScript. В этот момент он автоматически начнет отладку кода JavaScript.
Например:
Предположим, это ваш файл test.js
function func(){
//Some stuff
debugger; //Debugging is automatically started from here
//Some stuff
}
func();
- Когда браузер запускает веб-страницу в опции разработчика с включенным отладчиком, он автоматически начинает отладку из отладчика; точка.
- Там должно быть открыто окно разработчика браузера.
Я пользуюсь старым добром printf подход (древняя техника, которая будет хорошо работать в любое время).
Взгляни на магию %o:
console.log("this is %o, event is %o, host is %s", this, e, location.host);
%o выгрузите кликабельный и хорошо читаемый контент JS-объекта. %s был показан только для записи.
И это:
console.log("%s", new Error().stack);
дает вам Java-подобную трассировку стека к точке new Error() вызов (включая путь к файлу и номер строки!!).
И то и другое %o а также new Error().stack доступны в Chrome и Firefox.
С такими мощными инструментами вы делаете предположение, что что-то не так в вашем JS, помещаете выходные данные отладки (не забывайте переносить в if заявление, чтобы уменьшить количество данных) и проверить ваше предположение. Исправьте проблему или сделайте новое предположение или добавьте больше отладочного вывода к битовой проблеме.
Также для трассировки стека используйте:
console.trace();
как говорят Консоль
Счастливого взлома!
Начните с Firebug и IE Debugger.
Будьте осторожны с отладчиками в JavaScript, хотя. Время от времени они будут влиять на окружающую среду настолько, чтобы вызывать ошибки, которые вы пытаетесь отладить.
Примеры:
Для Internet Explorer это, как правило, постепенное замедление и является своего рода утечкой памяти. Примерно через полчаса мне нужно перезагрузить компьютер. Кажется, это довольно регулярно.
Для Firebug, вероятно, прошло больше года, так что, возможно, это была более старая версия. В результате я не помню специфику, но в основном код работал неправильно, и после некоторой попытки отладки я отключил Firebug, и код работал нормально.
Хотя alert(msg); работает в тех сценариях "я просто хочу узнать, что происходит"... каждый разработчик сталкивался с тем случаем, когда вы попадаете в (очень большой или бесконечный) цикл, из которого вы не можете выйти.
Я бы порекомендовал, чтобы во время разработки, если вы хотите использовать отладочную опцию в вашем лице, используйте опцию отладки, которая позволит вам выйти из строя. (PS Opera, Safari? И Chrome? Все это доступно в их родных диалогах)
//global flag
_debug = true;
function debug(msg){
if(_debug){
if(!confirm(msg + '\n\nPress Cancel to stop debugging.')){
_debug = false;
}
}
}
С помощью вышеперечисленного вы можете погрузиться в большой цикл отладки всплывающих окон, где нажатие Enter/Ok позволяет пролистывать каждое сообщение, а нажатие Escape/Cancel позволяет вам красиво выйти из строя.
Я использую меню / консоль разработчика WebKit (Safari 4). Это почти идентично Firebug.
console.log() новый черный - намного лучше, чем alert(),
Мой первый шаг - всегда проверять HTML и проверять синтаксис с помощью JSLint. Если у вас есть чистая разметка и правильный код JavaScript, то пришло время для Firebug или другого отладчика.
Я использовал Firebug, пока Internet Explorer 8 не вышел. Я не большой поклонник Internet Explorer, но, проведя некоторое время со встроенными инструментами разработчика, которые включают в себя действительно хороший отладчик, кажется бессмысленным использовать что-либо еще. Я должен склонить голову перед Microsoft, они проделали фантастическую работу над этим инструментом.
Visual Studio 2008 имеет несколько очень хороших инструментов отладки JavaScript. Вы можете удалить точку останова в своем коде JavaScript на стороне клиента и пройти по нему, используя те же инструменты, что и код на стороне сервера. Нет необходимости присоединяться к процессу или делать что-то хитрое, чтобы включить его.
Я использую несколько инструментов: Fiddler, Firebug и Visual Studio. Я слышал, Internet Explorer 8 имеет хороший встроенный отладчик.
Вы также можете проверить YUI Logger. Все, что вам нужно сделать, чтобы использовать его, это включить пару тегов в ваш HTML. Это полезное дополнение к Firebug, которое более или менее необходимо.
В дополнение к Firebug и встроенным в браузер разработчикам расширений, в интегрированную среду разработки JetBrains WebStorm входит встроенная поддержка удаленной отладки для Firefox и Chrome (требуется расширение).
Также поддерживает:
Варианты, чтобы проверить это бесплатно - 30 пробная версия или использование Ранней версии доступа.
Помимо использования отладчика JavaScript в Visual Studio, я написал свою собственную простую панель, которую я включил в страницу. Это просто как Немедленное окно Visual Studio. Я могу изменить значения моих переменных, вызвать мои функции и посмотреть значения переменных. Он просто оценивает код, написанный в текстовом поле.
Я обнаружил, что новая версия Internet Explorer 8 (нажмите F12) очень хороша для отладки кода JavaScript.
Конечно, Firebug хорош, если вы используете Firefox.
Если вы используете Visual Studio, просто поставьте debugger; над кодом, который вы хотите отладить. Во время выполнения управление приостановится в этом месте, и вы можете отлаживать шаг за шагом с этого момента.
Как и в большинстве ответов, это действительно зависит: чего вы пытаетесь достичь с помощью отладки? Основные разработки, устранение проблем с производительностью? Для базового развития все предыдущие ответы более чем адекватны.
Для тестирования производительности я рекомендую Firebug. Возможность определить, какие методы являются самыми дорогими с точки зрения времени, была неоценимой для ряда проектов, над которыми я работал. По мере того, как клиентские библиотеки становятся все более надежными, и на стороне клиента в целом ложится больше ответственности, этот тип отладки и профилирования станет только более полезным.
API консоли Firebug: http://getfirebug.com/console.html
Нажав F12, веб-разработчики могут быстро отлаживать код JavaScript, не выходя из браузера. Он встроен в каждую установку Windows.
В Internet Explorer 11 инструменты F12 предоставляют инструменты отладки, такие как точки останова, просмотр и просмотр локальных переменных, а также консоль для сообщений и немедленного выполнения кода.