k0n_karin https://blog.hatena.ne.jp/k0n_karin/ Yappli Tech Blog https://tech.yappli.io/ Vue.js テスト 開発 この記事はヤプリ&フラー 合同アドベントカレンダー Advent Calendar 2025の16日目の記事です。 TL;DR 本題 Vitest v4を使う Chrome DevToolsを使ってデバッグする Vite(Vitest)プラグインでstyleを消す おわりに TL;DR Vitest v4にする v3以前は2通りで対応できる vitest --inspect --no-file-parallelism でテストを実行した上でchrome://inspectからChrome DevToolsでブレークポイントを設定するとズレない。 あるいは<style>を消す。 本題 デバッグは… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Ftech.yappli.io%2Fentry%2Fvitest-debugging-vue" title="Vitest v3でVueファイルにブレークポイントを設定するとズレる - Yappli Tech Blog" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/k/k0n_karin/20251216/20251216225339.png Hatena Blog https://hatena.blog 2025-12-17 13:35:30 rich https://tech.yappli.io/entry/vitest-debugging-vue 1.0 100%