Javascript.RU

Как смотреть ошибки. Firebug.

Update: Более новый материал по этой теме находится по адресу https://learn.javascript.ru/devtools.

В начале работы с 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


Автор: alt5000, дата: 27 октября, 2008 - 14:43
#permalink

А где можно скачать этот дебугер?


Автор: Гость (не зарегистрирован), дата: 11 ноября, 2008 - 12:32
#permalink

Автор: Гость (не зарегистрирован), дата: 6 февраля, 2010 - 15:09
#permalink

firebug наверное рулит, но сохранил скрипт в отдельном файле, как было показано в прошлом уроке, сохранил с ошибкой как описано выше, firebug ничего не показал =((( попробовал в Google Chrome запустить, там есть подобный инструмент в "управлении текущей странице"->"Разработчикам"->"Консоль JavaScript", который с радостью показал на мою ошибку в отдельном файле. ИМХО удобней и не надо качать адон.


Автор: Гость (не зарегистрирован), дата: 24 июня, 2010 - 12:23
#permalink

Не перевариваю фф, юзаю оперу. там есть все такие же аналогичные встроенные инструменты + есть dragonFly (оч удобная штука) и никаких проблем вообще нету.


Автор: Slawaq, дата: 2 февраля, 2011 - 02:08
#permalink

dragonfly очень нестабилен, я поначалу тоже им пользовался, но очень медленный, плюс падает как и опера от всяких iframе'ов =))


Автор: Алекс (не зарегистрирован), дата: 3 ноября, 2008 - 04:49
#permalink

Спасибо за статью !


Автор: Гость (не зарегистрирован), дата: 20 ноября, 2008 - 10:29
#permalink

) спасибо за статью и за весь сайт) мне как начинающему очень помогает)


Автор: BlockOff (не зарегистрирован), дата: 16 января, 2009 - 14:30
#permalink

Я конечно извиняюсь, но у меня не сработал firebug(v. 1.3.0), причем даже после того, как я поставил точку с запятой в конец каждой строки скрипта. И только после того, как я прописал переменную divisor равной 2 скрипт чудесным образом правильно сработал. В чем может быть дело?


Автор: Олег - Гость (не зарегистрирован), дата: 24 января, 2009 - 13:27
#permalink

Спасибки за Firebug и разработчикам и этому сайту за ссылочки.
Я доволен


Автор: NBV (не зарегистрирован), дата: 30 января, 2009 - 14:39
#permalink

Да, вещь отличная, давненько такое искал, а вот вопрос: где можно достать русификатор для него, а то вместо русского текста в скрипте отображаются "козяблики"?


Автор: Leax, дата: 12 января, 2010 - 12:40
#permalink

Такая же беда - в FireBug русские текстовые сообщения в теле скрипта превращаются в непонятно что ((


Автор: Гость (не зарегистрирован), дата: 25 января, 2010 - 19:54
#permalink

сохрани документ в формате UTF-8, а не Default...
все будет ок


Автор: Eri (не зарегистрирован), дата: 5 февраля, 2009 - 14:47
#permalink

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


Автор: pifagor_mc, дата: 29 июня, 2009 - 17:47
#permalink

во вкладке "Console" по умолчанию три чекбокса, выбирай их, чтобы включить, или в контекстном меню(справа от console стрелочка вниз) выбирай Enabled


Автор: Benjamin, дата: 16 февраля, 2009 - 19:39
#permalink

А включать его не пробывал?


Автор: Opera (не зарегистрирован), дата: 15 марта, 2009 - 19:14
#permalink

А у меня тоже есть Инструменты>>Дополнительно>>Консоль ошибок
или можно чтоб вылазило при возникновении ошибки


Автор: hash8D (не зарегистрирован), дата: 16 марта, 2009 - 19:27
#permalink

Да можно по умолчанию вырублена консолька т.к. тама написано почему)) Над ток врубить и справа в углу есть опции какие показывать ошибки, а какие нет. Тада как ошибка в углу вместо жука скок ошибок вылазит)
Тож поначалу непонял чего их нет)


Автор: hash8D (не зарегистрирован), дата: 16 марта, 2009 - 19:36
#permalink

немного запутанно кажется написал но думаю будет понятно))


Автор: IzumeRoot, дата: 15 апреля, 2009 - 18:57
#permalink

Более полно тема отладки JavaScript причем в разных браузерах раскрыта в статье Отладка JavaScript в Opera, FireFox, IE и Safari


Автор: Илья Кантор, дата: 16 апреля, 2009 - 18:08
#permalink

Отладке и разработке посвящен целый раздел: Редактирование и отладка скриптов.


Автор: Гость (не зарегистрирован), дата: 5 августа, 2009 - 16:14
#permalink

Хочу добавить, что бы вставить breakpoint прямо в исходный код, нужно написать debugger, и когда выполнение дойдет до этой строки firebug остановится.


