スマホのサイト作っててPCブラウザのUA偽装じゃなくて実機で見たいってことはよくある。
実機で見ながらHTMLとかCSSをいじって確認したいと思ってスマホで開発者ツール的なのが無いかと探したらあった。

あったけど試したらうまくいかなくて紆余曲折して最終的に__めっちゃ簡単__だったのでメモ。

やりたいこと

PCブラウザのChrome開発者ツールみたいなものをスマホのブラウザでもやる

環境

PC: Windows 7 64bit
PC 版 Chrome: ver. 41
Android 端末: SO-03F / Android 4.4.2
Android 版 Chrome: ver. 40

準備

Android の USB デバッグを許可する
- 設定＞開発者向けオプション＞ USBデバッグ にチェック
- 開発者向けオプションが表示されていなければ、 設定＞端末情報＞ビルド番号 を連打して表示させる
PC に Google USB Driver をインストールする
- Windows の場合のみ必要らしい
- Android 開発をしている人なら既に入ってるでしょう
- SDK Manager があるならそこからもインストールできる

手順

PC と Android をUSBケーブルでつないで Android が USB デバッグモードになることを確認
- Android 端末で許可を求められたら許可する
PC の Chrome のアドレスバーに以下を入力
- chrome://inspect/#devices
Devices の下にある Discover USB devices にチェックを入れる
Android の Chrome でデバッグしたいページを開く
PC の Chrome に Android で表示しているサイトURLが表示され、下にある inspect をクリックするとお馴染みの開発者ツールが表示される

これでいつもの開発者ツールのようにデバッグ作業を行える。
Elements では選択要素のハイライトもされる。

Elements だけでなく Network や Script のタブもあるので PC での作業となんら変わらず、2で開いたページでタブの切替えやリロード、新規タブを開くなどもできるので使い勝手も悪くない。（いまのところの所感）

これでスマホサイトのデバッグも捗りそうだ。
PC を使わないでスマホだけで出来る方法もあったらなぁ（機能は少なくてもいいけど）

（おまけ）紆余曲折の内容

これをやるのに調査して見つかった方法はこの3つ

Android SDK で ADB コマンドを使う
PC の Chrome に拡張機能を入れる
Chrome の標準機能を使う

最初に1を見つけて SDK やら何やら入れてパスを通して・・・とやってはみたもののうまくいかず、開発者ツールらしきものは開いたがソースが表示されずに真っ白な画面になってしまった。
「Android の Chrome の 設定＞デベロッパーツール＞ USBウェブでバッグを有効化 にチェックいれる」
という記事を見つけたものの、そもそもデベロッパーツールの項目がなかった。
（Android の開発者向けオプションと同じなのか？と思い色々連打したりもした笑）

そしてさらに調べた結果2と3を発見。
3が簡単そうだし試してみて成功したので2は試していない。

もしかしたら3のやり方ができたから1の方法はできなくなった（デベロッパーツールの項目も無くなった）のか？