Ошибки в JavaScript. Лишняя запятая и браузеры.

Владимир | | JavaScript, Разное.

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

Дело было так. Добавляю я эффекты из 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.

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

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

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

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

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

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

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

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

  • Scratch

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

  • Scratch

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

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

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

  • tenshi

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

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

  • tenshi

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

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

  • tenshi

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

  • tenshi

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

  • Scratch

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

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

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

  • Scratch

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

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

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

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

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

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

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

  • Scratch

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

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

  • Scratch

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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