web-dev-qa-db-ja.com

iOSリモートデバッグ

Chrome for iOSの最近のリリースで、Chrome iOSのリモートデバッグをどのように有効にするのですか。

更新：iOS 6のリリースで、Safariでリモートデバッグができるようになりました。

google-chromegoogle-chrome-devtoolschrome-for-ios
188
Hyangelo

更新：

これは最善の答えではないではなく、 gregers 'のアドバイスに従ってください。

新しい答え：

Weinre を使用してください。

昔の答え：

これで、Safariをリモートデバッグに使用できます。しかし、それはiOS 6が必要です。

これが http://html5-mobile.de/blog/ios6-remote-debugging-web-inspector の素早い翻訳です。

  1. あなたのiDeviceをあなたのMacにUSB経由で接続する
  2. MacでSafariを開き、開発ツールを起動します。
  3. あなたのiDevice上：設定> safari>詳細に行き、ウェブインスペクタを有効にしてください
  4. あなたのiDeviceで任意のウェブサイトに行く
  5. あなたのMacの場合：開発者メニューを開き、あなたのiDevice（一番上のSafariメニュー）からサイトを選んでください。

Simons answer が指摘するように、リモートデバッグを機能させるにはプライベートブラウジングを無効にする必要があります。

設定>サファリ>プライベートブラウジング>オフ

105
F Lekschas

選択した回答はSafari専用です。現時点では、iOS上のChromeで実際のリモートデバッグを行うことはできませんが、ほとんどのモバイルブラウザと同様に、簡単なデバッグには WeInRe を使用できます。セットアップするのは少々手間がかかりますが、DOMの検証、スタイルの確認、DOMの変更、およびコンソールでのプレイを可能にします。

enter image description here

設定する：

  • Nodejsをインストール
  • npm install -g weinre
  • weinre --boundHost -all-
  • Http：// {wifi-ip-address}：8080 /を開き、目的のスクリプトコードをコピーしてください。
  • Scriptタグをあなたのページに貼り付けてください（またはブックマークレットを使用してください）。
  • デバッグクライアントのユーザーインターフェイスへのリンクをクリックしてください（http：// {wifi-ip-address}：8080/client /＃anonymous）
  • Clients の下に緑色の線が表示されたらブラウザは接続されています

ブックマークレットをインストールするのはもう少し面倒です。デスクトップとモバイル両方のChromeでブックマーク同期を有効にしていると最も簡単です。ローカルのワインサーバーからブックマークレットのURLをコピーします（上記と同じ）。残念ながらURLエンコードされていないのでうまくいきません。 JavaScriptコンソールを開いて、次のように入力してください。

copy(encodeURI('')); // paste bookmarklet inside quotes

クリップボードにURLエンコードされたブックマークレットがあるはずです。 Mobile Bookmarks の下の新しいブックマークに貼り付けます。それをちょっと簡単に言うか、何かをタイプするのが簡単なものと呼びなさい。それはあなたの携帯電話にかなり速く同期されるべきですので、あなたが調べたいページをロードしてください。次にURLバーにブックマーク名を入力すると、ブックマークレットがオートコンプリート候補として表示されます。ブックマークレットコードを実行するためにそれをクリックしてください:)

enter image description here

218
gregers

現在iOS上でChromeを直接リモートデバッグすることはできません。 Mobile Safariとは微妙に異なる動作をする可能性があるuiWebViewを使用しています。

いくつかの選択肢があります。

オプション1： Safariのインスペクタを使ってMobile Safariをリモートデバッグする問題がMobile Safariで再現される場合は、これは間違いなく最良の方法です。実際、iOSシミュレータを通過するのはさらに簡単です。

オプション2： スリムなデバッグのためにWeinreを使うWeinreには多くの機能はありませんが時にはそれで十分です。

オプション3：同じ機能を持つ適切なuiWebViewをリモートデバッグします。

これを行う最良の方法は次のとおりです。あなたは XCodeをインストールする必要があります 。

  1. github.com/paulirish/iOS-WebView-App に移動して「Zipをダウンロード」またはクローンを作成してください。
  2. XCodeを開き、既存のプロジェクトを開き、ダウンロードしたばかりのプロジェクトを選択します。
  3. WebViewAppDelegate.mを開き、urlStringをテストするURLに変更します。
  4. IOSシミュレータでアプリを実行します。
  5. Safariを開き、 Develop メニューを開き、 iOS Simulator を選択してWebビューを選択します。
  6. Safari InspectorはあなたのuiWebViewを検査します。

enter image description here

enter image description here

enter image description here

48
Paul Irish

私の理解では、Google ChromeはAndroidのようなChromeの本格的な実装ではなく、iOSのUIWebViewを利用しています。

