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

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


Автор: Hank (не зарегистрирован), дата: 16 июня, 2020 - 21:30
#permalink

I agree thanks! fence company near me


Автор: Гость (не зарегистрирован), дата: 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

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


Автор: Разработчик (не зарегистрирован), дата: 12 июня, 2018 - 21:07
#permalink

То, что нужно. быстрая разработка


Автор: sexkontakt uster (не зарегистрирован), дата: 12 февраля, 2021 - 17:48
#permalink

Visit sexkontakt uster and enjoy free caht with hot local ladies today


Автор: dominatrix perth (не зарегистрирован), дата: 19 февраля, 2021 - 17:00
#permalink

dominatrix perth is the great web platform for finding sex contact


Автор: hosupi (не зарегистрирован), дата: 20 февраля, 2021 - 07:23
#permalink

It’s hard to come by experienced people in this particular topic,but you sound like you know what you’re talking about! Thanks basketball legends


Автор: mary mikosaf (не зарегистрирован), дата: 12 апреля, 2021 - 09:39
#permalink

Blog with lots of information. Visiting your blog helped me get what I was looking for. If you have more time, please visit:
directions maps


Автор: Гость (не зарегистрирован), дата: 12 февраля, 2022 - 18:55
#permalink

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

Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 03:10
#permalink

Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 11:58
#permalink

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

Автор: Quinsay (не зарегистрирован), дата: 20 июля, 2022 - 11:03
#permalink

you will be surprised with this series of classic games, rolling ball 3d sums up all the players playing here, as opposed to the ball on the pitch, what will you do to send the ball in 3D away?


Автор: danysparker (не зарегистрирован), дата: 20 июля, 2022 - 19:13
#permalink

Thank you, sir, for your hard work and dedication. I'd want to express my heartfelt appreciation to you on behalf of both myself and your website visitors. I'm certain that I can get through to you. among us


Автор: run 3 (не зарегистрирован), дата: 30 июля, 2022 - 11:46
#permalink

Thank you for taking the time to talk about it; I have strong feelings about it and want to learn more about it. Would you mind adding information to your blog post? It will really benefit all of us. run 3


Автор: antiguans2000, дата: 2 августа, 2022 - 16:33
#permalink

This is really informative! I really appreciate your effort here.

car detail Leander


Автор: chiuchi (не зарегистрирован), дата: 11 ноября, 2022 - 11:55
#permalink

Thank you for providing such useful information. I've been having trouble coming up with many questions about this topic. I'll stick with you! moto x3m bike race game


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

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
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
Антиспам
1 + 0 =
Введите результат. Например, для 1+3, введите 4.
 
Текущий раздел
Поиск по сайту
Содержание

Учебник javascript

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

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

Интерфейсы

Все об AJAX

Оптимизация

Разное

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

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