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

kintoneカスタマイズのデバッグに，なにを使っていますか？

大多数の方が，ブラウザのデベロッパーツールと答えるかと思います．
手順は，「デベロッパーツールを確認 -> コード書き換え -> ページ更新してデベロッパーツールを確認 -> コード書き換え -> ...」ですよね．

ブラウザとエディタを何度も行き来する動作，辛くないですか？

この記事では，エディタ(VSCode)の操作だけでデバッグするちょい技を紹介します．

デモ

左がブラウザ(Chrome)，右がエディタ (VSCode)です．
VSCode側で，ページリロード，コンソールの表示，ステップ実行ができちゃいます．

(↑カスタマイズでボタンを表示しようとして苦戦している様子です)

デモではわざわさボタンを押していますが，
デバッグ開始: F5
ページリロード: Cmd + Shift + F5
リジューム実行: F5
のように，ショートカットキーでの操作も可能です．

ソースマップさえ作成すれば，コンパイル・バンドル前のファイルにブレークポイントを設定することもできます．

利用するツール

下記ツールをインストールします．
Live ServerとDebugger for Chromeは，VSCodeの拡張機能なので，VSCodeにインストールします．

設定手順

1. Live Serverで配信したJSファイルをkintoneで読み込む

下記通りに設定すればOKです．
これさえ終われば半分以上終わったようなものなので頑張ってください．

2. 「/.vscode/launch.json」を作成する

プロジェクトルートに，.vscodeディレクトリを作成し，その中にlaunch.jsonを作成します．

/.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "kintone",
      "type": "chrome",
      "request": "attach",
      "urlFilter": "https://*.cybozu.com/k/*",
      "webRoot": "${workspaceRoot}/",
      "port": 9222,
      "sourceMaps": true,
      "trace": true
    }
  ]
}

3. リモートデバッグをオンにしてChromeを起動する

下記コマンドで，リモートデバッグをオンにしてChromeを起動します．

Mac

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Windows

<path to chrome>/chrome.exe --remote-debugging-port=9222

4. 起動したChromeでデバッグするkintoneアプリを開く

3で起動したChromeでデバッグするkintoneアプリを開きます．
あとは，VSCodeの操作でデバッグができます．

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

デモ