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

javascript debugging

143610 просмотра

20 ответа

42128 Репутация автора

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

Автор: Canavar Источник Размещён: 12.06.2009 06:49

Ответы (20)


78 плюса

10868 Репутация автора

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

Автор: Ryan Oberoi Размещён: 12.06.2009 06:51

2 плюса

14155 Репутация автора

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

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

Автор: J.W. Размещён: 12.06.2009 06:52

3 плюса

31244 Репутация автора

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

Автор: JohnFx Размещён: 12.06.2009 06:56

6 плюса

10116 Репутация автора

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

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

Автор: Ryan Florence Размещён: 12.06.2009 06:56

3 плюса

81 Репутация автора

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

Автор: d34dIO Размещён: 12.06.2009 06:58

12 плюса

10107 Репутация автора

Начните с Firebug и IE Debugger.

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

Примеры:

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

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

Автор: Tom Hubbard Размещён: 12.06.2009 06:59

3 плюса

9756 Репутация автора

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

Автор: James Размещён: 12.06.2009 07:09

3 плюса

473 Репутация автора

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

Автор: Rob Lund Размещён: 12.06.2009 07:11

4 плюса

53611 Репутация автора

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

Автор: Ken Размещён: 12.06.2009 07:13

54 плюса

10200 Репутация автора

  • Internet Explorer 8 (Инструменты разработчика - F12). Все остальное второстепенно в мире Internet Explorer
  • Firefox и Firebug . Хит F12для отображения.
  • Safari (Показать строку меню, Настройки -> Дополнительно -> Показать строку меню « Разработка» )
  • Консоль Google Chrome JavaScript ( F12или ( Ctrl+ Shift+ J)). В основном тот же браузер, что и Safari, но Safari лучше ИМХО.
  • Opera ( Инструменты -> Дополнительно -> Инструменты разработчика )
Автор: Chris Brandsma Размещён: 12.06.2009 07:35

1 плюс

608 Репутация автора

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

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

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

Автор: Gavin Размещён: 12.06.2009 07:46

9 плюса

50955 Репутация автора

Хотя 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позволяет приятно всплыть.

Автор: scunliffe Размещён: 12.06.2009 08:19

2 плюса

42128 Репутация автора

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

Автор: Canavar Размещён: 13.06.2009 08:08

2 плюса

874 Репутация автора

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

Автор: kuy Размещён: 13.06.2009 02:54

2 плюса

315 Репутация автора

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

Автор: Estefany Velez Размещён: 18.07.2012 03:36

21 плюса

25444 Репутация автора

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

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

Счастливого взлома!

Автор: gavenkoa Размещён: 22.10.2013 07:51

74 плюса

17430 Репутация автора

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

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

Fire Fox

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

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

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

Осмотреть элемент в Firebug

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

Панель Firebug

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

Вкладка «Сценарий»

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

JavaScript на вкладке sctipt

Теперь вы можете добавить точки останова , щелкнув строку слева от фрагмента кода 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 . Этот вопрос охватывает большинство вопросов.

Автор: Liam Размещён: 27.10.2013 09:06

2 плюса

221 Репутация автора

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

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

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

Автор: mxfh Размещён: 12.02.2014 12:25

29 плюса

1004 Репутация автора

В JavaScript есть ключевое слово отладчика для отладки кода JavaScript. Поставить отладчик; фрагмент в вашем коде JavaScript. На этом этапе он автоматически начнет отладку кода JavaScript.

Например:

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

function func(){
    //Some stuff
    debugger;  //Debugging is automatically started from here
    //Some stuff
}
func();
  • Когда браузер запускает веб-страницу в опции разработчика с включенным отладчиком, он автоматически начинает отладку из отладчика; точка.
  • Там должно быть открыто окно разработчика браузера.
Автор: Suresh Mahawar Размещён: 28.08.2014 02:31

0 плюса

264 Репутация автора

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

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

Автор: Reza Размещён: 02.06.2015 07:48
Вопросы из категории :
32x32