Corrigir erros do JavaScript relatados no console

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

Corrigir erros do JavaScript

Uma das principais funções do Console é exibir todos os erros de JavaScript encontrados na página da Web.

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

1. Abra a página da Web de demonstração Erro de JavaScript relatado na ferramenta Console em uma nova janela ou guia.

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

3. Clique no botão Console na Barra de Atividades. No DevTools, o Console fornece mais informações sobre o erro:

   

   Muitas mensagens de erro no Console têm um botão Pesquisar por esta mensagem na Web , mostrado como uma lupa. Para obter mais informações, consulte Pesquisar na Web por 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.

4. error.html:16 Clique no link à direita da mensagem de erro no Console. A ferramenta Fontes é aberta 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 redor dele. Mas nenhum h2 elemento existe, portanto, o script falha.

Localizar e depurar problemas de rede

O Console relata erros de rede.

Página de demonstração: Erro de rede relatado no console

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

2. 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 é exibida loading, mas nada muda na página da Web, pois os dados nunca são recuperados. No Console, ocorreram os dois erros a seguir:

   • Um erro de rede que começa com GET o método HTTP seguido por um URI.

   • Um Uncaught (in promise) TypeError: data.forEach is not a function erro.

3. Clique no link para a página da Web e na linha de código em que ocorre o erro para abrir a ferramenta Fontes. Ou seja, clique network-error.html:40 no link no Console:

   

   A ferramenta Fontes é aberta. A linha de código problemática é realçada e seguida por um error botão (x).

4. Clique no botão de erro (x). A mensagem Failed to load resource: the server responded with a status of 404 () será exibida.

   

   Este erro informa que a URL solicitada não foi encontrada.

5. Abra a ferramenta Rede , da seguinte maneira: abra a Console e clique no URI associado ao erro.

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

   

   A ferramenta Rede exibe mais informações sobre a solicitação com falha:

   

6. 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.

7. 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 houver erros no console

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

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

1. Abra a página da demonstração Corrigido um erro de rede 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 erros 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 detecta erros e exibe cada um deles no console, da seguinte maneira:

1. Abra a página da Web de demonstração Relatório de erros de rede no Console e na IU em uma nova janela ou guia.

2. 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 seu 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 da seção anterior, você também pode criar diferentes erros e problemas de rastreamento no Console.

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

Para exibir duas mensagens de erro criadas no Console:

1. Abra a página de demonstração Criação de relatórios de erros e declarações no Console em uma nova janela ou guia.

2. 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 são exibidas 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 se solicitam sucessivamente:

   • first()
   • second()
   • third()

   Cada função envia um name argumento para a outra. third() Na função, você marca se o argumento existe e, se não existir, registra um erro de que o name nome não está definido. If name for defined, use o assert() método para marcar se o name argumento tem menos de oito letras.

   Você solicita a first() função três vezes, com os seguintes parâmetros:

   • Nenhum argumento que dispare third() o console.error() método na função.

   • O termo Console como um parâmetro para a função não causa um erro porque name o first() argumento existe e é menor que oito letras.

   • A frase Microsoft Edge Canary como um parâmetro para a first() função faz com que o console.assert() método relate um erro, pois o parâmetro tem mais de oito letras.

   A demonstração usa o console.assert() método para criar relatórios de erros condicionais. Os dois exemplos a seguir têm o mesmo resultado, mas é necessária 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 realizam o mesmo teste. Como a asserção precisa registrar um resultado negativo:

   • Você testa x < 40if no caso.
   • Você testa x >= 40 a asserçã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 acompanhar quais funções são solicitadas para chegar à função atual.

Para exibir o rastreamento na Console:

1. Abra a página de demonstração Criando rastreamentos no Console em uma nova janela ou guia.

2. 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 com here() nome there() e, em seguida everywhere(), , e, no segundo exemplo, para exibir o nome everywhere().

   Aqui está o rastreamento produzido no Console:

   

Confira também

• Visão geral do console - Uso geral do Console para exibir e resolver mensagens de erro.