Depuração
No Nuxt, você pode começar a depurar sua aplicação diretamente no navegador, bem como no seu IDE.
Sourcemaps
Os sourcemaps estão habilitados por padrão para a build do servidor e para a build do cliente em modo de desenvolvimento, mas você pode habilitá-los mais especificamente na sua configuração.
export default defineNuxtConfig({
// ou sourcemap: true
sourcemap: {
server: true,
client: true
}
})
Depuração com Node Inspector
Você pode usar o Node inspector para depurar o lado do servidor do Nuxt.
nuxt dev --inspect
Isso iniciará o Nuxt em modo dev
com o depurador ativo. Se tudo estiver funcionando corretamente, um ícone do Node.js aparecerá nas DevTools do Chrome e você poderá se conectar ao depurador.
Note que os processos do Node.js e do Chrome precisam ser executados na mesma plataforma. Isso não funciona dentro do Docker.
Depuração no Seu IDE
É possível depurar sua aplicação Nuxt no seu IDE enquanto você a desenvolve.
Exemplo de Configuração de Depuração no VS Code
Você pode precisar atualizar a configuração abaixo com um caminho para o seu navegador web. Para mais informações, visite a documentação do VS Code sobre configuração de depuração.
{
// Use o IntelliSense para aprender sobre possíveis atributos.
// Passe o mouse para ver descrições dos atributos existentes.
"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"
]
}
]
}
Se você preferir suas extensões de navegador usuais, adicione isto à configuração chrome acima:
"userDataDir": false,
Exemplo de Configuração de Depuração em IDEs JetBrains
Você também pode depurar sua aplicação Nuxt em IDEs JetBrains, como IntelliJ IDEA, WebStorm ou PhpStorm.
-
Crie um novo arquivo no diretório raiz do seu projeto e nomeie-o como
nuxt.run.xml
. -
Abra o arquivo
nuxt.run.xml
e cole a seguinte configuração de depuração:
<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>
Outros IDEs
Se você tiver outro IDE e gostaria de contribuir com uma configuração de exemplo, sinta-se à vontade para abrir um PR!
※Esta página é uma tradução não oficial da documentação oficial do Nuxt.js.
A página correspondente na documentação oficial está aqui:
https://nuxt.com/docs/3.x/guide/going-further/debugging