VSCodeでVue 3 + Viteをブレークポイント付きでデバッグする方法【Debugger for Chrome不要】

はじめに

Vue 3 + Vite で開発していて、
「ブレークポイントで止めたい」「console.log() が表示されない」と困ったことはないでしょうか。

この記事では、VSCodeの標準デバッガーを使って Vue 3 + Vite アプリをデバッグする方法を、最新の構成でまとめます。

ポイント：

• Debugger for Chrome はもう使わない（非推奨）
• VSCodeとChromeのリモートデバッグ機能で完結
• 毎回コマンドを打たずに済むエイリアスや自動化も紹介

---

前提

• Vue 3 + Vite プロジェクト（npm create vite@latestなどで作成済み）
• Google Chrome（通常版でOK）
• VSCode（最新版）

---

ステップ1：Viteの開発サーバーを起動

npm run dev

---

ステップ2：Chromeをリモートデバッグモードで起動

通常のChromeでは VSCode から接続できないため、
以下のように --remote-debugging-port=9222 オプションをつけて起動します。

Mac の場合

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

Windows の場合（例）

chrome.exe --remote-debugging-port=9222

---

面倒な人へ：エイリアスを作ると便利

Macの場合、以下を .zshrc に追記しておけば毎回楽です。

alias chrome-debug="open -na 'Google Chrome' --args --remote-debugging-port=9222"

source ~/.zshrc
chrome-debug

---

ステップ3：VSCodeの launch.json を設定

プロジェクト直下に .vscode/launch.json を作成し、以下を追加：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "Vite: Chromeでデバッグ",
      "url": "http://localhost:5173",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true
    }
  ]
}

ポイント：

• type: "pwa-chrome" → これが今の標準
• Debugger for Chrome 拡張は不要です

---

ステップ4：デバッグ開始！

1. VSCode左の「実行とデバッグ」パネルを開く
2. 「Vite: Chromeでデバッグ」を選んで ▶️ 実行
3. Chromeが自動起動し、ブレークポイントで処理が止まります

---

よくあるつまずき

<script setup> で止まらない

• setupブロック内は source map の都合で止まりにくいことがあります
  → 対応策：

  • 通常の <script> に一時的に戻す
  • console.log() 併用で様子を見る

---

console.log() が出ない

• Chrome拡張（AdBlock / Grammarly / Vue Devtools など）が影響していることがあります
  → シークレットモードで確認する
  → VSCodeのデバッグモードでは影響を受けないためおすすめ

---

おまけ：VSCodeの preLaunchTask で自動化したい人向け

// .vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Start Chrome with debug port",
      "type": "shell",
      "command": "open -na 'Google Chrome' --args --remote-debugging-port=9222"
    }
  ]
}

launch.json にこれを追加：

"preLaunchTask": "Start Chrome with debug port"

これで VSCode のデバッグ実行時に自動で Chrome が起動します。

---

まとめ

• Debugger for Chrome は不要、pwa-chrome が今の標準
• Chrome をリモートデバッグポート付きで起動すれば VSCode から接続可能
• ブレークポイントで止まらないときは <script> に切り替え or console.log() 併用
• よく使うなら alias 登録や preLaunchTask で自動化が便利

---

Vue 3 + Vite 環境でも、VSCodeの標準機能だけで快適にデバッグできます。
「毎回 console.log 書くの疲れた…」という方は、ぜひこの方法を活用してみてください。