nuxt logo

Tradução da Documentação (Não Oficial)

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.

  1. Crie um novo arquivo no diretório raiz do seu projeto e nomeie-o como nuxt.run.xml.

  2. 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!