web-dev-qa-db-ja.com

Webkitリモートデバッグをオンにしてモバイルブラウザを起動します

Google I/O 2011：Chrome Dev Tools Reloaded で、PaulIrishとPavelFeldmanが新しい リモートデバッグ 機能を導入しました—これは通過していました webkitに含まれています 。

-

これは、特にモバイルWeb開発者にとって素晴らしいニュースです。しかし、どうすればそれを有効にできますか？たとえば、IOSシミュレーターを起動したり、iPhoneでSafari Mobileを実行したりしますか？（for chromeこれは伝統的に、起動時に--remote-debugging-port=9222オプションを使用して行われます。

サファリ設定（Settings> Safari> Developer> Debug Console: ON）で開発者モードを有効にしようとしましたが、成功しませんでした...

ここではAndroidについてはわかりませんが、Apple（Safari Mobile）またはGoogle（Androidブラウザ）にはこの新機能が含まれるため、モバイル開発でリモートデバッグを楽しむことができますか？

ありがとうございました。

参照： http://paulirish.com/2011/a-re-introduction-to-the-chrome-developer-tools/#comment-6311

mobilewebkitmobile-safariremote-debugging
27
abernier

iOS 6のSafariiOS6では、Safari 6（OS Xのみ）からリモートデバッグできるようになりました。デバイスで、[設定]> [Safari]> [詳細設定]> [Webインスペクターを有効にする]を開きます。 [Safariの設定]、[詳細]を開き、[メニューバーに[開発]メニューを表示する]をオンにします。 iPhone/iPadをUSBケーブルで接続します。これで、[開発]メニューバーの下に、デバイスのSafariで開いているタブを含むデバイスのサブメニューが表示されます。

iOS 7のSafari上記の要件に加えて、Safari 6.1が必要になります。これは、現時点（2013年10月8日）のシードとしてのみ利用可能です。開発者： https://developer.Apple.com/downloads/index.action?name=Safari%206.1

Chrome on Android 4Androidでは少し複雑です。Chrome for Android here： https://developers.google.com/chrome/mobile/docs/debugging 有効にする方法が見つかりませんAndroidデフォルトブラウザ（v4.04）でのリモートデバッグ。

12
gregers

このbashスクリプトを見て、iOSシミュレーターでリモートインスペクターを起動します： https://Gist.github.com/2241976

6
Juan Pablo Buritica

Chrome for Android でサポートされるようになりました。

4
Du Song

現在、webkitリモートデバッグプロトコルを実装しているモバイルブラウザはありません。 （多分あなたはそれをサポートするAndroidのカスタムビルドを得ることができます）

ただし、リモートバージョンのWebインスペクターを提供するweinreがあります。ただし、それをサポートするには、ページにコードを含める必要があります。 （ブラウザ機能ではないため）。

Weinreのウェブサイト

Weinre githubリポジトリ

2
Thomas Bartelmess

Thomasは、リモートデバッグのための優れたリソースを指摘していますが、Webページにコードを追加する必要があると述べています。 weinreはブックマークレットを介した対話も許可するため、これは厳密には当てはまりません。ページの途中で ここ （「ブックマークレットの使用」と呼ばれるセクションの下）、Android 2.2+およびiOSで機能するはずです。

注意すべきいくつかの関連事項：

  1. 開始エラーをデバッグすることはできません（ブックマークレットを開くには、ページを既にロードする必要があります）。
  2. 接続が失われた場合、再接続されていないようです（接続を再開するには、ページを更新する必要があります）。
  3. Jsがすでに壊れている場合は、それもすでに壊れています。

Androidブラウザからwebviewを使用してコードを「デバッグ」することも可能です（私は自分で行いました）。webviewにすべてのメソッド呼び出し（つまり、console.log）をキャッチさせることができます。これを使用して、メッセージをキャッチして保存したり、logcatに転送したりできます。

すでに試した方法に関連して-iOSでデバッグコンソールを有効にしたとき、インタラクション/ロギング出力をどこで探していましたか？具体的には、xCode/iPhoneシミュレーターのデバッグコンソールをチェックインしましたか？

1
CoatedMoose

Nathan de Vries シミュレーターで実行されている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

fi

次に、http://localhost:9999/でインスペクターにアクセスします。

埋め込まれたUIWebViewを使用して、次のように有効にします。

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

実際のデバイスでは、おそらくポートがファイアウォールで保護されているため、機能しません。ジェイルブレイクされたデバイスがある場合は、それを回避できる可能性があります（そうする場合は更新してください）。

1
orip

機能がWebKitの1つのポート（この場合、AppleおよびChromium））に実装されているからといって、それが常に他の場所で利用できるとは限りません。これについては、ブログ投稿で詳しく説明しています。 異なるWebKitポートの実装 。

これまでのところ、リモートデバッグ機能を備えた唯一のモバイルWebKitポートは、RIMPlaybookブラウザーです。

IOSの場合、Appleは将来の製品に関する情報を提供しないため、知るのは非常に困難です。少なくとも、ベータ版には何も表示されないため、iOS5には情報がありません。関連。

Androidの場合、WebKitの新しい基盤としてAndroidの人々は Chromiumを採用 であるため、間違いなく将来のリリースで提供される予定です。

1
Ariya Hidayat

Adobeの Shadow ユーティリティ（リリースされたばかり）を使用すると、Webページにコードを挿入しなくても weinre を使用してリモートでデバッグできます。これは、WindowsおよびMacの「マスター」ブラウザとしてChromeで動作し、すべてのページナビゲーションをiOSまたはAndroidクライアントを実行している任意の数のデバイスに同期します。

Weinre自体は多少制限されていることに注意してください。たとえば、[ネットワーク]タブにアクセスすることはできません。

0
istvanp