Viteをデバッガを用いてデバッグする方法
前提条件
vite(v4.4.11)
まず、viteはTypeScriptで書かれている。
それで、TypeScriptのコードをデバッガで読むには少し工夫が必要
具体的には、sourceMapの設定をする必要がある
詳しくは下記。
今回は、viteをtsで読んでいく
まずはviteをcloneする。
forkして諸々セットアップ済みのリポジトリを用意したので、そこをcloneする感じで。
code:clone
結構時間がかかるかも。--depth 1 のオプションを入れると、コミットログを1個しか取らなくなるので早くなるが、今回特定のtagのコミットに移動したいので、使えるかわからん... ので全部とっている。
いい方法あったら誰か教えてください。
終わったら cd vite する。
次にv4.4.11のタグに切り替える
code:tag
git fetch --tags
git checkout v4.4.11
次は vite に sourceMapの設定をしてbuildすること。
code:set sourceMap
cd packages/vite
vim tsconfig.json
// 以下をコピペしてくれー
{
"extends": "./tsconfig.base.json",
"include": [
"./rollup.config.ts",
"scripts",
"src/node/__tests__",
"src/types/shims.d.ts"
],
"compilerOptions": {
"esModuleInterop": true,
"declaration": false,
"resolveJsonModule": true,
"sourceMap": true
}
}
// そしてbuildする
pnpm i && pnpm build
と思ったら、dist/ に.mapが吐かれない。
どうやら、production向けのbuildになると、mapを吐かないようにしているっぽい。
なので、pnpm devで一度トランスパイルする。
[2023-10-10 23:51:07] waiting for changes...こんな感じのメッセージが出てくるので、出てきたら command + c とかで抜けてあげる
そうすると、
code:ls
ls dist/node
build.d.ts constants.d.ts index.js plugins utils.d.ts
chunks constants.js index.js.map preview.d.ts watch.d.ts
cli.d.ts constants.js.map logger.d.ts publicUtils.d.ts
cli.js env.d.ts optimizer server
cli.js.map http.d.ts packages.d.ts shortcuts.d.ts
config.d.ts index.d.ts plugin.d.ts ssr
こんな感じでmapファイルが吐き出される。
あとは、いつも通り実行する際に --inspect-brk をつけて実行すれば良い。
ここで、cssのバンドルを行うplaygroundにcdする
cd ../../playground/css/
そして、pnpm debug を行い、viteのデバッグをする。
これでデバッグはできる。
ただ、packages/vite/src/node/cli.tsの231行目にdebuggerを入れて欲しい(忘れていた)
入れるとdebugが楽になる
あと、入れた後に再度viteをトランスパイルすることを忘れずに。
それで、pnpm debugして、chrome://inspect でデバッグしていく感じ。
それで、さっきdebuggerをつけたので、再生マークを押してデバッグする。
すると、cli.tsに飛ばされる
https://gyazo.com/072664a6c123947e26ff4841fb484fee
それで、ここからデバッグしていくんですけど、vite自体はrollupとesbuildのラッパーみたいな感じだと認識している
そのため、実質rollupとesbuildを読む感じ...
あと、rollupはtypescriptで書かれているので、それもtsでデバッグしたいよなぁ