2018/03/09更新

[フロントエンド] AndroidのChromeをPCからデバッグする

このエントリーをはてなブックマークに追加            

こんにちは、@yoheiMuneです。
スマホ向けWebサービスを開発していたら、Android端末での表示確認やデバッグが大変だった経験が誰しもあるのではないでしょうか?今日はAndroid ChromeをPCからデバッグする方法をブログに書きたいと思います。




目次




やりたいこと

開発したアプリケーションをAndroidのChromeブラウザで表示した場合に、CSSの確認や、ログの確認や、JSの実行などのデバッグ作業を高速に行いたい、というのが今回の目的です。
以降のステップを行うと、PCのChromeと同じようにディベロッパーツールからデバッグを行うことができます。



手順1:Android端末の開発者モードを有効化する

AndroidとPCをUSBで接続してデバッグを行います。そのためAndroidの「開発者向けオプション」をONにする必要があります。基本的には設定アプリ内のビルド番号を7回ほどタップすれば有効になりますが、Androidのバージョンによって微妙に違うので、詳しくは以下の公式ページをご確認ください。

端末の開発者向けオプションの設定 | Android Studio

その後に、開発者オプションのUSBデバッグを有効にします。
画像
これでAndroidをデバッグできる状態になりました。



手順2:Androidでサイトを表示する&USBで接続する

デバッグしたいページをAndroidのChromeで開いておきます。また、Android端末とPCをUSBケーブルで接続しておきます。



手順3:PCのChromeからAndroidへ接続する

続いて、PCのChromeのURLバーに、以下の内容を入力してエンターキーを押します。
chrome://inspect/#devices
そうすると、以下のような画面が表示されます。
画像
この中からデバッグしたいページの「inspect」をクリックすると、そのページのディベロッパーツールが起動します。
画像
あとは、PCのChromeと同じようにデバッグ作業を行うことができます。楽チンです。



参考資料

Google公式サイトにも説明があります。そちらもご確認ください。

Android 端末のリモート デバッグを行う  |  Tools for Web Developers  |  Google Developers



最後に

デバッグ環境が整っていると開発も早くスムーズにできて素敵ですよね。ぜひ活用したい機能です。

最後になりますが本ブログでは、フロントエンド、Node.js、Swift、Python、Linux、Java、インフラ、Go言語、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に!」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSTwitterをフォローして貰えたら嬉しいです ^ ^

最後までご覧頂きましてありがとうございました!





こんな記事もいかがですか?

[取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。
[フロントエンド] フロントエンドの入社試験99問!難しいですよ〜w。
[フロントエンド] Webページを表示するテストの際に、通信速度を3Gに制限して表示してみよう
[フロントエンド] スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。
[フロントエンド] Chrome 35 Beta の変更点。Touch制御、新しいJavaScript機能、プレフィックスなしのShadowDOM
[フロントエンド]複数アカウントでのテストには、Chromeのユーザー管理を使って、Cookieを切り替えると便利
[フロントエンド] Chrome36βが出た。変更点など。element.animate、HTML Imports、Object.observe、他。
RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。