ソースマップ

ソースマップは、サーバービルドではデフォルトで有効になっており、クライアントビルドでは開発モードで有効ですが、設定でより具体的に有効にすることができます。

export default defineNuxtConfig({
  // または sourcemap: true
  sourcemap: {
    server: true,
    client: true
  }
})

Node Inspectorを使用したデバッグ

Node inspectorを使用してNuxtのサーバーサイドをデバッグできます。

nuxt dev --inspect

これにより、デバッガーがアクティブな状態でNuxtがdevモードで起動します。すべてが正しく動作している場合、Chrome DevToolsにNode.jsアイコンが表示され、デバッガーにアタッチできます。

IDEでのデバッグ

開発中にIDEでNuxtアプリをデバッグすることが可能です。

VS Codeデバッグ設定の例

以下の設定を更新して、ウェブブラウザへのパスを指定する必要があるかもしれません。詳細はVS Codeのデバッグ設定に関するドキュメントを参照してください。

{
  // IntelliSenseを使用して可能な属性について学びます。
  // 既存の属性の説明を表示するにはホバーします。
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "client: chrome",
      "url": "http://localhost:3000",
      // これはNuxtの`srcDir`を指す必要があります。デフォルトでは`app`です。
      "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 IDEsデバッグ設定の例

IntelliJ IDEA、WebStorm、PhpStormなどのJetBrains IDEsでも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>

その他のIDEs

他のIDEをお持ちで、サンプル設定を提供したい場合は、PRを開くことを検討してください！