Index
はじめに
kintone は JavaScript カスタマイズをすることによって、標準機能だけでは実現できない様々なことができるようになります。
そのための Tips も数多く用意しておりますが、初学者にとっては「何かよくわからないが、うまく動かない」など、
想定外のことが起こったときにどう対処したらいいかわからないという問題もあります。
cybozu developer network ではコミュニティを用意しておりますが、自身で解決できるようになるのが一番良いでしょう。
そこで今回は、JavaScript カスタマイズをよりしやすくするためのデバッグの方法をまとめました。
デバッグに関する記事は、動かない？そんな時はデバッグをしてみよう！入門編 や kintone カスタマイズの基本的なデバッグの流れを身につけよう などがあります。
この記事は、既存の記事の内容も含まれているのでデバックについて困ったときの解決の糸口にしていただくのがおすすめです。
また、デバッグに関する内容を随時アップデートしていきますので、JavaScript カスタマイズのお供としてぜひ参考にしてください。
前提知識
ブラウザーデベロッパーツールの基本的な使い方
デベロッパーツールとは、ブラウザーの現在の HTML や CSS、JavaScript の状態を検証したり、どのようなコードが動いているのかを確認するためのツールです。
かんたんな使い方は 動かない？そんな時はデバッグをしてみよう！入門編 にて説明しております。
その他検索すれば MDN などにも公開されておりますので必要に応じて参照ください。
デバッグ逆引き
xxx is not defined と表示される
変数定義がされていないなどの可能性があります。デベロッパーツールでブレークポイントを設定し、デバッグを試みてください。
参考（MDN）: ReferenceError: "x" is not defined
Tips 通りに試したのになぜか動かない
まずは下記を確認してみてください。
- 確認事項1. JavaScript のコード上のエラーが発生しているかもしれませんので、エラーが発生していないか を確認ください。
- 確認事項2. アプリの設定内容を反映 しているか確認ください。
- 確認事項3. 必要な JavaScript / CSS ファイルがアップロードされているか確認してください。順番も Tips 通りの指定が必要です。
- 確認事項4. フィールドコードに誤りがないか確認してください。
想定した順番にコードが動かない
kintone.api() などは非同期に処理が行われるため、想定した順番でコードが動かない場合があります。
Promise を利用することにより回避することが可能です。下記をご参照ください。
レコードの保存ができない
レコード追加画面の保存実行前イベントを利用しているとき、エラーがあると保存ができません。
エラーが発生していないか 確認してください。
kintone REST API を使ってデータを変更したいがうまくいかない
通信内容を確認し、送信内容が問題ないか、エラーがどのように返ってきているか確認してみてください。
デバッグの方法一覧
エラーを見る（JavaScript 実行時エラー）
デベロッパーツールを開き、コンソールタブを開きます。
そうすると、コード上でエラーが発生したときのエラーなどを確認できます。
次の画像に表示されているのは「Uncaught ReferenceError: xxx is not defined」というエラーです。
xxx という変数定義がないのに呼び出されたときのエラーです。
コンソールにログを出力する（console.log）
JavaScript のコード上で console.log() を利用することによって、変数の中身を参照できます。
console.log() で出力した内容はエラーを見ると同じように、コンソールタブを開いて確認できます。
適用されている JavaScript のコードを見る
デベロッパーツールを開き、ソースタブを開きます。
次に、左側から適用されているファイルを選ぶと、右側にそのソースコードが表示されます。
JavaScript ファイルを kintone にアップロードしている場合は、
top > [ドメイン].cybozu.com > k > api > js > download.do?xxxx...
というような場所にあります。
複数ファイルをアップロードしている場合などは分かりづらいですが、クリックすることでコードの中身が表示されますので、確認してみてください。
※ 左側に表示される項目数などは利用しているブラウザやプラグインなどで変わる場合があります。
ブレークポイントを設定する
適用されている JavaScript のコードを見るであるように、デベロッパーツールのソースタブで任意のソースコードを表示したままにします。
その上で任意の行をクリックすると、そこでコードの実行を一時停止することが可能です（ブレークポイントの設置）。
ブレークポイントを設置した後は、ブラウザのリロードなどでもう一度コードを実行させるとその位置で停止するようになります。
また、一時停止中はマウスをホバーすることでその変数の中身も確認できます。
必要がなくなったら解除してください。
通信内容を確認する（通信時エラーを確認する）
デベロッパーツールのネットワークタブを参照することで、送信・受信の内容を確認することができます。
また、エラーが起きたときもエラーのメッセージなどを確認することが可能ですので、kintone.api() などで API を呼び出すときに重宝します。
送信内容を確認する
GET メソッド（レコード取得など）のときと、POST / PUT / DELETE メソッド（レコード追加・編集など）のときは、
若干見方が変わるので注意してください。
GET メソッドのとき
任意の通信ログを選ぶ（kintone の API 通信なら record.json など） > 「ヘッダー」> 「全般」欄 >「リクエスト URL」を確認
POST / PUT / DELETE メソッドのとき
任意の通信ログを選ぶ > 「ペイロード」 > 「リクエストのペイロード」を確認
受信内容を確認する
- 任意の通信ログを選ぶ > 「プレビュー」 > レスポンス内容が表示される
※「レスポンス」を押すと整形されないプレーンな情報が表示されますので基本は「プレビュー」を確認することが多いです。
エラーを確認する
- 下記画像のように、通信ログが赤く表示されます。受信内容を閲覧するのと同様に「プレビュー」を見るとエラー内容を確認できます。
- 存在しない URL にリクエストしているなど場合によっては エラー内容が表示されない場合もあるのでご注意ください。
注意点
- ブラウザーはさまざまな通信を行っておりますので「すべて」を表示しようとするとログの流れが速いです。
API の内容だけを確認したい場合は上記画像のように「Fetch/XHR」を選んでください。 - kintone.proxy() の通信内容は隠蔽化されるのでご注意ください。
- 自身のコードだけでなく kintone 自体や他のライブラリなどが API 通信を行っている可能性もあるのでご注意ください。
- GET メソッド時であっても、パラメーターが長い場合は POST メソッド時などと同様「ペイロード」に表示されることがあります。
詳細は kintone REST API の共通仕様 > リクエストヘッダ をご確認ください。
記事に関するフィードバック
記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。