デバッグ
Nuxt 3では、ブラウザとIDEの両方でアプリケーションのデバッグを直接開始できます。
ソースマップ
ソースマップは、サーバービルドではデフォルトで有効になっており、クライアントビルドでは開発モードで有効になっていますが、設定でより具体的に有効にすることができます。
export default defineNuxtConfig({
// or sourcemap: true
sourcemap: {
server: true,
client: true
}
})
ノードインスペクターを使用したデバッグ
ノードインスペクターを使用して、Nuxtサーバーサイドをデバッグできます。
nuxi dev --inspect
これは、デバッガーをアクティブにした状態で、devモードでNuxtを起動します。すべてが正常に動作している場合、Chrome DevToolsにNode.jsアイコンが表示され、デバッガーに接続できます。
Node.jsプロセスとChromeプロセスは、同じプラットフォームで実行する必要があることに注意してください。これはDocker内では動作しません。
IDEでのデバッグ
開発中は、IDEでNuxtアプリをデバッグできます。
VS Codeデバッグ設定の例
以下の設定をWebブラウザへのパスで更新する必要がある場合があります。詳細については、デバッグ設定に関するVS Codeドキュメントをご覧ください。
pnpmを使用する場合、以下の設定が機能するためには、nuxiをdevDependencyとしてインストールする必要があります。{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "client: chrome",
"url": "https://127.0.0.1:3000",
"webRoot": "${workspaceFolder}"
},
{
"type": "node",
"request": "launch",
"name": "server: nuxt",
"outputCapture": "std",
"program": "${workspaceFolder}/node_modules/nuxi/bin/nuxi.mjs",
"args": [
"dev"
],
}
],
"compounds": [
{
"name": "fullstack: nuxt",
"configurations": [
"server: nuxt",
"client: chrome"
]
}
]
}
通常のブラウザ拡張機能を使用する場合は、上記の *chrome* 設定にこれを追加してください
"userDataDir": false,
JetBrains IDEデバッグ設定の例
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="https://127.0.0.1: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/nuxi/bin/nuxi.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を開いてください！