Отладка Javascript на мобильных устройствах

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

    Одним из важных моментов на сайте является динамика, за которую отвечает яваскрипт. К сожалению, полноценной поддержки от мобильных браузеров ждать не приходиться (например, jQuery, Prototype, Ext JS и т.д. не предназначены для браузеров данной категории, хотя надо заметить, что есть версии фреймворков, которые адаптированы под мобильные браузеры на основе WebKit). Но без поддержки популярных библиотек обойтись можно легко, основной недостаток в мобильных браузерах — отсутствие наличия средств отладки яваскрипта (возможно, что на Android, iPhone и др. продвинутых девайсах подобные инструменты есть, но я ориентируюсь на Opera Mini и, к сожалению, IE Mobile).
    Интерпретатор Javascript в IE Mobile достаточно капризный, каждый раз вставлять в места возможных ошибок алерты очень неудобно. Коллега по работе подсказал использовать событие onerror:
    window.onerror = function () {
     alert('An error has occurred!');
     return true;
    };


    Затем мы пробовали добавлять аргументы, которые описывают ошибку: номер строки, адрес страницы… Однако, IE Mobile на ошибки все равно не реагировал. Поиск в интернете показал о существовании способа включения режима отладки для IE Mobile путем добавления параметра в реестр Windows Mobile:
    Change the Registry setting “HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main” and Create a new DWORD key under Main with the name “ShowScriptErrors“. Set dword value of 1

    К сожалению и данный способ также не дал никаких результатов.
    В пятницу, когда мне пришлось довольно долго разбираться, где IE спотыкается, я решил обратиться к замечательной книге Д. Флэнагана «JavaScript. Подробное руководство» (вспомнил, что там была глава про отладку JavaScript. Предлагаемый способ совпадал с тем, что предлагали мне на работе, но я решил попробовать еще раз:
    window.onerror = function (msg, url, line) {
     alert(msg + "\n" + url + "\n" + "\n" + line);
     return true;
    };


    И вот, данный вариант сработал! Ошибка была благополучно найдена и исправлена. Непонятно только, почему не помогло в первый раз, возможно, дело было в том, что данная функция сначала была расположена во внешнем js файле, второй раз я разместил ее непосредственно на странице — может быть именно это помогло IE ее использовать.
    Надеюсь, что данный опыт кому-то пригодиться :-)
    Поделиться публикацией
    Похожие публикации
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 22
    • +2
      Под Mac OS связка Dashcode + iPhone/iPad Simulator позволяет отлаживать Javascript. При этом отладка идёт в окне десктопа, а не на экране мобильного устройства (http://habrastorage.org/storage/6e6d49a2/19e4e328/5364bcf8/c7868bb2.png), что сильно удобнее.
      • –2
        А зачем вообще Javascript отладка на мобильных устройствах? Неужели не удобней делать отладку в FF с Firebug или в Chrome?
        Правда, должен заметить, что в основном работаю с мобильными телефонами и в моём регионе смартфоны Windows Mobile крайне редки. Но, собственно, то что работает на мобильнике — работает и в обычном браузере. Самое важное — найти общий минимум — те функции в JS, которые будут поддерживать все устройства целевого сегмента.

        Советы: не забывать, что у мобильного устройства мощности гораздо меньше и это резко выделяется в анимации и в вычислениях;
        как и проблемах с CSS — не всегда правильно обрабатывается HEAD, то есть отображение и обработка страницы начинается до того так загрузиться весь заголовок (особенно этим грешат Samsung).
        • +2
          конечно же удобнее.
          но проблема в том, что скрипт корректно работающий в desktop-браузерах может запросто не работать в мобильных версиях (чаще всего это и происходит с IE Mobile).
          то, что я описал в топике поможет выловить ошибку. но писать основную часть конечно же удобнее пользуясь firebug-ом и подобными инструментами
          • 0
            Как я и сказал с самого начала — опыта именно с Windows Mobile у меня мало. Я не спорю с вами, а спрашиваю. Без иронии. Мне интересно в чём особенность IEM. Кстати, у меня у самого телефон на WM, но IE там ни разу не открывал.

            А вообще, я и не писал, что скрипт корректно работающий в desktop-браузерах может запросто не работать в мобильных версиях. Я написал с точностью наоборот. Скрипт работающий в мобильном браузере будет работать и на обычном. Есть кое какие особенности, поэтому необходимо найти общий минимум функций. Используя эти функции вы будете уверенны, что они отработаются на мобильном и отладку можно проводить в удобных условиях десктопа.

            • 0
              я не призываю отлаживать на мобильных устройствах. я про то, что в любом случае могут быть какие-то ошибки, которые необходимо как-то выловить

              ну а вообще, пересечение функций работающих в IE Mobile и в десктоп-браузерах будет достаточно велико. поэтому я сначала пишу и отлаживаю код на десктопе, а потом уже запускаю и оттачиваю его на IE Mobile. и нет такого, что необходимо переписывать 90% кода, вовсе нет. чаще всего это что-то незначительно (например, тривиальное childElementCount, которое IE не поддерживает совсем и в десктоп-версиях, или моя невнимательность в разметке, которую десктоп-браузеры «кушают»)
              • 0
                Кстати, да — мобильные браузеры очень жёсткие в плане валидации. Зато опыт хороший.
          • 0
            На работе имел длинный разговор с тестировщиком, который тестировал приложение написанное исключительно под айфон на ФФ, при этом он говорил, что кнопки как-то неверно отрисованы. Тестировать нужно либо на эмуляторах, либо на самих устройствах. Потому что браузеры мобильных устройств имеют ну просто кучу своих особенностей, например браузер айПода последней версии почему-то вел себя не так как браузер айфона.
            • 0
              Давайте не путать тёплое с мягким. ФФ для айфона не подходит — нужен сафари или хром. Для вас это сюрприз? На developer.apple.com можно найти указания на отличия и что/где поддерживается и в какой версии.

              Насчёт кучи особенностей мобильных устройств — с удовольствием послушал бы о них. Мне лично знакомы особенности отсутствия манипуляторов (клавы и мыши) и фишки touch устройств, но это не только мобильники (допустим те же терминалы платежей и интерактивные панели, популярные в ресторанах).
              • 0
                Читайте, пожалуйста, внимательнее, я написал, что тестировщик тестировал не так как нужно, о чем я ему и высказал. На чем писать и как тестить для айфона я знаю прекрасно.
                • 0
                  Тогда, простите, вы ветку не ошиблись? В ответ на мой вопрос (кстати он был задан не вам): «почему надо дебажить JS для IEM именно на устройстве и нельзя просто в браузере?», вы пишите какую то басню о тестеровщике, лисе и айфоне. Ещё раз прошу прощения, а вы вообще в теме WM/IE?
                  • 0
                    Это был пример из жизни на вашу фразу:
                    Неужели не удобней делать отладку в FF с Firebug или в Chrome?
                    Правда, должен заметить, что в основном работаю с мобильными телефонами и в моём регионе смартфоны Windows Mobile крайне редки.

                    Кроме того, я в теме WM/IE, так как писал под него мобильные клиенты. Тестировал и на реальных мобильных устройствах и на эмуляторах. Для отлова ошибок и прочего писал свой специальный скрипт.
                    • 0
                      Вы опять что то путаете. Не думаю, что ваш пример с «тестировщиком» и «кнопки как-то неверно отрисованы» имеет отношение к отладке скрипта. Во всяком случае отображение уж точно необходимо проверять на устройстве — ни один эмулятор не даёт достоверной картины. Тест, как бы, отличается от разработки — речь именно о разработке.

                      Как сказал автор 90% работы всё же в обычном браузере, то есть как и вне IE. В данный момент я переписываю аппликацию с flash lite на html5 для iPhone. И работаю в Chrome. Потом на устройстве буду подгонять, но это уже не отладка — а проверка и подгонка. Скрипты работать будут — собак кушал, а вот изображение иногда подёргивает и тормоза бывают. Кстати, к слову о проверке, я вспомнил одну особенность Javascript для мобильников — ориентация экрана. При разработке использую переменные, но проверить необходимо именно на устройстве, так как там свои тул бары и обычно кривая поддержка языков (rtl/ltr).

                      А что такое мобильные клиенты под IE? Java Applet? JVM WM, кстати очень даже неплох, а вот Оpera вроде падает.
                      • 0
                        Ок, закончим диспут, а то оба уже ИМХО запутались.

                        А что такое мобильные клиенты под IE? Java Applet? JVM WM, кстати очень даже неплох, а вот Оpera вроде падает.

                        Для основного приложения писал мобильный веб клиент под iPhone/Android на jQTouch, нативный интерфейс и все дела, да и отладка по большому счету в хроме. А потом менеджер подумал глубоко и сказал, а хочу вот так же под IE, из-за чего мне стало не очень хорошо, но пришлось переписывать все практически с 0, начиная от css и заканчивая js по работе с XML.
          • 0
            а opera mini (mobile) + remote dragonfly?
            • +2
              не приходилось пользоваться по той причине, что в опере пока что все скрипты обрабатывались корректно :-)
              • –3
                отсутствие наличия средств отладки яваскрипта (возможно, что на Android, iPhone и др. продвинутых девайсах подобные инструменты есть, но я ориентируюсь на Opera Mini и, к сожалению, IE Mobile).

                Изначальный смысл dragonfly именно в удалённой отладке, его для этого написали. Что вы пишете ерунду? Opera Mini в этом отношении самый прогрессивный браузер.
                • +1
                  ерунду пишете вы:
                  Как отлаживать Opera Mini?
                  Хотя последние версии Opera Mini и используют то же самое ядро Opera, серверы Opera Mini сжимают данные перед отправкой на телефон. По этой причине Opera Mini не поддерживает Opera Dragonfly.

                  www.opera.com/dragonfly/documentation/
                  удаленно отлаживать можно opera mobile. но не opera mini
              • +1
                Отловить баги в IE Mobile поможет связка Opera + dragonfly?!
                Ну да, ну да.
                Проблема в том, что IE Mobile работает немного иначе, чем даже тот же IE6 на десктопе (хоть IE Mobile и сделан на той же базе, что и IE6) — что уж говорить про Opera любой версии. Если и отлаживать код под IE Mobile на десктопе, то в первую очередь это нужно делать под IE6. Хотя это тоже не поможет отладить всего — у IE Mobile все равно есть свою нюансы и их немало.
              • –5
                Adblock Plus для Fennec (Firefox mobile)? Сам не пробовал, но пишут ( adblockplus.org/development-builds/fennec-support-and-signed-builds ), что такое уже имеется.
                • 0
                  Причём здесь ADP?
                  В Firefox Mobile по идеи отлаживать JS можно через Firebug Lite :)
                  • –1
                    Я плясал от заголовка статьи, а не от «Opera Mini» и «IE Mobile» где-то ближе к середине самой статьи. Если заголовок звучит как: «Отладка Javascript на мобильных устройствах», то и описывать нужно что-то более интересное и развернутое, нежели банальный «alert('Hello world!');». А вот про «Firebug Lite» я без понятия. Не факт, что размер экрана мобильного устройства (если не на десткопе тестировать) даст возможность пользоваться сим инструментом (возможностей js в мобильной лисе уж должно хватить).
                  • 0
                    вы наверное топиком ошиблись :)

                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.