kintone の JavaScript / CSS ファイルのデバッグ環境構築

## はじめに

以下のページを参考にしましたが、JavaScript が初めての人には読み解くのが難しいと思われますので、なるべく分かり易く書きたいと思います。

kintone の JS カスタマイズを VSCode でデバッグ

https://blog.mori-soft.com/entry/2023/12/05/215207

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

https://cybozu.dev/ja/kintone/tips/development/customize/development-know-how/use-visual-studio-code-live-server-extension/

　

## kintone マニュアル

kintone JavaScript API 
[https://cybozu.dev/ja/kintone/docs/js-api/](https://cybozu.dev/ja/kintone/docs/js-api/)
イベント一覧 

kintone APIドキュメント 
[https://cybozu.dev/ja/kintone/docs/](https://cybozu.dev/ja/kintone/docs/)
コーディングガイドライン、kintone コーディングガイドラインに、テキストファイルは UTF-8（BOMなし）を使用するように記載されている
kintone REST API > レコード > 1件のレコードを更新する

はじめようkintone API 
[https://cybozu.dev/ja/tutorials/hello-kinapi/](https://cybozu.dev/ja/tutorials/hello-kinapi/)

カスタマイズTips 
[https://cybozu.dev/ja/kintone/tips/development/customize/](https://cybozu.dev/ja/kintone/tips/development/customize/)

パスワード認証 API 
[https://cybozu.dev/ja/kintone/docs/rest-api/overview/authentication/#password](https://cybozu.dev/ja/kintone/docs/rest-api/overview/authentication/#password)

Top > チュートリアル > はじめようkintone API > カスタマイズファイルを適用してみよう 
[https://cybozu.dev/ja/tutorials/hello-kinapi/first-step/](https://cybozu.dev/ja/tutorials/hello-kinapi/first-step/)

Top > チュートリアル > はじめようkintone API > カスタマイズビューを作成してみよう
[https://cybozu.dev/ja/tutorials/hello-kinapi/customize-view/](https://cybozu.dev/ja/tutorials/hello-kinapi/customize-view/)

　

## 必要なソフトウェア

VSCode の左サイドバーの［拡張機能］で Live Server を追加します。 
[https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)

　
![0110_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956789/95a786f3-71e5-4c77-2bef-5fa6570421fc.png)

　
ローカルPC用の証明書と秘密鍵を作成するために mkcert ツールを使用します。 
[https://github.com/FiloSottile/mkcert/releases/tag/v1.4.4](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

![0110_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956789/0c91a45a-507b-7536-c746-ff1217079ff1.png)


いくつかメッセージが表示されますが、「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 をすべて終了します。 
コマンドプロンプトから、以下を実行します。
<font color="red">※ Chrome 136 から変更になりました（下述）</font>

```console
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9922 
```

![0109_51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956789/a810110f-3385-06c5-0ad3-7e97afbca943.png)

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 ファイルは × ボタンで削除します。 

「保存」して、「アプリの更新」を行います。 

<font color="red">※ VSCode 側でプログラムコードを変更した場合、同じファイルであっても、デバッグを開始する前に、そのファイルを再度「URL指定で追加」し、「保存」と「アプリの更新」を行います。</font>

VSCode 側でプログラムコードにブレークポイントを指定し、左サイドバーの［実行とデバッグ］を選択、三角ボタンをクリック（またはF5キーを押下）してデバッグを開始します。 

kintone 側で該当のページを表示すると、プログラムコードがブレークポイントで停止します。 

［ステップオーバー］ボタンをクリック（またはF10キーを押下）して、1行ずつ進めます。
［ステップイン］ボタンをクリック（またはF11キーを押下）すると、関数の内部に進みます。 
［続行］ボタンをクリック（またはF5キーを押下）して最後まで実行すると、ウェブページの表示が完了します。 

再度、該当のページを表示すると、ブレークポイントで停止します。デバッグを終了する場合は［停止］ボタンをクリック（または Shift + F5 キーを押下）します。 

デバッグ中、kintone 側ではページの読み込みが途中で停止しているため、例えば「タブ表示プラグイン」で表示しているタブは表示されません。 

プログラムコードはブレークポイントで停止しています。上部にある［続行］ボタンをクリックすると、それ以降にブレークポイントが存在しない場合、ウェブページの表示が完了します。

<font color="red">作業が終了したら、必ず URL 指定の js ファイルを kintone にアップロードした js ファイルに置き換えます。そうしないと、他の人が kintone を閲覧した際に URL 指定の js ファイルを参照できず、ウェブページが正しく表示されなくなります。 </font>

　

## デバッグのノウハウ

続行 ... F5  
ステップ実行（ステップオーバー） ... F10 
ステップ実行（ステップイン） ... F11
終了 ... Shift + F5　　※ ブラウザごと終了してしまう時がある

ウォッチ式の追加 ... 左中央の＋ボタン。変数名を書くと値が表示される
　　マウス右クリック、値のコピーで、変数の値をクリップボードにコピー

VSCode の文字コードの設定 
［ファイル］－［ユーザー設定］－［設定］ 
検索ボックスに、「Encoding」を入力 
Files: Encoding で UTF-8 を選択

VSCode でコピーする時に「書式なし」をデフォルトにする 
［ファイル］－［ユーザー設定］－［設定］ 
検索ボックスに、「クリップボード」を入力 
Editor: Copy With Syntax Highlighting のチェックを外す

Chrome のキャッシュのクリア
DevTools を開く
ページリロードボタンを右クリック
「ハード再読み込み」または「キャッシュの消去とハード再読み込み」を選択

![0313_23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956789/73624771-6836-42d3-a4a2-73913fcdef72.png)

　

## Chrome 136（2025/5/19）より変更

次のページを参考に、Chrome をデバッグモードで起動する方法が、Chrome 136 以降で変更になりました。

[https://developer.chrome.com/blog/remote-debugging-port](https://developer.chrome.com/blog/remote-debugging-port)

[https://code.visualstudio.com/docs/nodejs/browser-debugging#_attaching-to-browsers](https://code.visualstudio.com/docs/nodejs/browser-debugging#_attaching-to-browsers)

```console
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9922 --user-data-dir="C:\Users\(ユーザー名)"
```

VSCode でデバッグを行うために、launch.json を以下のように変更します

```json
{
    "version": "0.2.0",
    "configurations": [
      {
        "type": "msedge",
        "request": "attach",
        "name": "Attach to browser",
        "port": 9922
      }
    ]
}
```


以下を実行すると、ポートが開いているかどうかを確認できます

netstat -a

```console
  TCP         127.0.0.1:9922         (PC名):0               LISTENING
```

Chrome のアドレスに chrome://version を入力すると、起動時のコマンドラインを確認できます

```console
コマンドライン	"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9922 --user-data-dir="C:\Users\(ユーザー名)" --flag-switches-begin --flag-switches-end
```

Chrome のアドレスに http://localhost:9922/json を入力すると、JSONのページが表示され、デバッグ可能かどうかを確認できます