kintoneはJavaScriptカスタマイズをすることによって、標準機能だけでは実現できないさまざまなことができます。
そのためのTipsも数多く用意していますが、初学者にとっては「何かよくわからないけど、うまく動かない」など、想定外のことが起こったときにどう対処したらいいかわからないという問題もあります。

cybozu developer networkでは コミュニティ を用意していますが、自身で解決できるようになるのが一番よいでしょう。
そこで今回は、JavaScriptカスタマイズをよりしやすくするためのデバッグの方法をまとめました。

デバッグに関する記事は、 動かない？そんな時はデバッグをしてみよう！入門編や kintone カスタマイズの基本的なデバッグの流れを身につけようなどがあります。
この記事は、既存の記事の内容も含まれているのでデバックについて困ったときの解決の糸口にしていただくのがおすすめです。

また、デバッグに関する内容を随時アップデートしていきますので、JavaScriptカスタマイズのお供としてぜひ参考にしてください。

デベロッパーツールとは、ブラウザーの現在のHTMLやCSS、JavaScriptの状態を検証したり、どのようなコードが動いているのかを確認するためのツールです。

動かない？そんな時はデバッグをしてみよう！入門編にて簡単な使い方を説明しています。

その他検索すれば ブラウザーの開発者ツールとは？ などMDNの記事も公開されていますので必要に応じて参照ください。

変数定義がされていないなどの可能性があります。
デベロッパーツールで ブレークポイントを設定し、デバッグを試みてください。

参考（MDN）: ReferenceError: "x" is not defined

まずは次の確認事項を確認してみてください。

1. JavaScriptのコード上のエラーが発生しているかもしれませんので、 エラーが発生していないかを確認ください。
2. アプリの設定内容を反映する しているか確認ください。
3. JavaScript や CSS でアプリをカスタマイズする を参考に、必要なJavaScript / CSSファイルがアップロードされているか確認してください。
   順番も Tips どおりに指定してください。
4. フィールドコード に誤りがないか確認してください。

kintone.api()などは非同期に処理が行われるため、コードは想定した順番で動かない場合があります。

Promiseを利用することにより回避できます。
kintone における Promise の書き方の基本を参照してください。

レコード追加画面で保存するときのイベントを利用しているとき、エラーがあると保存できません。
エラーが発生していないか確認してください。

通信内容を確認し、送信内容が問題ないか、エラーがどのように返ってきているか確認してみてください。

デベロッパーツールを開き、コンソールタブを開きます。
そうすると、コード上でエラーが発生したときのエラーなどを確認できます。

次の画像に表示されているのは「Uncaught ReferenceError: xxx is not defined」というエラーです。
xxxという変数定義がないのに呼び出されたときのエラーです。

JavaScriptのコード上で console.log() を利用することによって、変数の中身を参照できます。
console.log()で出力した内容は エラーを見ると同じように、コンソールタブを開いて確認できます。

デベロッパーツールを開き、ソースタブを開きます。

次に、左側から適用されているファイルを選ぶと、右側にそのソースコードが表示されます。

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 の共通仕様」の「リクエストヘッダー」を確認してください。