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

Archives Details

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

Android

2014.07.28

この記事は最終更新日から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」のリンクをクリックすると、

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

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

ではではー。

Comment

Related Article

Google PlayアプリをPCで。Androidエミュレーター「Genymotion」の設定方法

2016.07.02

Android 超爆速エミュレータ Genymotionを使う。Android Studio導入。

2015.05.24

Android開発はやっぱりAndroid Studioですかねー。

2015.05.19

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

2014.07.28

【再掲】PCやMacで Androidアプリを動かす「BlueStacks」使い方

2014.02.19

HTC J One HTL22 を購入!!その結果。。。 UAとか、Webビューとか、スマートパスとかの話

2013.06.17

Android セキュリティー警告 証明書 エラー googleplayに接続できない場合

2013.06.11

AndroidでrotateX等が適応されない時の代替え CSS3アニメ処理

2012.02.25

9.png Android NINE Patch 画像作成(draw9patch)

2011.10.29

スマートフォン JavaScript ユーザーエージェント振分け

2011.08.18

CATEGORY LIST

LATEST NEWS

PythonでGUIアプリ開発「PyQt」を使った感想

Python

2019.07.18

「二段階認証?」という方も 5分で覚える パスワードレス WebAuthnのまとめ

JavaScript

2019.07.07

上級者向け JavaScript 問題集 「javascript-questions」日本語翻訳担当してます。

JavaScript

2019.06.22

Wordpress サイトで、長時間 500 Internal Server Error発生。解決した方法とは。

WordPress

2019.06.18

Ubuntu 18.04 LTSで OpenGL開発

ubuntu

2019.05.20

MacOS Mojave (10.14.4)の Xcode に、過去のMacOSのSDKをインストール

C++

2019.05.19

クローンソフトの「EaseUS Disk Copy」を使って、OSのバックアップを取ってみた。

tool

2019.05.06

Rails5 gemでmysql2が インストールできない

Ruby

2019.05.05

平成最後のお買い物!!「Logicool MX Master 2 Wireless Mouse」と「K780 マルチデバイス BLUETOOTH® キーボード」で快適PC生活。

ubuntu

2019.04.27

Amazon 87時間のビックセール タイムセール祭りで購入したもの

イベント

2019.04.23

Androidに Linuxを簡単にインストールするアプリ「UserLAnd」

Linux

2019.04.16

SPAサイトでの認証認可 JWT✗Rails5✗Nuxt.js

JavaScript

2019.03.24

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US