聖夜なので記事を捧げます。この狂った世界（Webフロントエンド）へ。
この記事がいつか、世界の片隅に打ち捨てられた震えるチワワフロントエンドエンジニアとチワワを救うと信じています。

◆結論

◆前説（飛ばしてよし）

Vue.jsは、つまりWebページをいい感じに作るためのフレームワークです。Reactはやめた！

Vue CLIで、「vue create [プロジェクト名]」すると、良い感じにテンプレプロジェクトが生える。そして、「yarn serve」すると魔法ヂカラによりローカルなサーバーが立ち上がり、「http://localhost:8080/」でVueなWebアプリケーションを拝むことができる。

▼魔法

  1. 「yarn serve」する
    Yarn使ってないクソ雑魚エンジニアは「npm run serve」する
  2. package.jsonのscriptsにserveが書いてあって、つまり「vue-cli-service serve」が動く。
  3. それは多分だけど「node_modules/.bin/vue-cli-service」やらvue-cli-service.cmdを蹴っていて
  4. そのなかでは「@vue\cli-service\bin\vue-cli-service.js」が呼ばれているらしく
  5. なんだかんだで「webpack-dev-server」が動いているそうで
  6. HMRっつって、Node.jsのサーバーがぶん回ってる状態ででもコードの変更が画面に反映されたりする

それはとっても嬉しいなって。

◆苦悩

  1. Visual Studio Codeで開発することになって
  2. F5でデバッグ走らせてぇなと感じ
  3. launch.jsonなる仕組みを知り
  4. 公式の案内を読んだは善いが
  5. 動かねぇぜ？と思った僕は
  6. 怒りに震え
  7. どうすっかなと思った

◆要件

  • HMR
  • ブレークポイント
  • ブレークポイントで止まった時に変数の中身がまるみえ

◆手順

さんざ悩んだのち、「◆結論」のlaunch.jsonを生み出すに至った。あてはめる手順について説明する。

Windows10の話をしているから、他のOS使ってる人は適宜読み替えろ。

  1. VS Codeを立ち上げ、「Ctrl + Shift + X」で拡張機能をひらく
  2. 「Debugger for Chrome」を入手してVS Codeを再起動
  3. 「Ctrl + Shift + D」でデバッグを開き、Tabキーをポチポチして⚙️でEnterキーする
    ※構成はどうせ書き換えるからなんでもいい
  4. 「.vscode/launch.json」が出来るんで、下記リンクの「launch.json」をコピって貼っ付けて保存する
    ⇒launch.json
  5. デバッグの構成が「Launch Chrome」になると思うんで、それを「Debug on Chrome」に変える
  6. F5押す
  7. ちょっと待つ（あせらない）
  8. 動く
  9. うれしい
  10. VS Codeにフォーカスした状態で「Shift + F5」で停止させる
    ※２つの構成が動いているんで、２回やって両方を止めろ
    ※デバッグしているブラウザを閉じると、「Launch Chrome」は止まる

◆動確

  • デバッグ中にコードを書き換えて保存し、HMRが動いていることを確認
  • 適当にボタン置いてalertとか書いてブレークポイント張って止まることを確認

◆解説

ヒントやったんだから後はググれと言いたい（主張）

▼HMRありつつChromeでデバッグ

HMRはwebpack-dev-serverの機能である故、立ち上げたい。
そしてChromeのリモートデバッグを欲するので「–remote-debugging-port=9222」したい。

「–remote-debugging-port=9222」まわりをいい感じにしてくれるのが「Debugger for Chrome」である。

だからつまり、デバッグセッションを２個走らせればいい。

launch.jsonの「compounds」でそれをやってます。読んでみてね。

▼Productionモード

「Debug on Chrome (Production Mode)」っていう構成を作ったから、それを走らせてみてもいいよ。

それはつまり「リリース版」の構成です。つまり、jsが圧縮（minify）されたりしています。ChromeのF12でデベロッパーツール開いて、Sourcesタブで「app.js」を見てみたりすればいいよ。

▼その他

launch.jsは最小で作ってある。色々な設定を付加できるんで以下を参照して勉強してくりゃれ。

Vue CLI 3：CLI Service

VS Code – Debugger for Chrome

◆悩みどころさん

  • デフォルトのデバッグ構成を明示したいんだけど、ままならない。
    あるいは、特定のデバッグ構成をUIから隠したい。
  • 複数のデバッグセッションを一括停止したい。
  • デバッグ中に走ってる「http://localhost:9222/」の「Inspectable pages」って何？キモい。
  • 8080のポートを指定してるけど、「serve」って奴は賢いことに8080が埋まってたら8081とかに神殿を建てやがるんですよ。そしたらChromeが参照してるのは8080でHMRは8081を見てるとか発生しうるよね。今んとこ起きたことないけど。
    そんなことになったらPC再起動して8080を落とすか、「netstat -aon | find “8080”」「sudo lsof -i:8080」的なやつらでポート押さえてるプロセスのPID捕まえて「taskkill /pid [PID] /F」してやるとか「kill [PID]」してやるとかして差し上げろ。
  • VS CodeのGit操作がVisual Studioのチームエクスプローラーほど簡単じゃない。Git操作だけVSでやってる。どうすりゃいい。
    ⇒Ctrl + Shift + Pからの「git」でGitコマンド呼べるのに気づいたらむしろVSのほうがGit使いづらい子になった。

◆結論（２回目）

オープンソースはコードが辿れて楽しいかもしれない。

そして、この記事で「解り辛い」とか「間違ってる」とか「サンキュー！」とかあるんなら恥ずかしがらずにコメント欄にぶっかけろ。

以上だ。メリークリスマス🎅

◆関連記事

VS Codeで拡張機能をGit管理するんだよ