소스맵

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

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

Node Inspector로 디버깅하기

Nuxt 서버 측을 디버그하기 위해 Node inspector를 사용할 수 있습니다.

nuxt dev --inspect

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

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 앱을 디버그할 수 있습니다.

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을 열어주세요!