皆さんこんにちは。今回はプレビュー画面で使用できる、debugger（デバッガー）の使い方について説明していきます。これが分かると、アプリの開発がとても効率的にできるようになりますのでぜひ覚えていきましょう！
デバッガーとは？
Bubbleでアプリを作成してプレビューで確認してみようというときに、一度は「これ何だろう？」と思ったことはあるのではないでしょうか？
そうです、ページの下の方に出てくる「Debugger」と「Inspect」というボタン、これがデバッガーと呼んでいるものです。
さらにURLを見ると、末尾に「debug_mode=true」という文字列がついていますよね。これが付いていると、デバッガーが使えるモードになっているということを表しています
「よく分からないけど、とりあえずデバッガーがなくてもアプリは動かせるからいいか～」と思っているそこのあなた、とってももったいないです！
デバッガーとは名前のとおり、アプリ等のバグを取り除くのをサポートしてくれるツールなのです。デバッガーの機能を使いこなせるようになると、アプリが思った動きにならないときに簡単に原因を探ることができるかもしれませんよ。
それでは早速その機能と使い方について説明していきます。
※デバッガーは現在、パソコンでのみ使用できる機能となっています。スマートフォンなどの端末では操作できませんのでご注意ください。
デバッガーの機能
Bubbleで用意されている主な機能は2つです。
- ワークフローの動きを確認する機能
- エレメントの設定値や条件を確認する機能
簡単なアプリを作成して動かしながら、それぞれ使い方を詳しく見ていきましょう。
事前準備
まずは図のようなエレメントを配置しましょう。
スタートのButtonが押されると「スタートボタンを押しました」のTextを表示し、リセットのButtonが押されると、このTextを非表示にするという単純なアプリで確認します。
デバッガーの機能の確認のため、「スタートボタンを押しました」のTextは初期状態を非表示（This element is visible on page loadのチェックを外す）にしておき、ワークフローの中で表示させるようにします。スタートとリセットのButtonが連続で押されたときに表示するAlertメッセージも配置しておきます。
また、Textが表示されているかどうかを判定するためのCustom stateを作成しておきます。「isVisible」という名前で、State typeは「yes/no」、ロード時は非表示にしたいのでデフォルトを「no」に設定します。
次にワークフローです。図の通り
- スタートボタン：メッセージが表示されていないとき（isVisible = no）は「スタートボタンを押しました」のメッセージを表示→表示されているとき（isVisible = yes）はアラートを表示→isVisible = noならyesに置き換え
- リセットボタン：メッセージが表示されているとき（isVisible = yes）は「スタートボタンを押しました」のメッセージを非表示→表示されていないとき（isVisible = no）はアラートを表示→isVisible = yesならnoに置き換え
として設定してみてください。
これで準備は完了です！
ワークフローの動きを確認する機能の確認
Previewボタンを押して、初めにワークフローのデバッガーを動かしてみましょう。ワークフローのデバッガーには「Normal」「Slow」「Step-by-step」の3つがあり、それぞれ以下の通りに動きます。
Normal：ワークフローが途中で止まることなく、最後のステップまで自動で動く
Slow：ワークフロー内でステップ間を1秒間隔で自動で動く
Step-by-step：ワークフローの1つのステップずつ手動で動かす
バグを見つけたいときは、原因となるステップを探すために細かい部分まで確認する必要があると思うので、Step-by-stepで1つずつアクションを確認するのがよいでしょう。
それではDebuggerのモードを「Step-by-step」に設定し、スタートボタンを押します。
すると画面の下部からデバッガーが表示されるようになりました。「Run next」のボタンを押すごとに、1つずつワークフローのステップが進むようになります。（一気に進めてしまいたいときは、RunまたはRun slowを選択してください）
次のステップでは条件を設定していましたね。メッセージが表示されていないとき、つまりisVisible = noの場合のみ、メッセージをShowする、としています。このOnly whenで設定した内容も赤枠のようにデバッガーに表示されています。
ここで注目したいのがこのOnly whenの色です。このOnly whenの色が緑のときは条件を満たす、赤のときは条件を満たさない状態であることを表しています。
今回はページロード状態でしたので、isVisible = no、つまり緑になっており、条件を満たすためメッセージを表示させるステップが動きます。
次のステップに進みましょう。次はisVisible = yesのときのみに動くStepとしているのでOnly whenの文字は赤色になっていますね。
同様にして最後までステップを進めると、デバッガーの表示は消え、スタートボタンを押したときのワークフローが終わった状態となりました。
リセットボタンを押したときや、連続でボタンを押したときの動きなども同様にして確認してみましょう。
このように、ワークフローのデバッガーではステップごとの動きを確認することができるため、アプリの挙動確認の際に意図しない分岐に入っていないかどうかをチェックするときに活用してみるとよいでしょう。
エレメントの設定値や条件の確認する機能の確認
次はエレメントの設定値などを確認できる、Inspectボタンの使い方です。もう一度Previewボタンを押し、画面を開いたら「Inspect」ボタンを押してみます。
すると「Inspect」ボタンは「Stop」ボタンに変わり、プルダウンが開けるようになります。このプルダウンの中には、ページにあらかじめ設定している全てのエレメントが表示されています。非表示設定になっているものは、エレメント名の末尾に「(invisible)」と付与されています。
まずは例として、Custom stateの値の変化を確認していきましょう。画面上で確認したいエレメントをクリックするか、プルダウンからエレメントを選択します。Custom stateはページ（例ではwork-flow-debuggerというページ名にしています）に設定しているので、今回は「work-flow-debugger」というエレメントを選択しましょう。プルダウンは検索機能もついています。
すると左側にCustom stateの値が表示され、確認できるようになりました。ページロード時の初期状態ですので、isVisible = noとなっていますね。
Custom stateの他にも、エレメントのAppearanceで設定したサイズや色やConditionalsに設定した条件など、すべての設定内容がこれで確認できます。
それではスタートボタンを押したときにisVisibleの値が変わるのを確認していきましょう。
Inspectのモードの状態ではボタンを押せないようになっているので、いったんStopボタンを押して元の画面に戻してから、スタートボタンを押しましょう。（今回はStepごとには確認しないので、ワークフローのデバッガーはNormalに戻してもよいです）
スタートボタンを押した後の状態です。Inspectボタンを押します。
左側に、work-flow-debuggerのエレメントの中身が表示されていますが、これは先ほど表示ページロードの際の状態の値が残っているだけですので、画面上のエレメントをクリックするかプルダウンから選択し直しましょう。
すると、isVisibleの値がyesに変わっていることがわかりました。
先ほど紹介したワークフローのデバッガーと組み合わせて使うと、例えばおかしな分岐に入っているときに、分岐の条件となっている値がどのように変化しているのかをInspectの機能で確認する、などといった活用ができるでしょう！
その他の使える機能
今回紹介したデバッガーの応用として、他にも使える便利な機能を少しだけ紹介します。
ブレークポイント
ワークフローのデバッガーですが、ワークフローの途中までは進めてしまいたい、というときに一つ一つStep-by-stepで進めるのは大変ですよね？こんなときに便利なのがブレークポイントの機能です。
ブレークポイントをあるStepに設定すると、Normalモードで進めても、ブレークポイントが設定されたStepの前でいったん止まるようになります。
例として、先ほどのアプリのスタートボタンを押した際のワークフローで、Step2にブレークポイントを置いてみましょう。
プレビューを開き、Normalモードの状態でスタートボタンを押します。すると、きちんとブレークポイントを設定したStep2の前でワークフローが止まることが分かります。
長くて複雑なワークフローで動きを確認するときにはぜひ使ってみましょう。
Dynamic Expressionの値の解析
アプリで値を表示する際など、Dynamic dataを使うことはよくあると思います。このDynamic dataの中身に実際どのような値が設定されているのかを確認したいときに便利なのがこちらの機能です。具体的に使い方を見ていきましょう。
以下のアプリではRepeating Groupを用意し、セルの中にTextを配置します。Textの値はdynamic dataとして、Userのデータベースに登録されたユーザー名（UserName）を検索して、1ユーザーずつ表示させるように作成しています。
Userのデータベースの中身は以下のとおり登録しておきます。
ここまで設定したら、プレビューを開きInspectボタンを押しましょう。
今回はdynamic dataの確認ですので、例として1つ目のセルの「テストユーザー」と表示されたTextのエレメントを選択しましょう。
すると左下に表示されたTextの値の「テストユーザー」がクリックできる状態となっています。
テストユーザーと書かれた部分（dynamic dataで設定されたTextの値）をクリックすると、右側にEvaluatorが現れ、値の元となったdynamic dataを確認することができます。
上図では「Current cell's User」と「's UserName」に分かれてクリックできるようになっており、「Current cell's User」を選択すると登録されているUserのすべての項目の値が、「's UserName」を選択するとUserNameのみの項目の値が見られます。
dynamic dataで思ったとおりの値が取得できないときなどに使ってみるとよいでしょう。
まとめ
デバッガーを使ってみると、今までよりも簡単にBubbleのテストや挙動確認ができるようになるはずです！ぜひ今日から早速使い始めてみましょう！
