Запустите мобильные браузеры с включенной удаленной отладкой webkit - PullRequest
27 голосов
/ 20 июля 2011

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

-

Это отличная новость, особенно для мобильных веб-разработчиков.Но как мы можем включить его, например, запустить симулятор IOS или просто запустить Safari Mobile на iPhone? (для chrome это обычно делается с опцией --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

Ответы [ 8 ]

12 голосов
/ 01 октября 2012

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

6 голосов
/ 29 марта 2012

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

4 голосов
/ 08 февраля 2012

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

2 голосов
/ 09 сентября 2011

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

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

Веб-сайт Weinre

Weinre github repo

1 голос
/ 05 января 2012

Натан де Фриз выяснил, как это сделать на 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...
}

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

1 голос
/ 18 сентября 2011

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

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

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

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

1 голос
/ 18 сентября 2011

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

Несколько важных замечаний:

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

Также возможно (я сделал это сам) «отладить» код из браузера Android с помощью веб-просмотра. Вы можете сделать так, чтобы веб-просмотр перехватывал все вызовы методов (например, console.log). С его помощью вы можете ловить и сохранять или пересылать сообщения в logcat.

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

0 голосов
/ 07 марта 2012

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

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

...