Mike Dougherty
Chrome 115 以降では、iOS 版 Chrome で Safari ウェブ インスペクタのデバッグを有効にできます。この記事では、利用を開始する方法について説明します。
Chrome 115 より前は、WKWebView のリリース バージョンがリモート Web Inspector のデバッグをサポートしていなかったため、ウェブページのデバッグには iOS 版 Chrome をソースからビルドする必要がありました。Chrome 73 では、ウェブページのデバッグに役立つ JavaScript ログをローカルに表示する chrome://inspect ページが追加されました。WKWebView でリリース版の Web Inspector デバッグが可能になったため（iOS 16.4 時点）、Chrome 115 では、この機能を有効にしてデベロッパー エクスペリエンスをさらに改善するための設定を追加しました。
スタートガイド
iOS デバイスで必要なもの:
- iOS 16.4 以降。
- Chrome 115 以降。
Mac で必要なもの:
- Safari の [開発] メニューが有効になっている。Safari アプリの設定の [詳細設定] タブで有効にします。
iOS デバイスで Chrome アプリを起動し、[設定] に移動します。[コンテンツの設定] で、ウェブ インスペクタを有効にします。この設定を変更した後に、iOS 版 Chrome を再起動します。
サイトのデバッグ
この設定を有効にすると、次の手順に沿って iOS 版 Chrome で実行されている任意のページをデバッグできます。
- iOS デバイスをケーブルで Mac に接続します。
- iOS 版 Chrome で、検査するウェブサイトに移動します。
- Mac で Safari を起動します。[Develop] メニューで、接続済みデバイスの名前にカーソルを合わせ、検査するウェブサイトの URL を選択します。
表示された Web Inspector ウィンドウで、現在のウェブビューのデバッグを行うことができます。Safari デベロッパー ツールの使用方法について詳しくは、Apple のドキュメントをご覧ください。