概要

kintone×jsのデバッグを
「ブラウザのデベロッパーツール」ではなく、
vscodeでデバッグする環境を構築する

デバッグ環境を構築した理由

弊部では「kintone」にて
下記のような拡張機能をjavascriptで実現しておりますが、

• レコード保存時にslack通知
• 「日付」フィールドにて、5営業日後の日付しか受け付けない
• ステータスが更新された日時を「日時」フィールドに反映

javascriptのテスト方法が下記のように
「試作品作成→kintoneにjsアップ」を繰り返す…
というのが常套手段となっておりました

1. 試作品コード作成
2. javascriptアップロード
3. エラーが起きていたら修正
4. 再度javascriptアップロード

更に、変数の中身確認は全て
「console.log(変数)」と記載しておき、F12でコンソール画面を逐一確認しに行く…
という開発環境でした

js開発に慣れている先輩達にとっては問題ないのですが、
js初心者の私には、ブレークポイント張って処理手順(結果)を逐一確認出来ないと開発出来ない…
(処理の流れが全く理解出来ず、コピペエンジニアになるかも…と焦りました)

という事で、javascriptでもブレークポイントを使える開発環境を構築に着手致しました。

(windows版)kintone×jsデバッグ環境構築_方法

１、事前準備

１、下記サイトにアクセス

Visual Studio Code Live Server Extensionを使ってkintoneカスタマイズ開発効率をあげよう！

https://developer.cybozu.io/hc/ja/articles/360026502091

２、「mkcert-vX.X.X-windows-amd64.exe」をダウンロード

１、サイト内の「こちら」をクリック

２、最新版の「mkcert-vX.X.X-windows-amd64.exe」をダウンロード
※2022/07/05当時の最新版は1.44

３、「mkcert-vX.X.X-windows-amd64.exe」を実行

１、コマンドプロンプトを立ち上げる
※「コマンドプロンプト立ち上げ方は下記参照

• 左下の検索窓に「cmd」を入力
• 「最も一致する検索結果」に「コマンドプロンプト」が表示されているので、クリック

２、コマンドプロンプトにて下記順に実行
※コマンドプロンプトでの貼り付けは右クリック　(「Ctrl + v」ではないので注意)

• 「cd 【mkcert-vX.X.X-windows-amd64.exe】を格納したフォルダパス」を入力後、「Enter」キーを押す
  ※例「cd C:\Users\ユーザー名\Downloads」
• 「mkcert-vX.X.X-windows-amd64.exe -install」を入力し、「Enter」キーを押す
  ※赤文字「X.X.X」は実際の最新版の数字と合わせる事
• 「セキュリティ警告」が出るので「はい」をクリック

３、続けて、コマンドプロンプトにて下記順に実行
※コマンドプロンプトでの貼り付けは右クリック　(「Ctrl + v」ではないので注意)

1. 「mkcert-vX.X.X-windows-amd64.exe localhost 127.0.0.1 ::1」を入力後、
   「Enter」キーを押す
   ※赤文字「X.X.X」は実際の最新版の数字と合わせる事

４、【mkcert-vX.X.X-windows-amd64.exe】を格納したパスに下記ファイルが生成された事を確認

• localhost+2.pem
• localhost+2-key.pem

５、下記ファイルを「C:\Users\ユーザー名」直下に移動させる

• localhost+2.pem
• localhost+2-key.pem
• mkcert-vX.X.X-windows-amd64.exe

４、vscode設定

１、拡張機能「LiveServer」をインストールする

２、vscodeを再起動する
※再起動しないと「LiveServer」の設定画面が出てこない

３、画面左下の歯車マーク > 設定をクリック

４、下記手順で「Live Server」を設定する

• 「ワークスペース」をクリック
• 「設定の検索」に「live http」を入力して検索
• 「Live Server > Settings: Http」項目に下記設定
  「enable」→「true」
  「cert」→「C:\Users\ユーザー名\localhost+2.pem」
  「key」→「C:\Users\ユーザー名\localhost+2-key.pem」
  「passphrase」→ 何もしなくてOK

