Как я могу отладить свой JavaScript-код?

Ответ 1

Firebug является одним из самых популярных инструментов для этой цели.

Ответ 2

Все современные браузеры поставляются с некоторой формой встроенного приложения для отладки JavaScript. Подробная информация о них будет рассмотрена на соответствующих веб-страницах технологий. Мое личное предпочтение отладки JavaScript - Firebug в Firefox. Я не говорю, что Firebug лучше, чем любой другой; это зависит от ваших личных предпочтений, и вы, вероятно, должны проверить свой сайт во всех браузерах, но мой первый, личный, первый выбор всегда является Firebug.

Ниже я расскажу о некоторых из решений высокого уровня, используя Firebug в качестве примера:

Firefox

В Firefox есть свой встроенный инструмент для отладки JavaScript, но я бы рекомендовал вам установить Firebug. Это дает несколько дополнительных функций, основанных на базовой версии, которая удобна. Я расскажу только о Firebug.

Как только Firebug установлен, вы можете получить к нему доступ, как показано ниже:

Во-первых, если вы щелкните правой кнопкой мыши по любому элементу, вы можете проверить элемент с помощью Firebug:

Нажав на эту кнопку, откроется панель Firebug в нижней части браузера:

Firebug предоставляет несколько функций, но интерес к ним - вкладка script. При нажатии на вкладку script открывается следующее окно:

Очевидно, что для отладки необходимо нажать кнопку перезагрузить:

Теперь вы можете добавить точки останова, щелкнув строку слева от фрагмента кода JavaScript, для которого вы хотите добавить точку останова:

Когда ваша точка останова будет удалена, она будет выглядеть следующим образом:

Вы также можете добавить смотреть переменные и вообще делать все, что можно было бы ожидать в современном инструменте отладки.

Для получения дополнительной информации о различных вариантах, предлагаемых в Firebug, ознакомьтесь с FAQ Firebug.

Chrome

В Chrome также есть встроенная опция отладки JavaScript, которая работает очень похоже, щелкните правой кнопкой мыши, проверит элемент и т.д. Посмотрите Инструменты разработчика Chrome. Я обычно обнаруживаю трассировки стека в Chrome лучше Firebug.

Internet Explorer

Если вы развиваетесь в .NET и используете Visual Studio с использованием среды веб-разработки, вы можете отлаживать код JavaScript напрямую, помещая точки останова и т.д. Ваш код JavaScript выглядит точно так же, как если бы вы отлаживали код С# или VB.NET.

Если у вас этого нет, Internet Explorer также предоставляет все инструменты, показанные выше. Раздражающе, вместо того, чтобы щелкнуть правой кнопкой мыши на элементах элемента Chrome или Firefox, вы получаете доступ к инструментам разработчика, нажав F12. Этот вопрос охватывает большинство пунктов.

Ответ 3

• Internet Explorer 8 (Инструменты разработчика - F12). Все остальное является вторым по счету в сети Internet Explorer land
• Firefox и Firebug. Нажмите F12 для отображения.
• Safari (Показать панель меню, Настройки → Дополнительно → Показать панель меню разработки)
• Консоль JavaScript Google Chrome (F12 или (Ctrl + Shift + J)). В основном тот же браузер, что и Safari, но Safari лучше IMHO.
• Opera (Инструменты → Дополнительно → Инструменты разработчика)

Ответ 4

В JavaScript есть JavaScript отладчик, чтобы отладить код JavaScript. Поместите отладчик отладчика в код JavaScript. Он автоматически начнет отладку кода JavaScript в этой точке.

Например:

Предположим, что это ваш файл test.js

function func(){
    //Some stuff
    debugger;  //Debugging is automatically started from here
    //Some stuff
}
func();

• Когда браузер запускает веб-страницу в опции разработчика с включенным отладчиком, он автоматически начинает отладку с отладчика.
• Должно быть открыто окно разработчика браузера.

Ответ 5

Я использую старый добрый подход 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();

как говорят консоль

Удачного взлома!

Ответ 6

Начните с Firebug и отладчика IE.

Будьте осторожны с отладчиками в JavaScript. Время от времени они будут влиять на среду настолько, чтобы вызвать некоторые ошибки, которые вы пытаетесь отладить.

