はじめに
以下のページを参考にしましたが、JavaScript が初めての人には読み解くのが難しいと思われますので、なるべく分かり易く書きたいと思います。
kintone の JS カスタマイズを VSCode でデバッグ
Visual Studio Code Live Server Extensionを使ってkintoneカスタマイズ開発効率をあげよう！
kintone マニュアル
kintone JavaScript API
https://cybozu.dev/ja/kintone/docs/js-api/
イベント一覧
kintone APIドキュメント
https://cybozu.dev/ja/kintone/docs/
コーディングガイドライン、kintone コーディングガイドラインに、テキストファイルは UTF-8（BOMなし）を使用するように記載されている
はじめようkintone API
https://cybozu.dev/ja/tutorials/hello-kinapi/
カスタマイズTips
https://cybozu.dev/ja/kintone/tips/development/customize/
パスワード認証 API
https://cybozu.dev/ja/kintone/docs/rest-api/overview/authentication/#password
Top > チュートリアル > はじめようkintone API > カスタマイズファイルを適用してみよう
https://cybozu.dev/ja/tutorials/hello-kinapi/first-step/
必要なソフトウェア
VSCode の左サイドバーの［拡張機能］で Live Server を追加します。
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
ローカルPC用の証明書と秘密鍵を作成するために mkcert ツールを使用します。
https://github.com/FiloSottile/mkcert/releases/tag/v1.4.4
１．mkcert-v1.4.4-windows-amd64.exe をダウンロードし、任意のフォルダに保存します
２．コマンドプロンプトで以下を実行します
mkcert-v1.4.4-windows-amd64.exe -install
いくつかメッセージが表示されますが、「OK」ボタンをクリックして進めます。管理者権限でログインを求めるメッセージが表示される場合がありますが、無視して進めて問題ありません。
３．コマンドプロンプトで以下を実行します
mkcert-v1.4.4-windows-amd64.exe localhost 127.0.0.1 ::1
localhost+2.pem と localhost+2-key.pem の2つのファイルが作成されます。これらのファイルを、他のアプリからも参照できるフォルダに移動します。
私の場合は以下のフォルダに移動しました。
C:\Users\(ユーザー名)\AppData\Roaming\mkcert\localhost+2.pem
C:\Users\(ユーザー名)\AppData\Roaming\mkcert\localhost+2-key.pem
VSCode の Live Server の設定に、これらのファイルを登録します。
（上記のウェブページより）
１．画面左下の歯車マーク > 設定をクリック
２．設定タブが表示されるので、ワークスペースの設定をクリック
３．「設定の検索」に「live https」を入力して検索
４．Live Server > Settings: Https項目の内容を編集
ワークスペースの設定を変更すると、ユーザー側の設定に反映されます。
ソフトウェアのインストールは以上です。次回作業を行う際は、次の手順から開始します。
次回デバッグ作業を行う際はここから
デバッグモードで Chrome を起動します。
念のため、起動している Chrome をすべて終了します。
コマンドプロンプトから、以下を実行します。
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9922
Chrome がデバッグモード（ポート9922経由）で起動するので、この状態で kintone のページを開きます。kintone の操作方法はこれまでと変わりません。他のウェブページも普通に参照することが可能です。
VSCode で Go Live を起動し、ローカルPCのファイルを https で参照できるようにする
VSCode 右下の「Go Live」ボタンをクリックすると、ローカルファイルを参照できる https サーバーが起動します。例えば、C:\Repos\販売システム\開発環境\sample.js ファイルのアドレスは以下のようになります。
https://127.0.0.1:5500/開発環境/sample.js
まず、VSCode でデバッグを行うフォルダ（「C:\Repos\販売システム」）を開いておきます（Git のリポジトリの保存先になります）。
VSCode の右下にある「Go Live」ボタンをクリックします。
すると、ブラウザ（Edge）が起動し、フォルダ内のファイルをブラウザから参照できるようになります。
kintone にアップロード済みの js ファイルを、URL 指定の js ファイルに置き換える
kintone にアップロード済みの js ファイルを、URL 指定の js ファイルに置き換えます。「URL指定で追加」ボタンをクリックします。上記の Edge からアドレスをコピーし、入力欄に貼り付けると、日本語部分がURLエンコードされたアドレスになりますが、入力はURLエンコードされた状態のままで問題ありません。
直前に、置き換える js ファイルをダウンロードしてPCに保存しておいたほうが良いでしょう。（同じファイルは Git にも保存されているはずです。）
Edge で表示されているアドレスをコピーし、「URL指定で追加」ボタンをクリックして表示されたテキストボックスに貼り付けます。「保存」ボタンをクリック。追加されたアドレスを、該当の js ファイルの位置へ移動します。元の js ファイルは × ボタンで削除します。
「保存」して、「アプリの更新」を行います。
※ VSCode 側でプログラムコードを変更した場合、同じファイルであっても、デバッグを開始する前に、そのファイルを再度「URL指定で追加」し、「保存」と「アプリの更新」を行います。
VSCode 側でプログラムコードにブレークポイントを指定し、左サイドバーの［実行とデバッグ］を選択、三角ボタンをクリック（またはF5キーを押下）してデバッグを開始します。
kintone 側で該当のページを表示すると、プログラムコードがブレークポイントで停止します。
［ステップオーバー］ボタンをクリック（またはF10キーを押下）して、1行ずつ進めます。
［ステップイン］ボタンをクリック（またはF11キーを押下）すると、関数の内部に進みます。
［続行］ボタンをクリック（またはF5キーを押下）して最後まで実行すると、ウェブページの表示が完了します。
再度、該当のページを表示すると、ブレークポイントで停止します。デバッグを終了する場合は［停止］ボタンをクリック（または Shift + F5 キーを押下）します。
デバッグ中、kintone 側ではページの読み込みが途中で停止しているため、例えば「タブ表示プラグイン」で表示しているタブは表示されません。
プログラムコードはブレークポイントで停止しています。上部にある［続行］ボタンをクリックすると、それ以降にブレークポイントが存在しない場合、ウェブページの表示が完了します。
作業が終了したら、必ず URL 指定の js ファイルを kintone にアップロードした js ファイルに置き換えます。そうしないと、他の人が kintone を閲覧した際に URL 指定の js ファイルを参照できず、ウェブページが正しく表示されなくなります。
デバッグのノウハウ
続行 ... F5
ステップ実行（ステップオーバー） ... F10
ステップ実行（ステップイン） ... F11
終了 ... Shift + F5 ※ ブラウザごと終了してしまう時がある
ウォッチ式の追加 ... 左中央の＋ボタン。変数名を書くと値が表示される
マウス右クリック、値のコピーで、変数の値をクリップボードにコピー
VSCode の文字コードの設定
［ファイル］－［ユーザー設定］－［設定］
検索ボックスに、「Encoding」を入力
Files: Encoding で UTF-8 を選択
VSCode でコピーする時に「書式なし」をデフォルトにする
［ファイル］－［ユーザー設定］－［設定］
検索ボックスに、「クリップボード」を入力
Editor: Copy With Syntax Highlighting のチェックを外す