10
Stephan Leroux

多くのリモートコンソールは問題なく動作します。 http://farjs.com が私のプロジェクトで、Crome iOS特有の問題をうまくデバッグすることができ、それを使っているサファリでは起こらなかった。 （そしておそらく他のすべてのモバイルブラウザ）

問題は、Chromeではブックマークレットのインストールが許可されていないため、デバッグコードを挿入するのが少し難しいことです。

代わりに、デバッグするページ上の1つのタブとfarjs.com上の別のタブを開き、「the bookmarklet」をクリックします。

ブックマークレットのJSコードをコピーし、最初のタブに戻り、デバッグするページを見つけて、ブックマークレットのコードをロケーションバーに貼り付けます。

最後のステップは、Chromeが削除するので、ロケーションバーの先頭までスクロールして "javascript："を追加することです。

4
BlueStory

私は Vorlon をお勧めします、weinreのように動作します。私はVorlonのUIが好きで、それは SSL をサポートしています正常に動作します。

4
Tina Chen

試したことはありませんが、 iOS WebKitデバッグプロキシ （ios_webkit_debug_proxy/iwdp）を使用すると、UIWebViewをリモートでデバッグできます。 README.mdから

Ios_webkit_debug_proxy（別名iwdp）を使用すると、開発者はMobileSafariと UIWebViews をで検査できます。 Chrome DevTools UIおよびChrome Remote Debugging Protocolを介した実際のおよびシミュレートされたiOSデバイス。 DevToolsのリクエストは、AppleのRemote Web Inspectorサービスコールに変換されます。

3
jiku

また、「プライベートブラウジング」をオフにする必要があります。

設定>サファリ>プライベートブラウジング>オフ

2
Simon Owen Design

Vorlon.JS は、iOSまたは他のクライアントのリモートデバッグに使用できます。

  1. npm i -g vorlonを使ってグローバルにインストールするだけです。
  2. vorlonを使用してサーバーを起動します
  3. サーバーが稼働している状態で、ブラウザで http：// localhost：1337 を開いてVorlon.JSダッシュボードを表示します。
  4. 最後のステップは、このscriptタグをアプリに追加してVorlon.JSを有効にすることです。
    <script src="http://<yourExternalIP>:1337/vorlon.js"></script>
  5. 接続されているすべてのクライアントiPhone、AndroidはVorlon.JSダッシュボードのクライアントリストで利用可能になります enter image description here

このアプローチは、 ngrok を使用してlocalhostで実行されていないアプリケーションをデバッグするためにも使用できます。詳細については、 https://stackoverflow.com/a/45443203/2073920 を参照してください。

免責事項

私は単なるユーザーであり、Vorlon.JSとngrokとは提携関係にありません。

2
Abdul Rauf

Adobe Edge Inspect（ https://creative.Adobe.com/products/inspect ）は、すべてのモバイルデバイスをデバッグするもう1つの方法ですIOSとAndroid（Windows Phoneはなし）これはリモートDOMの検査/変更にweinreを使用します。最速の方法ではありませんが、Windows上で動作します。

0
Peter Sinke

注：私はGhostlabのクリエイターであるVanamcoとは全く関係がありません。

Chrome固有の問題をデバッグできることが私にとって重要だったので、私はそれを手助けすることができる何かを見つけようとしました。私は Ghostlab 3 に喜んでお金を投げました。 ChromeとSafariモバイルブラウザをデスクトップに表示しているかのようにテストできます。デバッグしたいデバイスに使用するLANアドレスを指定するだけです。そのアドレスを使用している各アプリケーションはGhostlabのリストに表示されます。

enter image description here

enter image description here

強くお勧めします。

0
Brandon Durham

Chromiumには未解決のバグがあります。 https://bugs.chromium.org/p/chromium/issues/detail?id=584905

残念なことに、彼らはこれを実現するためにWKViewでAPIを開くことをAppleに依存しています。その後、たぶんデバッグがSafariから利用可能になるでしょう。

0
Noam Rosenthal

私はremotedebug-ios-webkit-adapterを使用しています。Windows10上のChromeでIOSとデバッガを開いて使用するとうまく動作します。

何か助けになればうれしいです Link

0
Beny

私も同じ機能を探しています、そして今日の時点では、まだ実装されていません。 2つの選択肢が考えられますが、

  1. ChromeとSafariの動作はまったく同じです。 Chromeは、ジャイロスコープやSafariでサポートされているその他の関連イベントもサポートしています。現在、Safariのデバッグコンソールを有効にしてWebアプリケーションをデバッグしています（[設定] - > [Safari]）。

  2. また、リモートデバッグ/検査と同期を可能にするAdobe Shadowも試してください。

HTH.

0
vine'th