Corrigir erros do JavaScript relatados no Console

Artigo
12/08/2023

Este artigo orienta você a percorrer seis páginas de demonstração para demonstrar a resolução de erros JavaScript relatados no Console.

Corrigir erros do JavaScript

A primeira experiência que você tem com o Console provavelmente será erros em scripts.

Página de demonstração: erro JavaScript relatado na ferramenta Console

Abra o erro JavaScript da página da Web de demonstração relatado na ferramenta Console em uma nova janela ou guia.
Clique com o botão direito do mouse em qualquer lugar da página da Web e selecione Inspecionar. Ou pressione F12. O DevTools é aberto ao lado da página da Web.
Clique no botão Console na Barra de Atividades. Em DevTools, o Console fornece mais informações sobre o erro:

Muitas mensagens de erro no Console têm uma pesquisa dessa mensagem no botão Web , mostrada como uma lupa. Para obter mais informações, consulte Pesquisar na Web uma cadeia de caracteres de mensagem de erro do Console.

As informações nesta mensagem de erro sugerem que o erro está na linha 16 do error.html arquivo.
Clique no error.html:16 link à direita da mensagem de erro no Console. A ferramenta Fontes abre e realça a linha de código com o erro:

O script tenta obter o primeiro h2 elemento no documento e pintar uma borda vermelha ao seu redor. Mas nenhum h2 elemento existe, portanto, o script falha.

Localizar e depurar problemas de rede

O Console também relata erros de rede.

Página de demonstração: erro de rede relatado no Console

Abra o erro de rede da página de demonstração relatado no Console em uma nova janela ou guia.
Clique com o botão direito do mouse em qualquer lugar da página da Web e selecione Inspecionar. Ou pressione F12. O DevTools é aberto ao lado da página da Web.

A tabela exibe loading, mas nada muda na página da Web, porque os dados nunca são recuperados. No Console, ocorreram os dois seguintes erros:
- Um erro de rede que começa com GET o método HTTP seguido de um URI.
- Um Uncaught (in promise) TypeError: data.forEach is not a function erro.
Clique no link para a página da Web e a linha de código em que o erro ocorre para abrir a ferramenta Fontes. Ou seja, clique no network-error.html:40 link no Console:

A ferramenta Fontes é aberta. A linha problemática de código é realçada e seguida por um error botão (x).
Clique no botão erro (x). A mensagem Failed to load resource: the server responded with a status of 404 () é exibida.

Esse erro informa que a URL solicitada não foi encontrada.
Abra a ferramenta Rede , da seguinte maneira: abra o Console e clique no URI associado ao erro.

O Console exibe um código HTTP status do erro depois que um recurso não é carregado:

A ferramenta Rede exibe mais informações sobre a solicitação com falha:
Inspecione os cabeçalhos na ferramenta Rede para obter mais informações:

