PCでiPadサファリをデバッグする
IPadのSafariでWebサイトをテストしたい。別のPCしかありません。モバイルChromeでADBのようなリモートデバッグを行う方法はありますか？ StackOverflowで検索したところ、Adobe Edge Inspect CCがあるようですが、これが良い選択かどうかはわかりません。
ありがとう！
リモートデバッグ時にMac上のSafariデバッガーの代わりにTelerik AppBuilder（Windowsクライアント）をWindowsで使用するオプションを試すことができます。以下のリンクに、それを行うための手順に関する素敵なブログ投稿があります。スクリーンショットもあり、大量のテキストがあるので、情報を再投稿しないでください。ただし、本質的には、アプリをインストールして開き、USB経由でデバイスを接続すると、アプリでアプリを見つけて、そのための開発者ツール/デバッガーを開くことができます。非公開のWebサイトの場合、投稿に記載されているいくつかのファイアウォール構成でポート80を開く必要があります。
ツールにはライセンスが必要です。または、試用版を使用できます。試用版は後で基本エディションになります。基本版では、引き続きデバッグを行うことができます。私は自分で試してみるつもりです。
これらのiOSアプリも試すことができます。iTunesAppストアで見つけることができます。これらは、モバイルSafariが提供しない組み込みの開発者ツール機能（iOSではリモートデバッグなし）を提供します。
MIHツール-基本版 https://iTunes.Apple.com/us/app/mihtool/id584739126?ls=1&mt=8
HTTPWatch Basic https://iTunes.Apple.com/us/app/httpwatch-basic-http-sniffer/id658886056?mt=8
私は彼らに試してみましたが、モバイルSafariの完全な互換性をターゲットにする必要がない限り、少なくともiOSで入手するモバイルSafariよりも優れています。これらのアプリのpro/paidエディションはより多くの/より良い機能を提供すると思います。
2018アップデート：
元の投稿以来、ブログの投稿は死んでおり、 Telerik App Builderは廃止されました で、提供されていません。この更新を追加して、読者がこの回答投稿に続くユーザーのコメントを読んでいない場合に読者に通知します。ブログの投稿に関しては、まだ興味がある人のために、ここに web cached copy があります。ブログに関しては、ブログの会社は閉鎖されたと思います。
機会があれば、アプリビルダーのコピーが保存されているかどうかを確認し、まだ使用することに興味がある人のためにオンラインで投稿できるようにします。
24/6/2017に更新およびテスト済み
ChromeをWindows 8以降で使用：
- ダウンロードしてインストールします Node
ITunesをダウンロードしてインストールし、デバイスに接続します。 （承認を得るために、ポップアップがiPadに表示されます）。 iPadでWebインスペクターを許可してください
remote webkit adapter をダウンロードしてインストールします
Powershellの使用（管理者として）：
npm install remotedebug-ios-webkit-adapter -g
- アダプターを実行します。
Powershellの使用（管理者として）：
remotedebug_ios_webkit_adapter --port=9000
同様の出力が得られるはずです。
C:\Windows\system32> remotedebug_ios_webkit_adapter --port=9000 remotedebug-ios-webkit-adapter is listening on port 9000 iosAdapter.getTargets ...
- Chromeを開き、次のリンクに移動します。
chrome：// inspect /＃devices
- [ネットワークターゲットの検出]の横にある[構成]をクリックして、次を追加します。localhost：9000
デバッグするWebページがsafariで開いていることを確認してください。chromeインスペクターページのRemote Targetに表示されます。
iOS 11の追加手順@skaurusに感謝
iOS 9以降を搭載したWindows 8以降のマシンでデバッグする最も簡単な方法については、 Lemmy4555の答え を参照してください。 私のブログ投稿 をその回答や他のソースからの情報を使用して更新し、 スクリーンシェアを記録 も更新しました。必要に応じて、以下のメソッドはiOS 8以下でも動作します。
実際、WindowsマシンのFirefoxを使用してiOSのSafariでWebサイトをデバッグする非常に簡単な方法があります。
注：Ryanは以下のコメントで、これはiOS 8以下でのみ動作する可能性があると書いています。確認できませんが、注意してください。
これについて 詳細なブログ記事 を書きましたが、ここにハイライトがあります：
- ITunesをインストールして、付属の「Apple Mobile Device Support」および「Apple Application Support」アプリケーションを入手します。 （必要に応じて、後でiTunesをアンインストールします）
- IOSデバイスをUSB経由で接続します。
- Webインスペクターを有効にする iOS（iOS 6以降で使用可能）。
- IOSデバイスでSafariを開き、Webサイトを参照します。
- WindowsマシンでFirefoxを開き、Shift + F8を押してWebIDEを開きます。FirefoxDeveloper Editionを使用している場合は、必要な Valance アドオンを含める必要があります（任意のバージョン）またはFirefox 37以降（任意のチャンネル）。
- 何らかの理由で ios-webkit-debug-proxy-win32 プログラムをダウンロードして実行するまで、iOSデバイスに接続できませんでした。空のコマンドプロンプトが開きますが、WebIDEを開いてから戻った後、切断してから再接続し、Safariで開いたWebサイトのデバッグ情報を見ました。ただし、別のユーザーがファイアウォールに例外を追加して切断/再接続するだけで機能したため、これを行う必要はないかもしれません。
使用可能なデバッグ情報はChrome Developer Tools（特に[ネットワーク]タブがない）ほど網羅的ではありませんが、コンソールで何が起こっているかを表示するには十分でした。
この質問は4年以上前のものでしたが、プラットフォームに依存しない別のオプションについて言及する価値があると思います。
VConsole
これは、すべてのネイティブコンソール出力を上書きし、ページコンテンツの上にオーバーレイとして表示するページに挿入できるJavaScriptです。詳細レベルはalmostGoogle Chromeのデベロッパーツールと同等。
ブラウザでJavaScriptが有効になっている限り、iOS Safariおよび他のモバイルブラウザーで正常に動作します。
インストール方法： https://www.npmjs.com/package/vconsole
NPMツールをインストールする必要がありますが、実際にはプロジェクトをビルドするためにNPMを使用する必要はありません。 VConsoleを別のフォルダーのどこかにインストールし、そこからvconsole.min.jsをコピーして貼り付けるだけです。
ページに挿入すると、次のようになります。
<script type="text/javascript" src="vconsole.min.js"></script>
<script type="text/javascript>let vc = new VConsole(); // this will initialize it.</script>
視覚的には非常に魅力的で、モバイル/デスクトップブラウザーのページの右下隅に緑色のボタンが表示され、コンソールオーバーレイが開きます。
とてもきちんとした！
もちろん、要素を選択したり、計算されたcssなどを確認したりすることはできませんが、コンソール出力やネットワークレポートを探している場合、これは本当に使いやすいです。
CSSの前処理にはPreProsを使用し、モバイルデバッグとWebインスペクター用のサーバーが組み込まれています。しかし、これはまだローカルサイトにのみ適しています...
私の経験では、多くの場合、モバイルSafariのみの問題ではなく、Safari全般の問題です。このような場合、通常のSafari（Windows用）を試して、そこにバグが表示されるかどうかを確認すると役立ちます。その場合、この方法で何かをデバッグする方がはるかに簡単です。
これをPCで試したことはありませんが、デバッグするにはhttp：// [DEVICE_IP_ADDRESS]：9999にアクセスできるはずです。