１）概要：この記事で学べることこの記事では、Bubbleのデバッカーの使い方を学びます。デバッカーとは処理の流れや表示データを見れるようにして問題がある箇所を見つけやすくするツールです。実装を進めていくと、なぜかデータが表示されないとか、なぜかデータが更新されないといったことが発生します。その際の原因分析にデバッカーが有効です。２ー１）使い方：デバッカーの表示デバッカーはどこにどうやれば表示されるのかPreviewで画面を表示した際に画面の下部に表示されます。URLに「?debug_mode=true」がついているときにデバッカーが表示されるので、画面下部のデザインがデバッカーに隠れて見えない場合などには、このパラメータを消すことデバッカーも消えます。（右端の３つ点がある部分から「Disable Debugger Mode」を選択しても消えます。）２−２）使い方：デバッカーの操作方法デバッカーの左側項目：「Normal」、「Slow」、「Step-by-Step」左側に「Normal」、「Slow」、「Step-by-Step」とありますがこれはワークフローを１つ１つ見ていく際の設定のことです。「Normal」だとワークフローは見ずに進みますが、それ以外の２つの場合、例えばボタンを押した後のワークフローを１つずつ見れます。「Slow」だと数秒ごとにワークフローが進んでいき、「Step-by-Step」だとワークフローのアクションを１つ１つ見て、Run nextをするまで次に進みません。デバッカーの右側項目：「Inspect」「Inspect」をクリックした後に、データを見たいエレメントをクリックするとどこからデータをデータを取得してきているのか分かります。例えば、下記の画面にて名前をどこから取得しているのか分からないとか、正しく取得していないということが起こった場合に、Textで表示しているリンクの部分をクリックすると取得元情報が出てきます。「ユーザー」というのは固定文言で、名前に関しては「Current User」の名前というデータから引っ張ってきているのがこれを見ることでわかります。３）実践編：Make changes to thingでデータが更新できない時は？実装時によくあるケース今までいただいた質問の中で多かったものは、「Make changes to thing」をしているのにも関わらずデータが更新できないというものです。これもデバッカーを使うことで調査できます。結論から先に述べると、原因としてはThings to Changeに何もデータが設定されてない（emptyの状態）でこの処理を実施して更新がされないというケースが最も多いです。では、どうやってそれを見つけるのか例としてみていきます。検証方法例えばメモの文章が更新されないケースを見てみましょう。Memoというテーブルを作りデータのテキストに1件だけ「更新前」というデータを入れます。そのうえでデータベースの値が表示できるようにして、テキストの入力欄と更新ボタンを配置します。画面上はこんな感じです。更新ボタンを押した際のワークフローがわざとうまくいかくなるように、Thing to changeの部分の条件にテキスト is emptyとして更新対象のデータがない状況を作ります。これでワークフローを見てみるとThings to Changeにemptyが設定しており、更新対象が存在しなかったことが分かります。そのあとはなぜ更新対象が存在しないのかなとワークフローの実装を見ていくことで、変な条件を設定していたからだと気づくことができます。そのほかにもOnly Whenの条件が間違っていたなどもデバッカーで分かります。なぜか実装した処理がうまくいかないなーとなった場合には利用してみてください。