AndroidのデバッグをPCでやってみた話

こんにちは。まちいろの日高です。
Web制作で私が一番苦手なこと。それはデバッグ。
なおかつ複数ブラウザ・端末となると、無の境地です。

JSエラーをデバッグするのに、PCだとChromeのDevToolsを使えば楽なのですが、実機でのテストだとなかなか確認できず困りました。

今回は、WebサイトをAndroidで見たときだけJSが動かない！という時の対応について描いてみようと思います。

Android側の設定

まずは検証したい端末でUSBデバッグをONにします。

・Android端末の設定で「開発者向けオプション」を開きます
・USBデバッグの項目をONにします
・USBでPCとAndroidを直接繋ぎます

ChromeのDevToolsで確認

さらにデバッグをするためにChromeで設定を行います。

・ ChromeでDevToolsを開きます
・「More tools」から「Remote devices」を選択します

・RemoteDevicesタブが表示されます
・DevToolsでデバイスが認識されるとサイドバーに認識デバイスが表示されます
・この状態でブラウザでページを閲覧すると閲覧しているページがリスト化されます

・Inspectボタンをクリックすると、PCと同じようにDevToolsを使うことができます

この方法でConsoleのエラーも確認できます。

実機がなくても検証できたらいいのに…

iPhone過去バージョンなども揃えるのは難しくなりました。
実機がなくても検証が簡単にできたらいいのになぁ。
きっと世の中にはそんなツールもあるはずなので探して見ます。