Vitest v3でVueファイルにブレークポイントを設定するとズレる

この記事はヤプリ&フラー 合同アドベントカレンダー Advent Calendar 2025の16日目の記事です。

TL;DR

• Vitest v4にする
• v3以前は2通りで対応できる
  • vitest --inspect --no-file-parallelism でテストを実行した上でchrome://inspectからChrome DevToolsでブレークポイントを設定するとズレない。
  • あるいは<style>を消す。

本題

デバッグはいいぞおじさんのこん(@k0n_karin)です。皆さんデバッグしてますか？console.logでプリントデバッグ？ブレークポイントを使いましょう！
ブレークポイントはブラウザで使うChrome DevToolsではもちろんのこと、ターミナルで実行されるスクリプトやテストなどでも使えます。余談ですが、デバッグのテクニックについては以下の記事がとてもとても参考になります。

qiita.com

さて、タイトルの通りですが、Vitest v3でVueファイルをデバッグすると設定したブレークポイントと違う箇所がハイライトされてしまいます。

今回はこちらのサンプルコードを使って検証します。

github.com

サンプルコードをVS Codeで開き、Vueファイルのscriptにブレークポイントを設定して、JavaScript Debug Terminalでテストコマンドを実行しましょう。

ブレークポイントの位置からズレてハイライトされる図

なんかズレていますね。ただし、よく見てみるとハイライトされる場所が異なるだけで、処理自体は設定どおりに止まっており、左のパネルでcountの値を参照できています。これはいったい何でしょう？検索してみるとIssueが出てきました。

github.com

Issueを見ると、どうやら<style>タグに記述があるとズレるようです。試しに<style>タグを消してみると、ちゃんと設定した箇所で処理が止まってハイライトされます。

styleタグを消すと正しくハイライトされる

テストの度に毎回<style>タグを消すわけにはいかないですよね。では、ここからは解決策を考えていきましょう。

Vitest v4を使う

冒頭にも書いた解決策ですが、最も簡単なのがこれです。reproを作って調べようとしたときにnpm create vue@latestで作った環境では本事象が再現しませんでした。差分を調べてみたら作った環境ではVitest4で、本事象が起きていた環境はv3だったので、たまたま気づけました。

早めにVitest v4アップデートしましょう！

Chrome DevToolsを使ってデバッグする

すぐにVitest v4にアップデートできない場合も考えて、他の方法も模索してみます。

ブラウザでnpm run devなどでデバッグしている最中にChrome DevToolsではズレたことがなかったので、Node.jsのインスペクタを使ってVitestでもChrome DevToolsでデバッグしてみます。やり方はNode.jsとVitestの公式ドキュメントに書かれています。

nodejs.org

vitest.dev

1. テストコマンドをvitest --inspect-brk --no-file-parallelism にする
2. Chromeでchrome://inspectを開き、「Open dedicated DevTools for Node」でDevToolsを開く
3. 「フォルダを選択する」からテストを実行しているディレクトリを選択する
4. テストコマンドを実行
5. テストファイルの最初の1行で処理が止まるため、任意の箇所にブレークポイントを設定する

これでNode.jsもChrome DevTools上でデバッグできるようになります。

Vite(Vitest)プラグインでstyleを消す

今度はテストの時だけ<style>タグを消してみましょう。Vite(Vitest)ではファイルの読み込み時にコードを変形するプラグインを書けます。プラグインで雑に.vueファイルの<style>を消してみます。

これはテストで実行されるコードと実際に本番で動くコードの間で差分が生まれてしまうのでお勧めはしません。

// vitest.config.ts
import { defineConfig } from 'vitest/config';

function removeStyleInTest() {
  return {
    name: 'remove-vue-style-in-test',
    transform(code: string, id: string) {
      if (id.endsWith('.vue')) {
        // <style>... </style>セクションを削除
        return {
          code: code.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, ''),
          map: null,
        };
      }
    },
  };
}

export default defineConfig({
  plugins: [
    removeStyleInTest(),
  ],
})

おわりに

前々からズレが気になってはいたものの、かろうじてデバッグはできていたので深く考えていませんでしたが、しっかり調べてみると意外と様々な方法が取れることがわかりました。ブレークポイントを使ったデバッグはどの言語での開発も重要な必須スキルだと思うので、是非覚えて利用していきたいですね。

ヤプリではデバッグが得意なエンジニアを大募集しています！興味がある方は是非カジュアル面談でお話しましょう！

open.talentio.com