Google Home, Nest Hub向けにアクションを作ろう - 第10話: デバッグ

Interactive Canvasを兼ね備えたActions on Googleはコンポーネントが多くどこかで動作がうまく行かなかったときに原因を特定するのに最初混乱することが多いと思います。

そこで、私が普段やっているデバッグのしかたを紹介したいと思います。

Interactive Canvasのデバッグ

Interactive Canvasのデバッグ手順は以下のようにやっています。

１．まず自分の作ったHTML/CSSに単体のバグがないかを確認する
私はHTMLやCSSが得意ではないので、HTML自体にバグを作り込んでしまって挙動がおかしくなることがよくありました。

こういう時はアクションズシミュレーターを起動するよりも、public/index.htmlをブラウザで直接開いたほうが原因がわかります。index.htmlをブラウザで開き、ディベロッパーツールを開いて見ると単純な間違いに気づくことがあります。

２．ダミーデータを入れての検証
次にWebhookのHTMLResponseを介して渡されるデータのダミーを入れて、HTML/CSS/JSの挙動が正しいか確認してみます。↓のように、HTMLResponseから渡されるデータを使って呼ばれるonDataReceived関数を、ダミーデータ（アルパカのデータ）を入れて起動時に呼んでみることで、ブラウザを使ってデバッグができます。

public/index.htmlを開いてみて、正しくアルパカの情報が表示されていれば、フロントエンドのコードに問題がないことが検証できます。

３．ディプロイして確認してみる
この状態で、firebase deployを使ってコードをFirebase Hostingにディプロイし、ディプロイ後のサイトを直接開いてみることもできます。
ディプロイ後は下のようなURLでブラウザから直接public/index.htmlが開けるので、現在ディプロイされているフロントエンドコードに問題がないか、URLをブラウザで直接開いて検証することもできます。

https://<プロジェクトID>.firebaseapp.com

まれにディプロイのミスでフロントエンドがアップデートされていなかったというようなこともあるので、この方法で確認することができます。

Webhook側のデバッグ

次にWebhook側のデバッグのステップを見ていきましょう。Webhook側のデバッグは下のように２つの手順で行います。

１．Actions On GoogleシミューレーターのERROR/DEBUG/RESPONSEタブを見る

Actions on Googleシミュレーターには、Errors, DEBUG, RESPONSEのタブがあり、Webhook側でのエラーはこの３つのタブにそれぞれ何らかのエラーとして出てきます。この３つのタブの中身を読む癖をつけておくとどういうバグのときにどういうエラーメッセージがでて来るかわかるようになるので、こちらをまず確認してください。

２．Firebase ConsoleでFunctionsのログを見る
次のステップは、FirebaseのConsoleに移動し、Firebase Functionsを選択します。ここで、右側の画面にログというタブがあるのでこれを開きます。このログタブには、Webhook実行時のログがすべて出力されています。
エラーが起きた時は、下のように赤いアラートアイコンのついたログがあると思いますのでそれを見てみてください。

上の例ではindex.jsで、anyという変数にアクセスしたが、anyがundefinedだったということがわかります。anyというパラメーターが正しくWebhookに渡されていないことがわかりました。
このようにソースコードの何行目で問題がでているかまでわかるので、Webhookのデバッグにログの確認は欠かせません。

console.log()のアウトプットもこのログペーンに出力されるので、デバッグ中、見てみたい変数の内容がある場合は、console.logで出力し、ここで確認してみてください。

Actions on Google Simulatorをディベロッパーツールで見る

最後に、全てを結合して動かしてみている状態でActions on Google Simulatorを開いている状態でディベロッパーツールを開いてもエラーを見つけることができます。
シミュレーターといえどブラウザの上で動いているので、エラーが出た時はディベロッパーツールのConsoleに出てくるものもたくさんあります。

以上で、１０回に渡るActions on Googleのチュートリアルが終わりました。
お疲れ様でした！！！
最後まで呼んで頂きありがとうございます！

このブログに関する質問やActions on Googleの開発の相談はこちらから↓↓↓

@mizutory
mizutori@goldrushcomputing.com