kintoneのJSカスタマイズをデバッグする方法

Featured Image(Photo) by Christian Wiediger on Unsplash

はじめに

config-helperにプルリクエストを投げました。その時の簡易的な動作確認方法をメモします。開発者コンソール上ではちょっとな・・・Visual Studio Codeでやりたいな、という人におすすめです。

プルリクエストの内容

config-helperではアプリのフィールド情報を取得できますが、テーブルのフィールドかどうかが判断できません。これを判断できるようにしました。

手順

1. アプリの作成

kintoneのアプリを作成します。(今回はフォームにテーブルが必要なので用意しました)JSカスタマイズにkintone-config-helper.jsを適用します。

2. kintone-config-helperの実行

開発者コンソールで以下のコマンドが動作することを確認します。

KintoneConfigHelper.getFields().then(console.log);

こんな感じになるはずです。

3. ローカルオーバーライドを設定

Google Chromeのローカルオーバーライドを使います。ローカルオーバーライドの詳細についてはこちらを参考にしてください。

JSカスタマイズに設定したkintone-config-helper.jsをローカルオーバーライドします。初めてローカルオーバーライドを使う場合は開発者コンソールで、Sourcesタブ、Overridesタブを選択します。Select folder for overridesをクリックして、適当なローカルフォルダを選択します。

開発者コンソールでkintone-config-helper.jsを探します。(kintoneの仕様でファイル名はdownload.do?…となるようです)右クリック、「Save for overrides」を選択します。

4. Visual Studio CodeでJSファイルとして認識

ローカルオーバーライドしたファイルをVisual Studio Codeで開きます。そのままではJSファイルとして認識されません。Visual Studio Codeの設定に以下を追記すると認識してくれます。

    "files.associations": {
        "download.do*": "javascript"
    }

5. 動作確認

例えばconsole.log()を追加して保存します。

画面をリロードして、開発者コンソールでKintoneConfigHelperを再実行するとconsole.log()が反映されています。

この記事を書いた人