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 или другого отладчика.

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

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

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

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

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

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

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

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

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

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

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

Варианты, чтобы проверить это бесплатно - 30 пробная версия или использование Ранней Версии Доступа .

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

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

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

API консоли Firebug: http://getfirebug.com/console.html

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

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