概要

Viteでvscodeのデバッグ機能が、成功した設定は以下となる。
しかし、この方法はsourcemapを読み込まなければならない。
つまり、本番用のnpm run build を実行して、soucemapファイルを、作成した時のみ有効なデバッグ方法である。
npm run devでデバッグするなら、debugger構文の方が有効である。

環境

Laravel10
Vue3
Vite4.3.9
Docker Desktop 4.20
wsl2

各種の設定

routes/web.php

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('welcome');
});

resources/js/app.js

import "/resources/js/bootstrap.js";

const greeting = "Hello World";

console.log(greeting);

vite.config.js

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";

export default defineConfig({
    plugins: [
        laravel({
            input: ["resources/css/app.css", "resources/js/app.js"],
            refresh: true,
        }),
    ],
    server: {
        host: true,
        hmr: {
            host: "localhost",
        },
    },
    build: {
        sourcemap: true,
    },
});

.vscode/launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch chrome against localhost",
            "url": "http://localhost:80",
            "webRoot": "${workspaceFolder}/resources"
        }
    ]
}

resources/views/welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>

        ...        

        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
    <body class="antialiased">
        
        ...

    </body>
</html>

デバッグ方法

npm run build を実行して、sourcemapファイルを作成する。
JavaScriptファイルのどこでもいいので、ブレークポイントを設定する。
F5を押してデバッグを実行し、サイドバーに変数の値が表示されれば成功。

参考

https://github.com/vitejs/vite/discussions/4065
https://ja.vitejs.dev/config/build-options.html

ViteでJavaScriptのデバッグを、vscodeのデバッグ機能で行いたい場合の設定

概要

環境

各種の設定

デバッグ方法

参考