디버깅

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

소스맵

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

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

Node Inspector로 디버깅하기

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

nuxt dev --inspect

이 명령은 디버거가 활성화된 dev 모드에서 Nuxt를 시작합니다. 모든 것이 올바르게 동작하면 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",
      // 기본값이 `app`인 Nuxt `srcDir`을 가리켜야 합니다
      "webRoot": "${workspaceFolder}/app"
    },
    {
      "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 IDE 디버그 설정 예시

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

  1. 프로젝트 루트 디렉터리에 새 파일을 만들고 이름을 nuxt.run.xml로 지정합니다.
  2. 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을 열어 주세요!