Как смотреть ошибки. 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

версия для печати

« Подбираем инструментарий Уровень выше Структура javascript »

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

Форум

Справочник

Discord чат

Курсы javascript