Android端末で、JavaScriptのデバックを行う場合
Chromeのdeveloperツールを使ってデバックを行います。

条件
端末が、Android 4.0以上であること

手順
JDKをインストール
Java SE Downloadページにアクセスし、JDKの下の『DOWNLOAD』ボタンをクリック
chrome01




















・Accept License Agreement にチェックを入れ、下のOS一覧から自分のOSの右のファイル名をクリックし、ダウンロードします。
※32bitOSの場合はx86、64bitOSの場合はx64を選択します。
chrome02























AndroidSDKの導入
PCにAndroidSDKを入れます。
Android Developpersにアクセスします。
・「DOWNLOAD FOR OTHER PLATFORM」をクリック

chrome03











・android-sdk_r22.0.5-windows.zipをクリック
chrome04












・「I have read and agree with the above terms and conditions」にチェックを入れ、
「Download android-sdk_r22.0.5-windows.zip」をクリック
chrome05












・zipファイル解凍をして、
android-sdk-windowsフォルダの中にある、SDK Manager.exeを起動します
※一瞬だけウィンドウが表示されいつまでたっても起動しない場合は、toolsフォルダの中の、android.batを起動してください。

・Android SDK Managerを起動し、SDKのインストールをします。
1.Toolsの中にある、「Android SDK Tools」、「Android SDK Platform-tools」を選択してください
2.Extrasの中にある、「Google USB Driver」も選択してください
install packagesボタンを押して、インストールします。

※adbはコマンドプロンプトで、コマンドとして使います。
chrome06










・環境変数Pathの編集
1.スタートボタン → コンピューターを右クリック → プロパティをクリック
2.「システムの詳細設定」
3.システムのプロパティが出るので、下の「環境変数」
4.システムの環境設定を下にスクロールし、Pathが現れたら選択し、編集をクリック
5.変数値の最後がセミコロン(;)で無い場合は半角でセミコロンを入力し、C:\android-sdk-windows\tools;C:\android-sdk-windows\platform-tools と入力し、OKをクリック
6.コマンドプロンプトを立ち上げ、adbと入力 長い文章が出ればOK

AndroidをUSBでPCと繋ぐ
USBで接続すると自動でandroidのデバイスを認識しますが、しない場合はAndroid端末のドライバをアップデートする必要があります(デバイスマネージャから、Androidのドライバをアップデートしますが、できない場合は、端末の機種名からインターネット検索してください)
コマンドプロンプトで、「adb device」と入力すると、以下のところにAndroid端末(デバイス)が認識されているか表示されます。
------------------
adb device
List of devices attached
XXXXXXXXXXXXXXXX device
------------------

Android端末で、「USBデバック」を有効にする
chrome07











Android端末で、Chromeの設定の「USBウェブデバックを有効化」を有効にする
chrome08






※Chromeが端末に入っていない場合は、インストールしてください

Androidでデバッグ対象のページを開く
Chromeでテストするページを開きます。

PC上で、コマンドプロンプトを起動し、以下を実行します。
adb forward tcp:9222 localabstract:chrome_devtools_remote

※9222はポート

PCでChromeを使ってデバッグする
1.PCでChromeを起動し、localhost:9222にアクセスします。
2.Androidで開いているページの一覧が表示されますので、デバッグ対象のページを選択します。
chrome09









3.Chromeで、developerツールの画面が表示され、デバッグが可能になります。
chrome10











adbがうまく動いていない、デバッグの調子が悪い場合
停止と起動をコマンドプロンプトで実行します。
# adbの停止
adb kill-server

# adbを起動

adb start-server
にほんブログ村 IT技術ブログ 在宅プログラマーへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ IT技術情報へ