intro

VSCode debug 설정 하는 법

config

./.vscode/launch.json

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

./tsconfig.json

...
"sourceMap": true,
...

@/pages/Home.tsx

console.log("....) 이부분에 F9를 눌러 break point를 남긴다.

run

run webpack

yarn dev

run debug (F5)

F5키를 눌르면 위 설정 값으로 실행 하면서 브라우져가 열린다.

break

위와같이 브레이크 걸리면 성공

Tip

소스가 많아 지게 되면 vscode가 다소 느려지게되어있다.
devtool : inline-source-map의 경우 빌드와 실행 속도가 가장 느려 개발에 불편한 부분이 있어
Debug모드와 Dev모드에 따라 빌드 옵션 변경을 추가해서 개발 속도를 올린다.

./config/webpack.dev.js

...
    mode: "development",
    devtool: env.debug ? "inline-source-map" : "eval",
    devServer: {
...

"eval"모드에서는 break가 걸리지 않는다.

run

yarn dev --env debug

위와 같이 debug 옵션을 넣어 실행 한다.

Reference

아래 링크에서 각 옵션의 성능표를 확인 할수 있다.
https://webpack.kr/configuration/devtool/