はじめに

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：デバッグ開始！

VSCode左の「実行とデバッグ」パネルを開く
「Vite: Chromeでデバッグ」を選んで ▶️ 実行
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 書くの疲れた…」という方は、ぜひこの方法を活用してみてください。