iOSリモートデバッグ

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

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

更新：

これはないもう、従ってください最良の答えgregers「アドバイスを。

新しい答え：

Weinreを使用します。

古い答え：

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

ここにhttp://html5-mobile.de/blog/ios6-remote-debugging-web-inspectorの簡単な翻訳があります

1. MacとUSB経由でiDeviceを接続します
2. MacでSafariを開き、開発ツールをアクティブ化します
3. iDeviceで：[設定]> [safari]> [詳細設定]に移動し、Webインスペクターをアクティブにします
4. iDeviceで任意のWebサイトに移動します
5. Macの場合：開発者メニューを開き、iDevice（上部のSafariメニューにあります）からサイトを選択します。

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

[設定]> [Safari]> [プライベートブラウジング]> [オフ]

選択した回答はSafari専用です。現時点では、iOSのChromeで実際のリモートデバッグを行うことはできませんが、ほとんどのモバイルブラウザーと同様に、簡単なデバッグにWeInReを使用できます。設定は少し面倒ですが、DOMの検査、スタイル設定の確認、DOMの変更、コンソールの操作を行うことができます。

設定する：

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

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

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

これで、クリップボードにURLエンコードされたブックマークレットがあるはずです。[ モバイルブックマーク]の下の新しいブックマークに貼り付けます。それをweinreまたはタイプするのが簡単な何かと呼んでください。それはあなたのモバイルにかなり速く同期されるべきなので、検査したいページをロードしてください。次に、URLバーにブックマーク名を入力すると、ブックマークレットが自動補完候補として表示されます。それをクリックしてブックマークレットコードを実行します:)

現在、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を開き、[ 開発 ]メニューを開き、[ iOSシミュレータ]を選択して、Webビューを選択します。
6. Safari InspectorがuiWebViewを検査します。

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

多くのリモートコンソールは正常に動作します。http://farjs.comは私のプロジェクトであり、それを使用してサファリでは発生せず、Crome iOSに固有の問題を正常にデバッグすることができました。（そしておそらく他のすべてのモバイルブラウザ）

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

代わりに、デバッグするページで1つのタブを開き、farjs.comで別のタブを開いて、「ブックマークレット」をクリックします。

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

最後のステップは、ロケーションバーの先頭までスクロールして、「javascript：」を追加することです。Chromeによって削除されるためです。

私はVorlonをお勧めします。私はVorlonのUIが好きで、SSLをサポートしています。私のアプリケーションはHTTPSです。ngrok、ghostlab、vorlonでweinreを試しましたが、vorlonのみが正常に動作します。

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

ios_webkit_debug_proxy（別名iwdp）は、開発者がMobileSafariおよび検査することができますUIWebViewsを上、実際のクロムデベロッパーツールUIとChromeリモートデバッグプロトコル経由してシミュレートされたiOSデバイス。DevToolsリクエストはAppleのRemote Web Inspectorサービス呼び出しに変換されます。

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

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

このアプローチは、ngrokを使用してローカルホストで実行されていないアプリをデバッグするためにも使用できることに注意してください。詳細については、https：//stackoverflow.com/a/45443203/2073920を参照してください。

免責事項

私は単なるユーザーであり、Vorlon.JSおよびngrokとは関係ありません。

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

[設定]> [Safari]> [プライベートブラウジング]> [オフ]

私も同じ機能を探していますが、現時点ではまだ実装されていません。ただし、2つのオプションが考えられます。

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

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

HTH。

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

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

残念ながら、彼らはこれを実現するためにAppleにWKViewでAPIを開くように頼っています。その後、おそらく Safariからデバッグを利用できます。

私はremotedebug-ios-webkit-adapterを使用していますが、IOSとWindows 10のChromeで開いているデバッガーでうまく機能します。

それが1つのリンクに役立つ場合は喜んでいます

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

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

強くお勧めします。

iOSでSafariデスクトップを開く

開発->レスポンシブデザインモード

デバイスの下の[その他]をクリックします

これを貼り付け：Mozilla / 5.0（iPad; CPU OS 10_2_1 like Mac OS X）AppleWebKit / 602.1.50（KHTML、like Gecko）CriOS / 56.0.2924.79 Mobile / 14D27 Safari / 602.1

Safari検査ツールを使用します。

免責事項：私はBrowserStackで働いています。^{【確認済み】投稿可かどうか（所属している会社の商品を提案できますか？）}

iOSでSafariをデバッグします（現時点ではChromeは対象外です。詳しくは先読みしてください。）

これはどのように機能しますか？

• BrowserStackで、実際のデバイスでセッションを開始する必要があります（エミュレータはありますが、実際のデバイスでセッションを開始する必要があります）。たとえば、iPhone 6S-Safari / Chrome（Chromeの開発ツールはまだありませんが、ロードマップにあります）
• URLを入力してください
• DevToolsをトリガーして、BrowserStacksリモートデバイスで開いているWebページを検査できます。以下の同じ画面を共有しました。

実際の電話でのDevToolsの使用

要素にカーソルを合わせ、HTML、CSSを編集して、デスクトップブラウザーの開発ツールが機能するのと同じようにします。

DevToolsを使用して実際の電話でJavaScriptを実行する

Consoleタブに切り替え、JavaScriptコードを実行し、console.log()出力を確認するなど...

ネットワークタブ、リクエストヘッダー、レスポンスなどをチェック...

BrowserStackでのDevToolsのサポート？

• DevToolsは次の場所で入手できます。

  • 実際のデバイス-iOS-Safari（iOS Chrome用のDevToolsはロードマップにあります）
  • 実際のデバイス-Android-Chrome（現在のところ、Androidデバイスで使用できるのはChromeのみです）

• クライアントブラウザはChromeまたはFirefoxである必要があります。つまり、BrowserStack Real Device DevToolsを使用するには、MacOSXまたはWindowsでChromeまたはFirefoxブラウザーを使用する必要があります。

注：すべての実際のデバイスでテストするプランを購入する必要があります。無料のユーザーとして、いくつかのReal Androidデバイス（タブレットを含む）といくつかのReal iOSデバイス（タブレットを含む）を取得します。また、エミュレータも提供するため、リアルデバイスという言葉を強調します。

詳細については、モバイル機能ページのDevToolsセクションを参照してください。