このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Android端末 ADBコマンド webインスペクタのデバッグ方法

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

AndroidSDKをインストールするとADBを使用することが出来ます。

インストール方法は以下より

Android SDK インストール方法

ADBコマンド

パスを通してandroidコマンドとadbコマンドを使えるようにしておきましょう。

例:

vi .bash_profile

export PATH=$PATH:/Users/takayamadaisuke/Documents/android-sdk-mac_x86/platform-tools

 端末側でUSBデバッグをオン

下記の様に進み 設定をONにしましょう。
– [設定] -> [アプリケーション] ->[開発者向けオプション] -> [USBデバッグ]

または、

– [設定] ->[開発者向けオプション] -> [USBデバッグ]

端末を認識させる

端末をUSBケーブルでPCと接続します。

adb devices

と打てば接続されている端末が認識されます。

端末を認識されないとき
echo "0x0bb4" >> ~/.android/adb_usb.ini

といった感じで、
USB VENDOR IDをabs_usb.ini に追加する。

主要なバンドルIDのリストは以下から。

adb logcat

でログを出力することができます。

webインスペクタ

webインスペクタでのデバッグ方法はまず、Androidでデバッグ対象のページを開きます。

abdコマンド

adb forward tcp:9222 local abstract:chrome_devtools_remote

を入力。

pcのchromeで localhost:9222にアクセスします。

こんな感じでAndoroid端末で開いているページが表示するので、クリックしてwebインスペクタで確認することが出来ます。

 もっと簡単に

とここまで紹介しましたがGoogle Chromeのdeveloper toolで「ABD」というプラグインがありまして、

このプラグインをGoogle Chromにインストールすると、もっと簡単に使用することができます。

chrome developer tool「ABD」

https://developers.google.com/chrome-developer-tools

インストールして使用するとアイコンが付与されますので、クリック。

接続状態やAndroid端末のChromeで表示しているページ等の情報が表示されていますので、

表示しているページの「inspect」のリンクをクリックすると、

インスペクタが起動し、デバッグすることが出来ます。

端末でもどのような状態かも確認できます。

ではではー。

Related Article

LATEST NEWS

RANKING

ARCHIVE

SPONSOR

現在、掲載募集中です。



Links

現在、掲載募集中です。



About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。