kintone JavaScript カスタマイズデバッグまとめ

目次

はじめに

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

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

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

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

前提知識

ブラウザーデベロッパーツールの基本的な使い方

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

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

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

デバッグ逆引き

xxx is not defined と表示される

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

参考(MDN): ReferenceError: "x" is not defined (External link)

Tips どおりに試したのになぜか動かない

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

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

想定した順番にコードが動かない

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

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

レコードの保存ができない

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

kintone REST API を使ってデータを変更したいがうまくいかない

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

デバッグの方法一覧

エラーを見る(JavaScript 実行時エラー)

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

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

コンソールにログを出力する(console.log)

JavaScript のコード上で console.log() (External link) を利用することによって、変数の中身を参照できます。
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 の共通仕様」の「リクエストヘッダー」 を確認してください。