0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

webインスペクタを使って、mac pcとandroid端末にてchromeの実機検証を行う

Posted at

はじめに:
開発者向けオプションをandroid側で、onにする。→端末情報を何回かクリックすると開放。
USBデバッグの設定をonにして、デバッグモードを使えるようにする。
これを行うと開発者用モードを使用できるようになる。

webインスペクタ:
参考URL上では、USB接続と言ってますが、type cで繋げています。(androidがtype cなので)

デバッグモードが使えるようになっていれば、chrome://inspect/#devicesにアクセスすると、Remote Targetの下に自分の端末が出ているはず。

※このときに、type c同士の接続でうまくいきました。一方がtype c 一方がusbの形のケーブルだとdebugツールが反応してくれませんでした。なので、うまくいかない時には、ケーブルなどを変えてみてはいかがかと!

設定がうまくいけば、Remote Targetの下にandroid側で開いているタブ一覧が表示されるので、inspectをクリックします。

すると、pc側で以下のような画面が現れます。実際に動かしたり、html,cssをいじることも可能です。いじると、android側でも表示が変化するのでweb inspect完成です。同期されているため、pc上でscrollすると、android側でもscrollします。

スクリーンショット 2021-11-01 21.40.00.png

参考:
https://developer.chrome.com/docs/devtools/remote-debugging/
https://ascii.jp/elem/000/001/006/1006268/

デバッグのURL:
chrome://inspect/#devices

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?