Qual era o problema? Dois caracteres de barra (//) ocorrem no URI solicitado após a palavra repos.
Abra a ferramenta Fontes e inspecione a linha 26. Um caractere de barra à direita (/) ocorre no final do URI base. A ferramenta Fontes exibe a linha de código com o erro:

Exibindo a página resultante quando não há erros no Console

Em seguida, examinaremos a página resultante quando não houver erros no Console.

Página de demonstração: erro de rede corrigido relatado no Console

Abra a página da Web de demonstração Erro de rede fixa relatado no Console em uma nova janela ou guia.

O exemplo sem erros carrega informações do GitHub e as exibe:

Página de demonstração: relatório de erro de rede no Console e na interface do usuário

Use técnicas de codificação defensiva para evitar as experiências anteriores do usuário. Verifique se o código captura erros e exibe cada erro no Console, da seguinte maneira:

Abra o relatório de erro de rede da página da Web de demonstração no Console e na interface do usuário em uma nova janela ou guia.
Clique com o botão direito do mouse em qualquer lugar da página da Web e selecione Inspecionar. Ou pressione F12. O DevTools é aberto ao lado da página da Web.

A página da Web de exemplo demonstra essas práticas:
- Forneça uma interface do usuário ao usuário para indicar que algo deu errado.
- No Console, forneça informações úteis sobre o erro de rede do código.
O exemplo captura e relata erros:

O código a seguir na demonstração captura e relata erros usando o handleErrors método, especificamente a throw Error linha:
```
const handleErrors = (response) => {
   if (!response.ok) {
      let message = 'Could not load the information'
      document.querySelector('tbody').innerHTML = `
      <tr><td colspan=3>Error ${message}</td></tr>
      `;
      throw Error(response.status + ' ' + response.statusText);
   }
   return response;
};
```

Criar erros e rastreamentos no Console

Além do throw Error exemplo na seção anterior, você também pode criar erros diferentes e rastrear problemas no Console.

Página de demonstração: criando relatórios de erro e declarações no Console

Para exibir duas mensagens de erro criadas no Console:

Abra a página de demonstração Criando relatórios de erro e declarações no Console em uma nova janela ou guia.
Clique com o botão direito do mouse em qualquer lugar da página da Web e selecione Inspecionar. Ou pressione F12. O DevTools é aberto ao lado da página da Web.

As mensagens de erro aparecem no Console:

A página de demonstração usa o seguinte código:
```
function first(name) { second(name); }
function second(name) { third(name); }
function third(name) {
    if (!name) {
        console.error(`Name isn't defined :(`)
    } else {
        console.assert(
            name.length <= 8,
            `"${name} is not less than eight letters"`
        );
    }
}
first();
first('Console');
first('Microsoft Edge Canary');
```
Há três funções que solicitam umas às outras em sucessão:
- first()
- second()
- third()
Cada função envia um name argumento para a outra. third() Na função, você marcar se o name argumento existir e, se ele não existir, você registrará um erro de que o nome não está definido. Se name for definido, você usará o assert() método para marcar se o name argumento tiver menos de oito letras.

Você solicita a first() função três vezes, com os seguintes parâmetros:
- Nenhum argumento que dispara o console.error() método na third() função.
- O termo Console como parâmetro para a first() função não causa um erro porque name o argumento existe e é menor que oito letras.
- A frase Microsoft Edge Canary como parâmetro para a first() função faz com que o console.assert() método reporte um erro, pois o parâmetro é maior que oito letras.
A demonstração usa o console.assert() método para criar relatórios de erro condicional. Os dois exemplos a seguir têm o mesmo resultado, mas um precisa de uma instrução extra if{} :
```
let x = 20;
if (x < 40) { console.error(`${x} is too small`) };
console.assert(x >= 40, `${x} is too small`)
```
A segunda e a terceira linhas do código executam o mesmo teste. Porque a declaração precisa registrar um resultado negativo:
- Você testa x < 40 no if caso.
- Você testa para x >= 40 a declaração.

Página de demonstração: criando rastreamentos no Console

Se você não tiver certeza de qual função solicita outra função, use o console.trace() método para rastrear quais funções são solicitadas para chegar à função atual.

Para exibir o rastreamento no Console:

Abra a página de demonstração Criando rastreamentos no Console em uma nova janela ou guia.
Clique com o botão direito do mouse em qualquer lugar da página da Web e selecione Inspecionar. Ou pressione F12. O DevTools é aberto ao lado da página da Web.

A página usa este código:
```
function here() {there()}
function there() {everywhere()}
function everywhere() {
   console.trace();
}
here();
there();
```
O resultado é um rastreamento a ser exibido que here() é nomeado there() e, em seguida everywhere(), , e no segundo exemplo para exibir que ele se chama everywhere().

Aqui está o rastreamento produzido no Console:

Confira também

Visão geral do console – uso geral do Console para exibir e resolve mensagens de erro.

Corrigir erros do JavaScript relatados no Console