Pull to refresh

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

Reading time 3 min
Views 19K
Недавно возникла у меня необходимость создать небольшое html5 приложение для смартфонов.
Почему html5? Все предельно просто: при наличии мобильной версии, сайт можно за пару дней допилить до необходимого состояния или же написать с нуля (что не так важно) и в дальнейшем заниматься поддержкой только одной версии кода, не распыляясь на различные платформы.

Для сборки приложения я использовал Phonegap (не буду вдаваться в описания тулзы, так как статей на хабре хватает). HTML, javascript вроде был отлажен на десктопе, успешно собран и залит на тестовые смартфоны, однако не все так гладко. В процессе тестирования мне пришлось столкнуться с несколькими глюками свойственными, только конкретным платформам и браузерам ( Скажем в android 2.1-2.2 если вставить input с обработчиком какого-либо события в определенное место DOM, баузер будет просто падать и главное тут ничего не поделать, это чисто баг андройда и его браузера, эта проблема «попортила мне не мало крови», так как в начале я не понимал что вообще происходит и грешил на кривой phonegap, пока не подключился дебагером и не посмотрел что там происходит).

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

Для отладки html приложения под андройд неплохо подойдет Eclipse (скорей всего вы используете именно его для сборки приложения). Если у вас установлен android sdk и плагин для eclipse ( если нет, пройдя по ссылочке это можно исправить ), то во вьюшках можно найти logCat, который при подключении к устройству будет выводить все полученную информацию, в том числе и сообщения console.log() выводимые javascript'ом + выводятся все действия производимые с телефоном, это помогает отлаживать если есть какие-то проблемы с обработкой событий.
LogCat можно кстати использовать и без эклипса, это инструмент android sdk, но по мне такой вариант не совсем удобен.

Для iphone есть неплохая утилитка weinre, кстати её рекомендуют ребятки из phonegap. Более конктено с ней можно ознакомиться по сылке, но суть такая: вы скачиваете программку, запускаете и она начинает слушать порт компьютера. В код вашего приложения добавляете js, который подгружается запущенного вами сервера, конектится к нему и начинает общаться с приложением. Далее вся отладка происходит по стандартному сценарию в отладчике хрома. который запускает программка, имхо это самый удобный вариант. Краткое пособие по запуску:
  1. скачиваем и распаковываем архив
  2. устанавливаем
  3. идем в папочку ~/.weinre/ (если её нет создаем) там создаем файл server.properties с таким текстом
    boundHost:    -all-
    httpPort:     8081
    reuseAddr:    true
    readTimeout:  1
    deathTimeout: 5
    
    настройки конечно можно поменять под себя.
  4. далее узнаем ip своей машинки и добавляем в наше приложение эта строчка будет подгружать js код для общения с сервером weinre. Соответственно надо чтобы телефон и компьютер были в одной сети и a.b.c заменить на свой ip. Запускаем приложение в телефоне или симулятор и начинаем отлаживать в привычной среде.


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

В заключении хотел бы поведать вам ещё про один интересный способ, недавно наткнулся на него, принцип работы схож с weinre. Есть такой сайтик jsconsole.com, который предоставляет инструмент, с помощью которого можно достучаться до html на удаленном устройстве и получать от туда сообщения через console.log, а также работать с его DOM деревом. Это конечно не полноценный дебагер, как в случае с wienre но простота и доступность способа заставляет обратить на него внимание! На сайте прекрасная документация и пара обучающих видео, так что проблем с использованием ни у кого возникнуть не должно.
Если в двух словах то вам надо зайти на сайт, вбить команду ":listen", скопировать выданный скрипт в ваш сайт или приложение и вуаля — все работает.

Это конечно не все возможные варианты, мне попадалось описание и других, но проблематичность их использования заставила исключить их из списка. Если кто-то может дополнить список достойным кандидатом, то я только за! (включу его в статью с копирайтом автора)
Tags:
Hubs:
+15
Comments 25
Comments Comments 25

Articles