(144) Androidスマホ版ChromeをPCの開発者ツールで覗く。

投稿者: | 2023年12月16日

132 views

この記事は最終更新から 458日 が経過しています。

1. やりたいこと

Androidスマホ上の Google Chromeで Webページを表示している。
このとき…
Androidスマホ版 Chrome上の DOM, Console, Network情報を
パソコン版 Chromeの開発者ツールで覗きたい。

2. やってみる

方法1: パソコンとつないでリモートデバッグする。

  • PCに Google Chromeをインストールする。
  • USBデバッグを有効にする。スマホで「設定」→「開発者オプション」に移動し、「USBデバッグ」を有効にする。開発者オプションが見つからない場合は、「設定」→「端末情報」→「ビルド番号」を数回タップして開発者モードを有効にする。
  • スマホをPCにUSBケーブルで接続する。
  • PCのChromeで chrome://inspect にアクセスする。
  • Discover USB devices にチェックを入れて、接続したスマホが表示されるのを確認する。
  • PC上にスマホ上で開いているページが表示されるので inspect をクリックする。これにより、新しいウィンドウが開き、そのページのDevTools(開発者ツール)が表示される。

この時点で、所望の開発者機能が使えるようになっている。


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)