Android/iOS端末でChromeとSafariのデバッグをする

## TL;DR
Android端末とiPhoneのブラウザにて、コンソールとか見ながらデバッグしたい。
ChromeやSafariではスマホとPCをUSBケーブルでつないで、PCの方にコンソールログなどを表示する機能があるので、それを使う。

## iPhoneのSafariで実機デバッグする

PCは MacBook Pro。
iPhone端末はiPhone7で検証した。

### iPhoneでやること

設定からSafariを選択。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32691/150aeab7-ce26-7c1a-e96f-76057f208e0e.png" width='80%'>

詳細を押す。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32691/abeae61a-05da-eda8-d153-dbb2d64a86d9.png" width='80%'>

Webインスペクタの項目があるので、トグルをONにする。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32691/b9c4ea10-5c61-afff-d910-5abcce87cef9.png" width='80%'>

あとは、PCとiPhone端末をUSBで接続し、Safariでデバッグしたいページを開いておく。

### PCでやること
Safariの環境設定の詳細タブに、`メニューバーに"開発"メニューを表示` とあるので、チェックをつける。
<img width="824" alt="スクリーンショット 2019-09-02 21.49.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32691/5fa9411a-59e3-f17a-d2aa-b65e8f8ddca5.png">

`"開発"`が表示されるのでクリックする。
<img width="551" alt="スクリーンショット 2019-09-02 21.48.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32691/1bd91541-6273-b74f-b93c-d55c0883bf85.png">

iPhoneが接続されていれば、iPhoneの端末名が表示されるので、カーソルをあわせると、iPhoneのSafariで実行中のアプリケーション名が表示される。iPhone側で何もしていなければ、何も表示されない。
デバッグしたいアプリケーション名の項目をクリックする。
<img width="669" alt="スクリーンショット 2019-09-02 21.49.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32691/300f7383-b946-52d1-422f-7036a2ba9ee1.png">

インスペクタが表示されれば、あとはiPhone側のSafariで挙動を確認すればOK
<img width="999" alt="スクリーンショット 2019-09-02 22.18.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32691/0e151615-df8e-2fbb-4d81-2ca2970d89ec.png">


##  AndroidのChromeで実機デバッグする


PCは MacBook Pro。
Android端末はAquos(Androidバージョン8.0)で検証した。

### Android端末でやること

開発者向けオプションを出しておく。

やり方は、`設定 > システム > 端末情報` と進み、`ビルド番号`を連続クリック。
この部分は端末によって大なり小なり差異がある。

`開発者向けオプション`が表示されたら、それをONにして、
`デバッグ > USBデバッグ`をONにしておく。

そのあとPCと端末をUSBケーブルでつなぐ。

### PCでやること

Chromeを開いて、開発者ツールを開きメニューを出す。
すると、 `More tools > Remote device` という項目があるのでクリック。

![スクリーンショット 2019-09-02 22.36.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32691/dea99268-27d2-21e5-235a-16ed036bbdc1.png)

クリックすると、Remote Devicesのタブが開かれ以下のようになるので、`Discover USB devices`にチェックが入っていることを確認する。


![スクリーンショット 2019-09-02 22.39.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32691/9eb7ffbc-f8bc-e9ed-fcec-932b34829818.png)

無事にUSB接続ができ、PCがAndroid端末を認識していれば、以下の部分の表示が変わる。

![スクリーンショット 2019-09-02 22.48.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32691/092923ec-72d5-50ca-5fe0-a06509ad926d.png)

端末名をクリックすると、現在端末側で開いているアプリケーションやWebサイトのタイトルが表示されるので、
デバッグしたいアプリケーションのタイトルの横の`inspect`をクリックする。

![スクリーンショット 2019-09-02 22.52.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32691/0a5e9681-5b48-7a75-ba31-46869a3b71c7.png)


Android端末のChromeと連動した画面が表示され、以下のようなデバッグ画面が開いたらOK。

<img width="908" alt="スクリーンショット 2019-09-02 22.52.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32691/ff714473-5c60-dbdd-23c1-b4322e16bdcc.png">



## まとめ

各ブラウザのdeveloperツールでユーザエージェントを設定し、スマートフォンのレイアウトやエラーログなども手軽に確認できるが、
実際の端末では意図しない挙動をすることが多々ある。
そんなときは上のようにブラウザの機能を使ってデバッグすればよい。