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