Отладка мобильных веб-приложений всегда была болезненным процессом. В этой статье я представляю бесплатный инструмент 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