디버깅

Nuxt에서는 브라우저와 IDE 모두에서 애플리케이션을 직접 디버깅할 수 있습니다.

소스맵(Sourcemaps)

소스맵은 기본적으로 서버 빌드에 대해 활성화되어 있으며, 개발 모드에서는 클라이언트 빌드에도 활성화되어 있습니다. 더 구체적으로 소스맵을 활성화하려면 설정에서 지정할 수 있습니다.

export default defineNuxtConfig({
  // 또는 sourcemap: true
  sourcemap: {
    server: true,
    client: true
  }
})

Node Inspector로 디버깅하기

Node inspector를 사용하여 Nuxt 서버 사이드를 디버깅할 수 있습니다.

nuxt dev --inspect

이 명령어는 Nuxt를 dev 모드에서 디버거가 활성화된 상태로 시작합니다. 모든 것이 정상적으로 동작하면 Chrome DevTools에 Node.js 아이콘이 나타나고, 디버거에 연결할 수 있습니다.

Node.js와 Chrome 프로세스가 동일한 플랫폼에서 실행되어야 합니다. Docker 내부에서는 동작하지 않습니다.

IDE에서 디버깅하기

Nuxt 앱을 개발하는 동안 IDE에서 디버깅할 수 있습니다.

VS Code 디버그 설정 예시

아래 설정에서 웹 브라우저 경로를 업데이트해야 할 수 있습니다. 자세한 내용은 VS Code 디버그 설정 문서를 참고하세요.

{
  // IntelliSense를 사용하여 가능한 속성에 대해 알아보세요.
  // 기존 속성에 마우스를 올리면 설명을 볼 수 있습니다.
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "client: chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "server: nuxt",
      "outputCapture": "std",
      "program": "${workspaceFolder}/node_modules/nuxt/bin/nuxt.mjs",
      "args": [
        "dev"
      ],
    }
  ],
  "compounds": [
    {
      "name": "fullstack: nuxt",
      "configurations": [
        "server: nuxt",
        "client: chrome"
      ]
    }
  ]
}

평소에 사용하는 브라우저 확장 프로그램을 사용하고 싶다면, 위의 chrome 설정에 다음을 추가하세요:

"userDataDir": false,

JetBrains IDEs 디버그 설정 예시

IntelliJ IDEA, WebStorm, PhpStorm과 같은 JetBrains IDE에서도 Nuxt 앱을 디버깅할 수 있습니다.

프로젝트 루트 디렉터리에 새 파일을 만들고 이름을 nuxt.run.xml로 지정하세요.
nuxt.run.xml 파일을 열고 다음 디버그 설정을 붙여넣으세요:

<component name="ProjectRunConfigurationManager">
  <configuration default="false" name="client: chrome" type="JavascriptDebugType" uri="http://localhost:3000" useFirstLineBreakpoints="true">
    <method v="2" />
  </configuration>

  <configuration default="false" name="server: nuxt" type="NodeJSConfigurationType" application-parameters="dev" path-to-js-file="$PROJECT_DIR$/node_modules/nuxt/bin/nuxt.mjs" working-dir="$PROJECT_DIR$">
    <method v="2" />
  </configuration>

  <configuration default="false" name="fullstack: nuxt" type="CompoundRunConfigurationType">
    <toRun name="client: chrome" type="JavascriptDebugType" />
    <toRun name="server: nuxt" type="NodeJSConfigurationType" />
    <method v="2" />
  </configuration>
</component>

기타 IDE

다른 IDE를 사용하고 있고 샘플 설정을 기여하고 싶다면, 언제든지 PR을 열어주세요!