弊社で Android アプリデザイナに、Stetho の使い方をレクチャーしました。
その内容をまとめておきます。

要約

デザイナに Stetho が有効なアプリを渡して、Chrome から

現在のレイアウト設定値（ padding など）が読み取れる
文言などの変更ができる
実際のレイアウト xml ファイルを探すヒントを見つけて、Android Studio 上のレイアウトファイルを特定する

をレクチャーしたら、デザイナとの連携がものすごく捗った！

背景

デザイナのスキル
- HTML や CSS はよくわかってるデザイナ
- Android の dp, sp, xh, xxh とかは理解してる
- LinearLayout, FrameLayout, などのレイアウトルールは理解していない
- 「今表示されている画面のレイアウト xml ファイルってどれ？？」
- 「その画面って、開発内部的にはなんて言う画面名なの？」（レイアウト xml のファイル名を探したいが、名前の察しもつかない）
- Android Studio でプロジェクトを git から clone して開いて、実機での実行（だけ）はできる。
Sketch は使ってない

開発終盤のデザインレビューあるある
「ここの文言だけ変えたい」
　↓　変えました　つ apk
「はみ出すので、やっぱりこの文言に…」
　↓　変えました　つ apk
「うーん、フォントサイズがー」
　↓　変えました　つ apk
「目立たせたいので、太字に！」
　（以下略）つ apk,apk,apk,apk
『あのー、文言だけって言わなかったっけ？？』

Stetho とは？

Chrome Developer Tools を使って、Android 開発をすごく楽にしてくれる Facebook 製ライブラリ
本家サイト
できること
- 画面の要素の確認 ← これを使います
- ネットワーク通信の確認
- DB や SharedPreferencec（端末キャッシュ）の値の確認

便利ですね。
デザイン関係ないところでも重宝してます。

レクチャー内容

前提

Chrome Web ブラウザがインストールされている
Android 端末（シミュレータでも可）が USB デバッグ許可 になっている
アプリに Stetho が組み込まれている

Chrome Developer Tools 起動手順

Android 端末と PC を USB ケーブルで繋いでアプリを起動
Chrome を起動
chrome://inspect/#devices を表示する
inspect をクリックすると、↓のように Developer Tools が起動すれば OK

現在のレイアウト設定値（ padding など）を読み取る

Developer Tools の Elements タブを開く
xml を展開していくと、実機（この例では Genymotion ）の該当する View が網掛けになるので、値を調べたい View を見つけ出す
見つけ出したら、 Developer Tools の右ペインを見る
- padding-bottom, margin-top など、知りたい値をチェック（※単位は px なので注意！！）
- 右ペイン下のボックスで見てもいいですね。

文言などの変更

Developer Tools の xml ツリー上で、該当要素の変更したい属性をダブルクリックする
- 文字変更の場合は、text="○○○○○" の所
- 文字サイズなら、android:textSize="○○○○" の所
- …（想像しやすいので略）
変更したい値に変える
実機のアプリ上の値がちゃんと変わっている！