Примеры:

Для Internet Explorer, это обычно постепенное замедление и является своего рода сделкой типа утечки памяти. Через полчаса мне нужно перезапустить. Это выглядит довольно регулярно.

Для Firebug это, вероятно, было больше года, поэтому, возможно, это была более старая версия. В результате я не помню специфику, но в основном код работал неправильно, и после попытки отладки его некоторое время я отключил Firebug, и код работал нормально.

Ответ 7

Хотя 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 позволяет вам хорошо выделиться.

Ответ 8

Я использую меню/консоль разработчика WebKit (Safari 4). Он почти идентичен Firebug.

console.log() - новый черный - намного лучше, чем alert().

Ответ 9

Мой первый шаг - всегда проверять HTML и проверять синтаксис с помощью JSLint. Если у вас есть чистая разметка и действительный код JavaScript, настало время для Firebug или другого отладчика.

Ответ 10

В Visual Studio 2008 есть очень хорошие инструменты для отладки JavaScript. Вы можете сбросить точку останова в своем JavaScript-коде на стороне клиента и выполнить ее, используя те же инструменты, что и код на стороне сервера. Нет необходимости присоединяться к процессу или делать что-нибудь сложное, чтобы включить его.

Ответ 11

Я использую несколько инструментов: Fiddler, Firebug и Visual Studio. Я слышал, что Internet Explorer 8 имеет хороший встроенный отладчик.

Ответ 12

Я использовал Firebug, пока не вышел Internet Explorer 8. Я не большой поклонник Internet Explorer, но, проведя некоторое время со встроенными инструментами разработчика, в который входит действительно хороший отладчик, кажется бессмысленным использовать что-либо еще. Я должен опрокинуть свою шляпу в Microsoft, и они сделали фантастическую работу над этим инструментом.

Ответ 13

Вы также можете проверить YUI Logger. Все, что вам нужно сделать, это включить в свой HTML несколько тегов. Это полезное дополнение к Firebug, которое является более или менее обязательным.

Ответ 14

Я нашел новую версию Internet Explorer 8 (нажмите F12) очень хорошо, чтобы отлаживать код JavaScript.

Конечно, Firebug хорош, если вы используете Firefox.

Ответ 15

Помимо использования отладчика JavaScript Visual Studio, я написал свою собственную панель, которую я включил в страницу. Это просто как Немедленное окно Visual Studio. Я могу изменить значения переменных, вызвать мои функции и увидеть значения переменных. Он просто оценивает код, написанный в текстовом поле.

Ответ 16

Я использую Venkman, отладчик JavaScript для XUL.

Ответ 17

Если вы используете Visual Studio, просто поставьте debugger; над кодом, который вы хотите отлаживать. Во время выполнения элемент управления будет приостанавливаться в этом месте, и вы можете отлаживать шаг за шагом оттуда.

Ответ 18

В дополнение к Firebug и расширению расширений браузера JetBrains WebStorm IDE поставляется с удаленная поддержка отладки для Firefox и Chrome (требуется расширение) в.

Также поддерживает:

• coffescript: как отладить coffeescript в node.js с веб-серверами 6 исходных карт
• node.js

Опции для бесплатного тестирования - это 30 проб или использование версия раннего доступа.

Ответ 19

Как и в большинстве ответов, это действительно зависит: чего вы пытаетесь достичь с помощью вашей отладки? Базовая разработка, устранение проблем с производительностью? Для базового развития все предыдущие ответы более чем адекватны.

Для тестирования производительности я рекомендую Firebug. Способность профилировать, какие методы являются самыми дорогими с точки зрения времени, неоценима для ряда проектов, над которыми я работал. Поскольку библиотеки на стороне клиента становятся все более и более надежными, и большая ответственность лежит на стороне клиента в целом, этот тип отладки и профилирования станет более полезным.

API-интерфейс Firebug: http://getfirebug.com/console.html

Ответ 20

При нажатии F12 веб-разработчики могут быстро отлаживать код JavaScript, не выходя из браузера. Он встроен в каждую установку Windows.

В Internet Explorer 11, Инструменты F12 предоставляют инструменты отладки, такие как точки останова, просмотр часов и локальных переменных и консоль для сообщений и немедленного выполнения кода.