Как я могу отладить свой код JavaScript? [закрыто]

Когда я обнаруживаю, что у меня есть проблемный фрагмент кода, как мне его отладить?

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 . Я обычно считаю трассировку стека в 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 есть ключевое слово debugger для отладки кода 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, я написал собственную простую панель, которую я включаю на страницу. Это просто как окно Immediate в Visual Studio. Я могу изменять значения своих переменных, вызывать свои функции и просматривать значения переменных. Он просто оценивает код, написанный в текстовом поле.

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

В дополнение к Firebug и встроенным в браузер расширениям разработчика, JetBrains WebStorm 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 инструменты предоставляет средства отладки , такие как точки останова, часы и локальный просмотр переменного и консоль для сообщений и немедленного исполнения кода.