Статьи

iWebInspector: отладка веб-приложений и приложений PhoneGap на iOS

Отладка мобильных веб-приложений всегда была болезненным процессом. В этой статье я представляю бесплатный инструмент iWebInspector,  который я создал для включения полноценного веб-инспектора, включая отладку и профилирование JavaScript, в Safari для iPhone и iPad, а также в приложениях PhoneGap.


Прежде всего, полная заслуга взлома инструмента за Натаном де Врисом . Он обнаружил несколько дней назад частный API и опубликовал пост об этом. С этим решением мы можем включить Remote Web Inspector на iOS Simulator, включенном в Xcode 4.2 и iOS 5 SDK, используя некоторые команды gdb (отладчик).

Я начал этот пост как учебное пособие о том, как включить эту опцию и отлаживать веб-приложения на симуляторе iOS. После написания этого поста я понял, что его было слишком сложно использовать и включить для обычного веб-разработчика без опыта XCode.

Моей следующей мыслью было: «Было бы здорово иметь инструмент, делающий эти шаги для нас ». И день моей субботы заплатил за эту мысль. У меня был опыт работы с Objective-C для iOS, поэтому было нетрудно создать мое первое приложение Cocoa Mac с использованием того же языка. Через пару часов первая версия iWebInspector была готова к работе.

Решение не работает на реальных устройствах iOS, только на симуляторе iOS, которое доступно только для Mac OS. Инструмент может подключить веб-инспектор к любой вкладке, открытой в Safari для iOS , к веб- приложению без Chrome  (полный экран) или к приложению PhoneGap — или к любому собственному приложению, использующему UIWebView -.

iWebInspector

С помощью этого бесплатного инструмента вы можете включить полный WebKit Web Inspector, включая:

  • Смотрите и просматривайте каждый элемент вашего HTML-элемента. Вы можете изменить атрибуты, контент и стили и посмотреть, как они применяются в Safari.
  • Просмотрите все ресурсы, используемые на этой странице, включая базы данных, локальное хранилище, файлы cookie и ApplicationCache.
  • Проверьте весь сетевой трафик на вашем сайте
  • Просматривайте все свои скрипты, создавайте точки останова, наблюдайте и отлаживайте свой код JavaScript.
  • Запишите временную шкалу, показывающую время рендеринга, сценариев и загрузки при просмотре в Safari.
  • Профилируйте свой код JavaScript
  • Аудит вашего кода, показывая вам отчет о производительности и другие вещи
  • Посмотрите и используйте консоль JavaScript

Я почти уверен, что Apple сделает этот инструмент общедоступным в будущей версии iOS.

Скачать iWebInspector

Присоединение к PhoneGap и UIWebView

Если вы создаете приложение PhoneGap или собственное приложение iOS с некоторым содержимым UIWebView, вы можете легко включить Remote Web Inspector с помощью строки кода вместо использования iWebInspector . Это частный API, поэтому не забудьте удалить эту строку для окончательной компиляции, иначе у вас может быть отказ в AppStore для использования частного API.

Найдите ваше приложение: метод didFinishLaunchingWithOptions в файле AppDelegate.m и добавьте следующую строку кода:

// Remove me after debugging
[NSClassFromString(@"WebView") _enableRemoteInspector];

 

Вот и все! После этого запустите ваше приложение на симуляторе, и localhost: 9999 будет указывать на того же Remote Web Inspector, что и в iWebInspector.

Предложения и сообщение об ошибке

iWebInspector был создан за пару часов, и это первая доступная версия. Если вы обнаружите ошибки, проблемы или если у вас есть предложения, не стесняйтесь связаться со мной или оставить комментарий здесь.

 

Наслаждайтесь!

 

Источник: http://www.mobilexweb.com/blog/debugging-web-safari-phonegap-iphone-ipad