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