Автор: Гость (не зарегистрирован), дата: 9 сентября, 2009 - 12:47
#permalink

У меня Firebug 1.4.2, там внизу изображение жука. С ним вести себя надо точно так же - кликнуть правой и поставить галочку "включить на всех страницах". Появится открывшееся окошко Firebugа. Чтобы он работал, а окошко не мешало, можно его свернуть (если нажать кнопочку "оff" окошко естетсвенно тоже пропадет, но фаербаг при этом выключится).


Автор: Satisfaction (не зарегистрирован), дата: 27 сентября, 2009 - 01:51
#permalink

Firebug сразу можно найти не скачивая в Интсрументы>Дополнения>Поиск дополнений (первая иконка) ввести Firebug и установить. Это чтобы не искать его где-то - здесь сразу последняя версия


Автор: Гость (не зарегистрирован), дата: 13 ноября, 2009 - 05:46
#permalink
<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 в отдельную функцию так, что бы она потом была определена и для другой функции.. я так понимаю ее надо сделать глобальной? (знание програминга на уровне написания калькулятора на делфи извините)


Автор: AME (не зарегистрирован), дата: 30 ноября, 2009 - 01:15
#permalink

Вы так хотели ?

var i = prompt("что делить ?")
function divide(number) {
var divisor = prompt("На что делить "+i+"?")
var result = number / divisor
alert(i+"/"+divisor+" = "+result)
}

Кнопка запуска


Автор: Гость (не зарегистрирован), дата: 25 января, 2010 - 19:55
#permalink

объяви вне кода.... и как static


Автор: Гость (не зарегистрирован), дата: 16 января, 2010 - 14:34
#permalink

В IE выдается сообщение "Ошибка на странице"


Автор: Гость (не зарегистрирован), дата: 22 июля, 2010 - 17:52
#permalink

у меня firefox 3.6.7 и firebug 1.5.4 сделала все как было сказано выше жучок горит в консоле нужные галочки отмечены.. а ошибку все равно видеть не хочет... Хотя при переходе на различные сайты он периодически выдает какое нибудь предупреждение


Автор: Mark, the spirit of Chrome (не зарегистрирован), дата: 21 апреля, 2011 - 18:58
#permalink

Для Хрома появилась версия. Без дебуггера.


Автор: Гость (не зарегистрирован), дата: 17 июня, 2011 - 13:04
#permalink

Нафига? В хроме и без того есть чудесные средства разработки, которые намного лучше, чем огнежук.


Автор: apple-way (не зарегистрирован), дата: 20 июня, 2011 - 19:30
#permalink

Кстати, наверное имеет смысл упомянуть инструменты для отладки JavaScript которые теперь есть далеко не только в Firefox. Ведь chrome, opera, internet explorer 8 и 9 уже имеют свои отладчики.


Автор: Гость (не зарегистрирован), дата: 8 июля, 2011 - 23:50
#permalink

Здравствуйте!
Подскажите пожалуйста, почему когда я скачала версию Firebug 1.7.3при написании тэгов, они(тэги) не выделяются ни красным, ни синим..Может нужно другую версию скачать? Заранее Спасибо!


Автор: Гость (не зарегистрирован), дата: 31 августа, 2011 - 17:47
#permalink

Должен заметить, что пошаговое выполнение в IE реализовано лучшим образом из всех отладчиков, которые мне доводилось видеть (сказывается "привычка" мелкомягких разрабатывать IDE).
Если бы не "специфика" браузера, он был бы лучшим средством тестирования.
Но увы. Поэтому я пользуюсь всеми четырьмя.
Преимущественно - FireBug, но когда он не даёт адекватной картины, перехожу на IE.
Отладчики Opera и Chrome имеют чертовски неудобный интерфейс, поэтому я использую их только для отлова специфических глюков этих браузеров.


Автор: Questioner, дата: 3 ноября, 2011 - 13:51
#permalink

Ещё: в FF7 нет нижней панели, поэтому огнежук отображается сверху справа, и там же ошибки.


Автор: Гость (не зарегистрирован), дата: 14 ноября, 2011 - 15:32
#permalink

Такая же проблема с отображением русских букв. Кодировку менял не помогает. Может есть какой другой способ?


Автор: Гость (не зарегистрирован), дата: 14 ноября, 2011 - 15:32
#permalink

Такая же проблема с отображением русских букв. Кодировку менял не помогает. Может есть какой другой способ?


Автор: Гость (не зарегистрирован), дата: 18 ноября, 2011 - 00:07
#permalink

Есть. Почитать учебник по html. Разобраться с тегом meta. И добавить его в исходник страницы.


Автор: kvmutl, дата: 6 июня, 2012 - 04:56
#permalink

спасибо, помогло


Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
4 + 8 =
Введите результат. Например, для 1+3, введите 4.
 
Текущий раздел
Поиск по сайту
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Последние комментарии
Последние темы на форуме
Forum