Be simple

”当たり前”が誰かのためになる

Stethoの使い方(初級編)

はじめに

みなさん、こんにちは!

お久しぶりです。完全に口だけになっておりました、zukkeyです。

 

ようやくブログ書くモチベーションが上がったので、書いていきます。

会社のブログも書かなきゃならんので、今日は軽くやってみた系です。

 

今日はStethoを個人アプリにも導入したので、その際のメモになります。

 

Stethoとは?

Fasebookが出しているライブラリで、Androidでは通信をデバッグしてChromeで見るのによく使います。

 

github.com

 

多分、大体どこのアプリにも入っていると思います。

他にも通信をデバッグするのには、Charlesを使ったりしますがそれはまた別のお話。

(というより、僕が勉強中なだけ)

www.charlesproxy.com

 

で、今日はStethoの導入がとても簡単なのでやっていきます。

 

導入の仕方

appのgradleの中に以下を記入してください!

 

// stetho
compile 'com.facebook.stetho:stetho:1.5.0'

 

Retorofitを用いる場合は、Intercepterをかませる必要がありますので、下記も必要になります。

compile 'com.facebook.stetho:stetho-okhttp3:1.5.0'

 

2018年6月現在、最新版は1.5.0です。

 

Stethoを使うためには、Applicationを継承したクラスで初期化する必要があります。

 

Applicationクラスでの初期化

僕のアプリの場合は下記のようにしています。

class MakepuraApplication : Application() {

override fun onCreate() {
super.onCreate()

Stetho.initialize(
Stetho.newInitializerBuilder(this)
.enableDumpapp(Stetho.defaultDumperPluginsProvider(this))
.enableWebKitInspector(Stetho.defaultInspectorModulesProvider(this))
.build()
)
}
}

 

Qiitaにすでに先人がいたので参考にしました。

enableDumpappはアプリをダンプさせるのに必要みたいです。

enableWebLitInspectorはChrome DebugToolsのデバッグを有効にするのに必要です。

 

qiita.com

 

初期化が終わったらAndroidManifestにも忘れずに

githubのページを見ていただくと中段あたりに書かれてありますが、AndroidManifestのapplicationタグの中に自分のApplicationを継承したクラス名を書くのを忘れないでください。

これをやらないと、うまく動作しません。

僕の場合は次の通りに記載しています。

<application
android:name=".MakepuraApplication">

 

これで準備が整いました!

 

さっそくデバッグしてみる

アプリをビルドして立ち上げた状態で、下記のようにChromeに検索窓にchrome://inspect/#devicesと入れます。

 

f:id:rozkey59:20180618230424p:plain

 

そうすると次のような画面が出てきます。

f:id:rozkey59:20180618230542p:plain

inspectという青い部分をクリックすると、下記の画面が出てきます。

f:id:rozkey59:20180618230707p:plain

これで、アプリのレイアウトの構成を見ることができたり、Retrofitにかませれば、アプリの通信を見ることができます。

 

もし、うまくいってなかったり、アプリを立ち上げていないと下記のようになって出てきません。

f:id:rozkey59:20180618230756p:plain

inspectが表示されていない時は、何かしら問題があるときです。

初期化しているか、AndroidManifestに追加しているかなど確認してみましょう。

 

もう一つ、chrome://inspect/#devicesと入れなくてもStethoデバッグをできます。

 

f:id:rozkey59:20180618230932p:plain

 

新しいタブを開いて右クリックを押すと検証というのが出てきます。Ctrl + Shift + Iでもいけます。

 

そうすると下記のような画面が出てきます。

f:id:rozkey59:20180618231026p:plain

 

この時に右上ある×ボタンの左の3つの点があるとこをクリックすると、下記のような画面が出てきます。

f:id:rozkey59:20180618231121p:plain

 

More Tools > Remote Devicesを選択することで、次の画面に行けます。

f:id:rozkey59:20180618231202p:plain

下部の方にDevicesの端末名が表示されたところでInspectを選択することでもStethoデバッグの画面を開くことができます。

 

おわりに

今日は、Stethoの導入の仕方の紹介でした。

小ネタになりましたが引き続き、なるべく更新頻度を落とさずに頑張っていきます!