调试
在 Nuxt 中,你可以直接在浏览器以及 IDE 中开始调试你的应用。
Sourcemaps
Sourcemaps 默认在你的服务端构建中启用,在开发模式下的客户端构建中也启用,但你也可以在配置中更具体地启用它们。
export default defineNuxtConfig({
// 或者使用 sourcemap: true
sourcemap: {
server: true,
client: true
}
})
使用 Node Inspector 调试
你可以使用 Node inspector 进行 Nuxt 服务端调试。
nuxt dev --inspect
这将以启用调试器的 dev
模式启动 Nuxt。如果一切工作正常,你将在 Chrome 开发者工具上看到一个 Node.js 图标,然后你可以连接调试器。
注意,Node.js 和 Chrome 进程需要运行在同一平台上。此功能在 Docker 内部无法使用。
在你的 IDE 中调试
你可以在开发过程中在你的 IDE 中调试 Nuxt 应用。
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 调试配置示例
你也可以在 JetBrains 系列 IDE(如 IntelliJ IDEA、WebStorm、PhpStorm)中调试 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!