Как я могу отладить мой код JavaScript?
143610 просмотра
20 ответа
Когда я обнаружил, что у меня есть проблемный фрагмент кода, как мне отладить его?
Автор: Canavar Источник Размещён: 13.11.2019 11:29Ответы (20)
78 плюса
Firebug является одним из самых популярных инструментов для этой цели.
Автор: Ryan Oberoi Размещён: 12.06.2009 06:5174 плюса
Все современные браузеры имеют встроенную отладочную версию 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 . Этот вопрос охватывает большинство вопросов.
Автор: Liam Размещён: 27.10.2013 09:0654 плюса
- Internet Explorer 8 (Инструменты разработчика - F12). Все остальное второстепенно в мире Internet Explorer
- Firefox и Firebug . Хит F12для отображения.
- Safari (Показать строку меню, Настройки -> Дополнительно -> Показать строку меню « Разработка» )
- Консоль Google Chrome JavaScript ( F12или ( Ctrl+ Shift+ J)). В основном тот же браузер, что и Safari, но Safari лучше ИМХО.
- Opera ( Инструменты -> Дополнительно -> Инструменты разработчика )
29 плюса
В JavaScript есть ключевое слово отладчика для отладки кода JavaScript. Поставить отладчик; фрагмент в вашем коде JavaScript. На этом этапе он автоматически начнет отладку кода JavaScript.
Например:
Предположим, это ваш файл test.js
function func(){
//Some stuff
debugger; //Debugging is automatically started from here
//Some stuff
}
func();
- Когда браузер запускает веб-страницу в опции разработчика с включенным отладчиком, он автоматически начинает отладку из отладчика; точка.
- Там должно быть открыто окно разработчика браузера.
21 плюса
Я использую старый добрый 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:5112 плюса
Начните с Firebug и IE Debugger.
Будьте осторожны с отладчиками в JavaScript, хотя. Время от времени они влияют на окружающую среду настолько, чтобы вызывать ошибки, которые вы пытаетесь отладить.
Примеры:
Для Internet Explorer это, как правило, постепенное замедление и является своего рода утечкой памяти. Примерно через полчаса мне нужно перезагрузить компьютер. Кажется, это довольно регулярно.
Для Firebug, вероятно, прошло больше года, так что, возможно, это была более старая версия. В результате я не помню специфику, но в основном код работал неправильно, и после некоторой попытки отладки я отключил Firebug, и код работал нормально.
Автор: Tom Hubbard Размещён: 12.06.2009 06:599 плюса
Хотя 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:196 плюса
Я использую меню / консоль разработчика WebKit (Safari 4). Это почти идентично Firebug.
console.log()
это новый черный - гораздо лучше, чем alert()
.
4 плюса
Мой первый шаг - всегда проверять HTML и проверять синтаксис с помощью JSLint . Если у вас есть чистая разметка и правильный код JavaScript, то пришло время для Firebug или другого отладчика.
Автор: Ken Размещён: 12.06.2009 07:133 плюса
Visual Studio 2008 имеет несколько очень хороших инструментов отладки JavaScript. Вы можете удалить точку останова в своем коде JavaScript на стороне клиента и пройти по нему, используя те же инструменты, что и код на стороне сервера. Нет необходимости присоединяться к процессу или делать что-то хитрое, чтобы включить его.
Автор: JohnFx Размещён: 12.06.2009 06:563 плюса
Я использую несколько инструментов: Fiddler , Firebug и Visual Studio. Я слышал, что в Internet Explorer 8 есть хороший встроенный отладчик.
Автор: d34dIO Размещён: 12.06.2009 06:583 плюса
Я использовал Firebug , пока не вышел Internet Explorer 8. Я не большой поклонник Internet Explorer, но, проведя некоторое время со встроенными инструментами разработчика, которые включают в себя действительно хороший отладчик, кажется бессмысленным использовать что-либо еще. Я должен склонить голову перед Microsoft, они проделали фантастическую работу над этим инструментом.
Автор: James Размещён: 12.06.2009 07:093 плюса
Вы также можете проверить YUI Logger . Все, что вам нужно сделать, чтобы использовать его, это включить пару тегов в ваш HTML. Это полезное дополнение к Firebug, которое более или менее необходимо.
Автор: Rob Lund Размещён: 12.06.2009 07:112 плюса
Я обнаружил, что новая версия Internet Explorer 8 (нажмите F12) очень хороша для отладки кода JavaScript.
Конечно, Firebug хорош, если вы используете Firefox.
Автор: J.W. Размещён: 12.06.2009 06:522 плюса
Помимо использования отладчика JavaScript в Visual Studio, я написал свою собственную простую панель, которую я включил в страницу. Это просто как Немедленное окно Visual Studio. Я могу изменить значения моих переменных, вызвать мои функции и посмотреть значения переменных. Он просто оценивает код, написанный в текстовом поле.
Автор: Canavar Размещён: 13.06.2009 08:082 плюса
Я использую Venkman , отладчик JavaScript для приложений XUL .
Автор: kuy Размещён: 13.06.2009 02:542 плюса
В дополнение к Firebug и расширениям для разработчиков на основе браузера JetBrains IDE поставляется со встроенной поддержкой удаленной отладки для Firefox и Chrome (требуется расширение).
Также поддерживает:
Варианты, чтобы проверить это бесплатно - 30 пробная версия или использование Ранней Версии Доступа .
Автор: mxfh Размещён: 12.02.2014 12:252 плюса
Если вы используете Visual Studio , просто поместите debugger;
над кодом, который вы хотите отладить. Во время выполнения управление приостановится в этом месте, и вы можете отлаживать шаг за шагом с этого момента.
1 плюс
Как и в большинстве ответов, это действительно зависит: чего вы пытаетесь достичь с помощью отладки? Основные разработки, устранение проблем с производительностью? Для базового развития все предыдущие ответы более чем адекватны.
Для тестирования производительности я рекомендую Firebug. Возможность определить, какие методы являются самыми дорогими с точки зрения времени, была неоценимой для ряда проектов, над которыми я работал. По мере того, как клиентские библиотеки становятся все более надежными, и на стороне клиента в целом ложится больше ответственности, этот тип отладки и профилирования станет только более полезным.
API консоли Firebug: http://getfirebug.com/console.html
Автор: Gavin Размещён: 12.06.2009 07:460 плюса
При нажатииF12 веб-разработчики могут быстро отлаживать код JavaScript, не выходя из браузера. Он встроен в каждую установку Windows.
В Internet Explorer 11 , F12 инструменты предоставляет средства отладки , такие как точки останова, часы и локальный просмотр переменного и консоль для сообщений и немедленного исполнения кода.
Автор: Reza Размещён: 02.06.2015 07:48Вопросы из категории :
- javascript Как определить, какой из указанных шрифтов был использован на веб-странице?
- javascript Валидация клиентской стороны ASP.Net
- javascript Длина объекта JavaScript
- javascript Получение текста из выпадающего списка
- javascript Скрипт входа со скрытыми кнопками
- javascript Как автоматически изменить размер текстовой области с помощью Prototype?
- javascript Удаление элементов с помощью Array.map в JavaScript
- javascript Прокрутка переполненных DIV с помощью JavaScript
- javascript API Карт Google - проблемы с классом GLatLngBounds
- javascript Проверка десятичных чисел в JavaScript - IsNumeric ()
- debugging Как вы отлаживаете PHP-скрипты?
- debugging Как запустить JavaScript-отладчик в Google Chrome?
- debugging Как добавить точки останова Debug в строки, отображаемые в окне «Найти результаты» в Visual Studio
- debugging Отладка LINQ to SQL SubmitChanges ()
- debugging Как остановить отладчик Visual Studio, запускающий мой процесс в объекте задания?
- debugging Есть ли способ отладки шаблонов Velocity в традиционном смысле отладки кода?
- debugging Простой способ отладки службы Windows
- debugging Какой твой любимый совет / трюк Windbg?
- debugging Отображение трассировки стека из запущенного приложения Python
- debugging How do you get assembler output from C/C++ source in gcc?