Запуск мобильных браузеров с удаленной отладкой webkit ON

В Google I/O 2011: Chrome Dev Tools Reloaded, Пол Ирланд и Павел Фельдман представили новый удаленная отладка, которая была передана включенная в webkit.

Это отличная новость, особенно для мобильных веб-разработчиков. Но как это сделать, например, запуск симулятора IOS или просто запуск Safari Mobile на iPhone? (для хром это традиционно выполняется с опцией --remote-debugging-port=9222 при запуске).

Я попробовал включить режим разработчика в настройках сафари (Settings > Safari > Developer > Debug Console: ON), но без успеха...

Я не знаю об андроиде здесь, но знает кто, когда Apple (Safari Mobile) или Google (браузер Android) будет включать эту новую функцию, чтобы мы могли наслаждаться удаленной отладкой в мобильной разработке?

Спасибо.

Ссылка: http://paulirish.com/2011/a-re-introduction-to-the-chrome-developer-tools/#comment-63113

Ответ 1

Safari на iOS 6 В iOS6 теперь вы можете удаленно отлаживать из Safari 6 (только OS X). На устройстве откройте "Настройки" > "Safari" > "Дополнительно" > "Включить веб-инспектор". Откройте "Настройки Safari", "Дополнительно", установите флажок "Показать меню" Разработка "в строке меню". Подключите iPhone/iPad к USB-кабелю. Теперь в строке меню "Разработка" вы должны получить подменю для своего устройства с вкладками, которые вы открыли в Safari на своем устройстве.

Safari на iOS 7 В дополнение к требованиям выше вам понадобится Safari 6.1, который на данный момент (8 октября 2013 года) доступен только в качестве семени для разработчиков: https://developer.apple.com/downloads/index.action?name=Safari%206.1

Chrome на Android 4 Это немного сложнее на Android. Инструкции по удаленной отладке в Chrome для Android здесь: https://developers.google.com/chrome/mobile/docs/debugging Я не нашел способ включить удаленную отладку в браузере по умолчанию Android (v4.04).

Ответ 2

Взгляните на этот bash script, чтобы запустить удаленный инспектор с помощью симулятора iOS: https://gist.github.com/2241976

Ответ 3

Теперь он поддерживается в Chrome для Android.

Ответ 4

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

Тем не менее, есть weinre, который дает вам удаленный вариант веб-инспектора. Но вам нужно включить код на свою страницу, чтобы поддержать его. (Потому что это не функция браузера).

Веб-сайт Weinre

Weinre github repo

Ответ 5

Томас указывает отличный ресурс для удаленной отладки, однако он утверждает, что вам нужно добавить код на веб-страницу. Это не совсем верно, поскольку также позволяет взаимодействовать через букмарклеты. Частично вниз < здесь (в разделе, который называется "Использование букмарклета" ), он говорит, что он должен работать для Android 2.2+ и iOS.

Некоторые важные примечания:

Это не позволит вам отлаживать ошибки запуска (страница уже должна быть загружена, чтобы открыть букмарклет).
Кажется, он не восстанавливается, если вы потеряете соединение (вам нужно обновить страницу, чтобы снова получить соединение).
Если ваш js уже сломан, он уже будет сломан.

Также возможно (я сделал это сам) для "отладки" кода из браузера Android с помощью веб-просмотра. Вы можете заставить webview улавливать все вызовы методов (т.е. Console.log). Используя это, вы можете поймать и сохранить или переслать сообщения для logcat.

Связанный с методом, который вы уже пробовали - когда вы включили консоль Debug на iOS, где вы искали выход для взаимодействия/регистрации? В частности, вы проверили консоль отладки в симуляторе xCode/iPhone?

Ответ 6

Просто потому, что функция реализована в одном порту WebKit (в данном случае Apple и Chromium), не означает, что она всегда доступна в другом месте. Я подробно описал это в своем сообщении в блоге о различных реализациях портов WebKit.

Пока единственным мобильным портом WebKit, который имеет функцию удаленной отладки, является браузер RIM Playbook.

Для iOS это очень сложно понять, потому что Apple никогда не дает никакой информации о своем будущем продукте. По крайней мере, мы знаем, что iOS 5 не будет иметь его, поскольку бета-версии не показывают ничего связанного.

Для Android определенно он появится в будущей версии, так как люди Android принимают Chromium в качестве новой основы для своего WebKit.

Ответ 7

Натан де Фрис выяснил, как это сделать на iOS5, работающем в симуляторе. Он вращается вокруг вызова частного метода _enableRemoteInspector.

Прочтите. Резюме следует:

Чтобы включить это для Mobile Safari, подключитесь к нему с помощью gdb и вызовите метод:

MobileSafari_PID=$(ps x | grep "MobileSafari" | grep -v grep | awk '{ print $1 }')

if [ "$MobileSafari_PID" == "" ]; then
  echo "Mobile Safari.app must be running in the Simulator to enable the remote inspector."
else

  cat <<EOM | gdb -quiet > /dev/null
  attach $MobileSafari_PID
  p (void *)[WebView _enableRemoteInspector]
  detach
EOM

Затем обратитесь к инспектору в http://localhost:9999/.

Со встроенным UIWebView включите его так:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  // ...Snipped...
  [NSClassFromString(@"WebView") _enableRemoteInspector];
  // ...Snipped...
}

На реальном устройстве это не работает, возможно, потому что порт брандмауэр - если у вас есть взломанное устройство, вы можете обойти это (обновите нас, если вы это сделаете).

Ответ 8

Adobe Shadow (которая была только что выпущена) позволяет удаленно отлаживать с помощью weinre без необходимости вводить какой-либо код на свои веб-страницы. Он работает с Chrome на Windows и Mac как "главный" браузер и синхронизирует каждую навигацию по страницам на любое количество устройств, на которых работает клиент iOS или Android.

Обратите внимание, что сам мы несколько ограничены. Например, у вас не будет доступа к вкладке "Сеть".