21 декабря, 2007

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

Дело было так. Добавляю я эффекты из Scriptaculous, и, естественно, настраиваю их параметры. Все идет отлично. Эффекты работают как надо, работа кипит.

Тестирую, как обычно, в FireFox. Все прекрасно работает. Начинаю проверять в IE и Opera.

И тут возникает проблема. Один эффект не работает. Ни в какую. Причем я точно знаю, что сам эффект должен работать (использовал его раньше). Складывается впечатление, что не вызывается сама JavaScript функция.

Код был такой.

new Effect.Highlight('textBlock', {
startcolor:"#DFDC00",
endcolor:"#FFFFFF", duration: 2,
queue: {position: 'end', scope: 'myqueue'},
});

Короче, провозился я полчаса. В конце концов, до меня дошло, что лишняя запятая в конце массива с параметрами вызывает ошибку. (Эта запятая осталось случайно после экспериментов с параметрами).

Вроде бы ничего сложного. Но получается, что FireFox (с установленным плагином Firebug) исправил ошибку автоматически и даже предупреждения не вывел.
А я, естественно, начал думать, что это глюки браузеров.

Ошибка, конечно, пустяковая, но полчаса времени на ее исправление, плюс не самые приятные ощущения – это далеко не пустяк.

Может кто-то знает надежный способ отладки JavaScript кода (а заодно и CSS)?

Постовой

Хотите создать свой собственный сайт? В этом вам поможет бесплатная cms.

Понравилась статья? Подписывайтесь на продолжение !

Или на мой твиттер

Добавьте эту страницу в

Опубликовано в JavaScript, Разное View Comments

Владимир

Отладкой приходится заниматься во всех браузерах :-) . А проигнорировать IE, к сожалению, можно будет очень не скоро. (Когда я последний раз смотрел статистику этого блога, его использовало примерно 60% посетителей).
Scratch

Увы, для отладки кода в IE ничего лучше Script Debugger не придумали.
А отлаживать код в IE нужно (не писать на сайте -- "не работает в IE", в самом деле).
И бывают случаи, в основном -- связанные с различием DOM моделей и событий -- которые простой проверкой синтаксиса не обойдешь...

Как пример -- есть такая штука, ExtJS. В ней есть элемень -- grid. Удобная штука, все хорошо, но -- если элемент grid перезагрузить после того, как "несущий" элемент удален из dom дерева, то IE выдает ошибку, а FireFox и Opera вполне нормально это переносят.

Откуда вывод -- отлаживать нужно именно в IE, и эту ошибку как-то поймать.
Вот тут Script Debugger очень полезен.
Владимир

Script Debugger, нужно будет попробовать.
Хотя мне не нравится IE.
К тому же Firebug (для FF) очень не плохо работает.
Scratch

А, да, они такое не умеют.
Ну, тогда -- ставить Script Debugger от майкрософта (под тот же IE). Обычно, когда он открывает ошибочную строчку, сразу понятно что не так. :)
(сам уже месяц ем и нахваливаю, с нашей-то js-разработкой)
Владимир

Вообще-то, я просто пошутил :-)

Насчет Аптаны согласен, просто иногда удобно пользоваться чем-нибудь по-проще (Notepad++ или PsPad)
Scratch

Если вы о моем примере -- то это несколько не тот случай.
Не нужно путать запятую, которая разделяет элементы объекта, и запятую в списке параметров :))

Ну, и вообще, лучший способ -- это, конечно, использовать нормальный редактор (типа Аптаны), для подсветки таких вот проблем. :)
Владимир

Не плохо. Только, вы сами написали ‘textBlock’, {
:-)

В общем я согласен, нужно сразу нормально форматировать код. Ошибка ведь возникла не из-за того, что я написал лишнюю запятую, а потому что я скопировал и вставил параметр из другого эффекта вместе с запятой. Если бы я его сразу отформатировал, то проблем бы не было.
Scratch

А есть еще такой способ:

new Effect.Highlight(‘textBlock’, {
startcolor: "#DFDC00"
,endcolor: "#FFFFFF"
,duration: 2
,queue:{ position: ‘end’, scope: ‘myqueue’ }
})

То есть -- запятая ставится _перед_ строчкой. В этом случае поставить лишнюю запятую сложно, а на отсутствие запятой любой браузер начнет ругаться.
tenshi

мдес, отступы не сохранились...
tenshi

вывод - не надо экономить строчки

new Effect.Highlight(‘textBlock’, { startcolor: "#DFDC00" , endcolor: "#FFFFFF" , duration: 2 , queue:{ position: ‘end’, scope: ‘myqueue’ } })
Владимир

Спасибо!
У меня действительно оказалась довольно старая версия.
Scratch

К слову, последняя версия FireBug, если включен режим "предупреждения JavaScript", уведомляет о том, что запятая после списка элементов объекта не соответствует стандарту ECMA.
Что позволяет исправить множество таких ошибок.
Владимир

firebug я вспомнил только потому, что он предназначен для отладки кода, а даже предупреждения не вывел.

Что касается запятой. Мне кажется, у языка должен быть четкий синтаксис. А в данном случае, если запятая стоит перед закрывающей скобкой, это можно трактовать как отсутствие параметра, как пустой параметр или как ошибку.

В общем, главная проблема в том, что браузеры обрабатывают код по-разному.
vasa_c

Firefox и без firebug нормально работает. И не сказать, что это именно ошибка. В PHP, например, так же определения могут завершаться запятой — полезная фишка.
IE же достаточно четко говорит об ошибке (что с ним бывает не часто) — "требуется идентификатор, строка или число" с указанием строки с ошибкой.