Как смотреть ошибки. Firebug.
В начале работы с javascript у Вас будет возникать масса ошибок.
Firebug поможет с их отловом, покажет где и почему они произошли.
К сожалению, он работает только в Firefox (и других браузерах на движке Mozilla), но более удобного инструмента на текущий день нет.
При установленном плагине Firebug наличие ошибок видно в правом нижнем углу браузера, в конце статусной строки.
Firebug-значок может иметь один из трех видов:
- Галочка в зеленом кружке
- Все в порядке. Firebug работает, ошибок не замечено.
- Буква f в сером кружке
- Firebug отключен. Кликните по кружку правой кнопкой мыши и снимите галочку с Disable Firebug.
- Крестик в красном кружке
- Произошла ошибка javascript. Клик на кружке откроет консоль Firebug. Клик на ошибке в консоли переведет Вас на строку скрипта, где произошла ошибка.
Для эксперимента создадим функцию divide, которая делит свой аргумент на некое число, и назначим ее запуск по клику на кнопку:
<html>
<head>
<script>
function divide(number) {
var result = number / divisor
alert(number+"/"+divisor+" = "+result)
}
</script>
</head>
<body>
<h1>Кнопка запуска</h1>
<!-- по клику будет происходить вызов divide(6) -->
<input type="button" value="Запустить" onclick="divide(6)"/>
</body>
</html>
Запишите этот код в файл divide.html и запустите. Нажатие на кнопку покажет ошибку при включенном Firebug:
Кликнув на красный текст, мы откроем консоль Firebug, где содержится более подробная информация, включающая текст ошибки и строку, на которой она произошла:
У строчки с ошибкой "divisor not defined" Вы видите плюсик. Он раскрывает последовательность вложенных вызовов, которые привели к печальному результату.
Клик на строке с ошибкой переводит во вкладку Script, где можно увидеть сам скрипт:
Теперь понятно, что ошибка возникла потому, что переменная divisor не определена. Поправим функцию divide так, чтобы она спрашивала ее у посетителя:
function divide(number) {
var divisor = prompt("На что делить "+number+"?")
var result = number / divisor
alert(number+"/"+divisor+" = "+result)
}
Поправив код, обновите страничку. Сообщение об ошибке должно исчезнуть.
Теперь, нажимая кнопку "запустить", попробуйте вводить разные числа и сгенерировать таким образом еще одну ошибку  .
Вам откроется одна из особенностей языка javascript. Арифметические операции никогда не приводят к ошибкам. Можно делить на ноль, текстовую строку - на что угодно.
Подробнее об особенностях типов данных в javascript написано в статье Базовые типы javascript
В Firebug также есть многие другие возможности, например логирование в консоль командой console.log, встроенный отладчик скриптов и т.п.
Документация по этим возможностям присутствует на сайте http://firebug.ru.
Качать здесь: https://addons.mozilla.org/ru/firefox/addon/1843
|
А где можно скачать этот дебугер?
firebug наверное рулит, но сохранил скрипт в отдельном файле, как было показано в прошлом уроке, сохранил с ошибкой как описано выше, firebug ничего не показал =((( попробовал в Google Chrome запустить, там есть подобный инструмент в "управлении текущей странице"->"Разработчикам"->"Консоль JavaScript", который с радостью показал на мою ошибку в отдельном файле. ИМХО удобней и не надо качать адон.
Не перевариваю фф, юзаю оперу. там есть все такие же аналогичные встроенные инструменты + есть dragonFly (оч удобная штука) и никаких проблем вообще нету.
dragonfly очень нестабилен, я поначалу тоже им пользовался, но очень медленный, плюс падает как и опера от всяких iframе'ов =))
Спасибо за статью !
) спасибо за статью и за весь сайт) мне как начинающему очень помогает)
Я конечно извиняюсь, но у меня не сработал firebug(v. 1.3.0), причем даже после того, как я поставил точку с запятой в конец каждой строки скрипта. И только после того, как я прописал переменную divisor равной 2 скрипт чудесным образом правильно сработал. В чем может быть дело?
Спасибки за Firebug и разработчикам и этому сайту за ссылочки.
Я доволен
Да, вещь отличная, давненько такое искал, а вот вопрос: где можно достать русификатор для него, а то вместо русского текста в скрипте отображаются "козяблики"?
Такая же беда - в FireBug русские текстовые сообщения в теле скрипта превращаются в непонятно что ((
сохрани документ в формате UTF-8, а не Default...
все будет ок
У меня Firebug вообще не показывает ошибки, какой бы код я не запускал. Вместо описанных значков на панели есть только изображение жука. установлены последние версии браузера и приложения. в чем может быть проблема?
во вкладке "Console" по умолчанию три чекбокса, выбирай их, чтобы включить, или в контекстном меню(справа от console стрелочка вниз) выбирай Enabled
А включать его не пробывал?
А у меня тоже есть
Инструменты>>Дополнительно>>Консоль ошибок
или можно чтоб вылазило при возникновении ошибки
Да можно по умолчанию вырублена консолька т.к. тама написано почему)) Над ток врубить и справа в углу есть опции какие показывать ошибки, а какие нет. Тада как ошибка в углу вместо жука скок ошибок вылазит)
Тож поначалу непонял чего их нет)
немного запутанно кажется написал но думаю будет понятно))
Более полно тема отладки JavaScript причем в разных браузерах раскрыта в статье Отладка JavaScript в Opera, FireFox, IE и Safari
Отладке и разработке посвящен целый раздел: Редактирование и отладка скриптов.
Хочу добавить, что бы вставить breakpoint прямо в исходный код, нужно написать debugger, и когда выполнение дойдет до этой строки firebug остановится.
У меня Firebug 1.4.2, там внизу изображение жука. С ним вести себя надо точно так же - кликнуть правой и поставить галочку "включить на всех страницах". Появится открывшееся окошко Firebugа. Чтобы он работал, а окошко не мешало, можно его свернуть (если нажать кнопочку "оff" окошко естетсвенно тоже пропадет, но фаербаг при этом выключится).
Firebug сразу можно найти не скачивая в Интсрументы>Дополнения>Поиск дополнений (первая иконка) ввести Firebug и установить.
Это чтобы не искать его где-то - здесь сразу последняя версия
<html> <head> <script> var i = prompt("что делить ?") </script> <script> function divide(number) { var divisor = prompt("На что делить "+i+"?") var result = number / divisor alert(i+"/"+divisor+" = "+result) } </script> </head> <body> <h1>Кнопка запуска</h1> <!-- по клику будет происходить вызов divide(i) --> <input type="button" value="Запустить" onclick="num()"/> <input type="button" value="Запустить" onclick="divide(i)"/> </body> </html>вопрос как сделать что бы переменная внести ввод переменной i в отдельную функцию так, что бы она потом была определена и для другой функции.. я так понимаю ее надо сделать глобальной? (знание програминга на уровне написания калькулятора на делфи извините)
Вы так хотели ?
var i = prompt("что делить ?")
function divide(number) {
var divisor = prompt("На что делить "+i+"?")
var result = number / divisor
alert(i+"/"+divisor+" = "+result)
}
Кнопка запуска
объяви вне кода.... и как static
В IE выдается сообщение "Ошибка на странице"
у меня firefox 3.6.7 и firebug 1.5.4 сделала все как было сказано выше жучок горит в консоле нужные галочки отмечены.. а ошибку все равно видеть не хочет... Хотя при переходе на различные сайты он периодически выдает какое нибудь предупреждение
Для Хрома появилась версия. Без дебуггера.
Нафига? В хроме и без того есть чудесные средства разработки, которые намного лучше, чем огнежук.
Кстати, наверное имеет смысл упомянуть инструменты для отладки JavaScript которые теперь есть далеко не только в Firefox. Ведь chrome, opera, internet explorer 8 и 9 уже имеют свои отладчики.
Здравствуйте!
Подскажите пожалуйста, почему когда я скачала версию Firebug 1.7.3при написании тэгов, они(тэги) не выделяются ни красным, ни синим..Может нужно другую версию скачать? Заранее Спасибо!
Должен заметить, что пошаговое выполнение в IE реализовано лучшим образом из всех отладчиков, которые мне доводилось видеть (сказывается "привычка" мелкомягких разрабатывать IDE).
Если бы не "специфика" браузера, он был бы лучшим средством тестирования.
Но увы. Поэтому я пользуюсь всеми четырьмя.
Преимущественно - FireBug, но когда он не даёт адекватной картины, перехожу на IE.
Отладчики Opera и Chrome имеют чертовски неудобный интерфейс, поэтому я использую их только для отлова специфических глюков этих браузеров.
Ещё: в FF7 нет нижней панели, поэтому огнежук отображается сверху справа, и там же ошибки.
Такая же проблема с отображением русских букв. Кодировку менял не помогает. Может есть какой другой способ?
Такая же проблема с отображением русских букв. Кодировку менял не помогает. Может есть какой другой способ?
Есть. Почитать учебник по html. Разобраться с тегом meta. И добавить его в исходник страницы.
спасибо, помогло