５、下記手順でデバッグ環境「launch.json」構築をする

• (実行とデバッグ)をクリック
• 歯車(launch.jsonを開く)をクリック
• 「launch.json」の中身を下記コードにコピペで差し替える
• 「launch.json」を上書き保存して閉じる

６、vscodeを再起動する

５、googleブラウザ起動用バッチ作成

１、下記「kintone_jsデバッグ用_chrome実行.zip」をダウンロードする

２、zipファイルを解凍し、「kintone_jsデバッグ用_chrome実行.bat」が存在している事を確認
※会社のセキュリティ関連でダウンロード出来ない方は、下記手順でバッチを作成して下さい。

• メモ帳を開く
• 下記プログラムをメモ帳に貼り付け
• メモ帳を「kintone_jsデバッグ用_chrome実行.txt」で保存
• 「kintone_jsデバッグ用_chrome実行.txt」の拡張子を「bat」に変更

kintone×jsデバッグ手順

１、事前準備

１、googleブラウザを全て閉じる
※閉じないとデバッグモードがブラウザに反映されないので注意

２、「kintone_jsデバッグ用_chrome実行.bat」をダブルクリックする

３、新たにgoogleブラウザが開かれた事を確認

４、vscodeにて右下の「Go Live」をクリック

５、vscodeにて右下が「Port：5500」になっている事を確認
※「Go Live」のままではデバッグ出来ません

６、googleブラウザに開発環境の全フォルダ、ファイルが表示されている事を確認

７、デバッグしたいjavascriptを格納しているフォルダに移動する
※フォルダをクリックすると、フォルダ内にアクセス出来ます
※筆者は「js」フォルダ内に格納しているので、「js」フォルダをクリック

８、デバッグしたいjavascriptファイルをクリックし、URLをコピーする
※URL内に日本語が含まれているとデバッグ出来ないので注意

９、下記手順でjavascriptをkintoneアプリに反映

• 「URL指定で追加」をクリック
• 先程コピーしたURLを貼り付ける
• 「保存」をクリック
• 「アプリを更新」をクリック

２、デバッグ開始

１、vscodeにて何のデバッグをするのか？を選ぶ
※kintoneをデバッグしたい場合は「kintone」を選ぶ

２、「kintone」を選んだら実行ボタン(▷)をクリック

３、ブレークポイントを好きな行に設定し、kintoneでjs実行のトリガーを踏んでデバッグを開始する
※添付画像のjsでは「保存ボタンを押した時」のイベントの為、保存ボタンを押す

３、デバッグのやり方

ほぼ、下記3個の機能しか使いません！

１、次のブレークポイントまで処理を続行する

２、修正したjsをkintoneに反映させる
※「修正したコードが反映されていない」「デバッグが開始されない！」等は再起動で直ります

３、デバッグを中止する

【おまけ】フォームブリッジ×jsデバッグ方法

何をデバッグしたいのか？にて「FormBridge」を選ぶだけです！
※それ以外はkintoneと同じ

参考URL

【kintone】VSCodeから直接操作でデバッグ効率アップ

https://qiita.com/edamame-peperoncino/items/c3e556997ff4bda56e5b

Visual Studio Code Live Server Extensionを使ってkintoneカスタマイズ開発効率をあげよう！

https://developer.cybozu.io/hc/ja/articles/360026502091

感想

デバッグ環境を整えた事で、
kintone×javascriptの処理の流れも理解出来て
下記等の複雑なロジックも組めるようになってきました

先輩社員から「複雑なjs作成、調査はゆーしゃんに任せます！」
と言われるくらいには技術力が向上してきました

編集履歴

2022/07/09　新規作成
2022/07/24　更新：「URL内に日本語が含まれているとデバッグ出来ない」注意書きを追加