크롬 console.log를 VSCode 안에서 볼수있다

[milooy]

.vscode/settings.json에

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome with Debug",
      "url": "http://localhost:3000/dashboard/home",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack://@YOUR_SOURCEMAP_ROUTE/*": "${webRoot}/*"
      }
    },
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to Chrome",
      "port": 9222,
      "webRoot": "${workspaceFolder}"
    }
  ]
}

를 추가하고 webpack.config.js에 sourcemap 켜두면
→ F5로 브라우저 켰을때 9222 포트랑 attach해줘서 크롬 console을 VSCode속에서 볼 수 잇슴
→ console.log도 구찮음. debugger도 바로 찍어 변수값 볼 수 있음

[yoonminsang]

오 완전 꿀팁이네요! 감사합니다