[VS CODE] nuxt.js 디버깅하기

1. launch.json 파일 편집

- 디버깅 탭에서 launch.json 파일을 열 수 있다. 

 

launch.json (vs code 설정파일)

{
    "version": "0.2.0",
    "configurations": [
      {
        "type": "chrome",
        "request": "launch",
        "name": "client: chrome",
        "url": "http://localhost:8082",
        "webRoot": "${workspaceFolder}"
      },
      {
        "type": "node",
        "request": "launch",
        "name": "server: nuxt",
        "args": ["dev"],
        "osx": {
          "program": "${workspaceFolder}/node_modules/.bin/nuxt"
        },
        "linux": {
          "program": "${workspaceFolder}/node_modules/.bin/nuxt"
        },
        "windows": {
          "program": "${workspaceFolder}/node_modules/nuxt/bin/nuxt.js"
        }
      }
    ],
    "compounds": [
      {
        "name": "fullstack: nuxt",
        "configurations": ["server: nuxt", "client: chrome"]
      }
    ]
  }

 

2. nuxt 프로젝트 설정파일 수정

nuxt.config.js 에 extend 추가 

  build: {
    extend(config, ctx) {
      if (ctx.isDev) {
        config.devtool = ctx.isClient ? 'source-map' : 'inline-source-map'
      }
    },

3. 기타

vs code는 Node.js와 크롬을 위한 자체 js디버거를 내장한다.

Nightly버전을 쓰려면 기존의 Javascript Debugger를 제거하고 확장 탭에서 아래의 이름으로 검색해 설치한다.

@id:ms-vscode.js-debug-nightly

 

이후 디버깅탭에서 fullstack:nuxt로 새 크롬창이 열리면 중단점이 적용되고 호출스택과 조사식을 통해 디버깅도 가능하다. (js파일 및 vue파일 포함)