My tech diary

ソフトウェアエンジニアをやっています。技術的内容を中心に調べたことを書いていきます。

スマホブラウザのリモートデバッグ

Chrome Safari Android iOS

スマホのブラウザで開いている Web ページを PC のブラウザでリモートデバッグする方法のメモです。 (毎回調べてる気がするので...)

Android の場合

Android 4.0 以降の機能です。 (ただし、連携を成功させるために、関連ソフトウェアを全て最新版で揃えておくことをオススメします)

  1. Android 端末の Settings アプリを開いて [Developer options] を有効にする
    • 僕の使っている Galaxy S9 では [About phone] > [Software information] > [Build number] を 7 回タップで有効になります
  2. Android 端末の Settings アプリで [Developer options] > [USB debugging] を ON にする
  3. Android 端末と PC (macOS) を USB 接続する
  4. Android 端末で Chrome を起動する
  5. PC 上の Chrome で chrome://inspect/#devices を開き、 [Discover USB devices] にチェックする
  6. すると、対象端末と対象のページ一覧が表示されるので、その下の inspect をクリックすることで DevTools が起動する

さらに、 Android 端末のアプリ内 WebView を PC Chrome DevTools でデバッグ可能にする事もできます。 アプリ側で以下の設定をすれば OK です。

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    if (BuildConfig.DEBUG) {
        binding().webView.setWebContentsDebuggingEnabled(true);
    }
}

iOS の場合

iOS 6.0 以降の機能です。 (ただし、連携を成功させるために、関連ソフトウェアを全て最新版で揃えておくことをオススメします)

  1. iOS 端末の Settings アプリを開いて [Safari] > [Advanced] > [Web Inspector] を ON にする
  2. iOS 端末と PC (macOS) を USB 接続する
  3. PC (macOS) の Safari を起動し、 [Preferences...] > [Advanced] で Show Develop menu in menu bar にチェックが入っていなければチェックする
  4. iOS 端末で Safari を起動する
  5. PC 上の Safari のメニューから [Develop] > (対象の iOS 端末名) > (対象のページ) を選択することで、 Web Inspector が起動する

こちらの方法も、デバッグビルドであれば、アプリ上の WebView に対しても適用できます。

References