O que é um console de desenvolvedor?
O Console do Desenvolvedor é um ambiente de desenvolvimento integrado com um conjunto de ferramentas que você pode usar para criar, depurar e testar aplicações diretamente no navegador. Ele registra (log) as informações associadas a uma página da web, como requisições de rede, HTML, CSS, JavaScript, avisos e erros. As capturas de tela dos avisos no Console do Desenvolvedor podem ser extremamente úteis para a equipe de suporte da Elfsight ao resolver o problema que você está enfrentando com nossos widgets.
Como Abrir o Console em Diferentes Navegadores
São poucos cliques para abrir o console no navegador que estiver usando, e você também pode iniciá-lo usando atalhos ou teclas de atalho. No guia abaixo você encontrará instruções rápidas sobre como abrir o console nos navegadores mais populares e capturas de tela do processo.
Como abrir o Console de Desenvolvedor no Chrome
Para abrir o painel de desenvolvedor no Google Chrome, você precisará clicar no ícone de três pontos no canto superior direito da janela do navegador, clicar em <strong>Mais ferramentas</strong> onde você encontrará <strong>Ferramentas de Desenvolvedor</strong> em uma lista suspensa.
Mais uma opção é usar o atalho das ferramentas de desenvolvedor do Chrome: F12 (Windows/Linux) e Option + ⌘ + J (macOS).
Você verá o console na parte inferior ou na direita da página do Chrome. Selecione a opção Console e comece a analisar o desempenho do seu código.
Além disso, assim como você aprendeu a abrir a console do desenvolvedor no Chrome, ficará familiarizado com o processo de abrir as ferramentas de desenvolvedor em diferentes navegadores.
Abrir as Ferramentas de Desenvolvedor do Opera
Você pode usar o Console do Opera para inspecionar, editar e depurar HTML, CSS e JavaScript. Para usá-lo, use o atalho a seguir: Ctrl+Shift+C para abrir o Console das Ferramentas de Desenvolvedor ou Ctrl+Shift+I para abrir primeiro as Ferramentas de Desenvolvedor e, em seguida, selecionar Console.
Abrir console da Web do Firefox
A console do Mozilla pode ser aberta clicando em Desenvolvedor Web no menu do canto superior direito e, em seguida, escolhendo Console do Navegador. Além disso, você pode usar o atalho de ferramentas de desenvolvedor do Firefox, que é Ctrl+Shift+J.
Ative as Ferramentas de Desenvolvedor no Safari
No Safari, para abrir o console, você precisará habilitar o Menu do Desenvolvedor. Para fazer isso, vá em Preferências do Safari (Menu do Safari > Preferências) e escolha a Aba Avançada.
Além disso, abra o Console de Desenvolvedor no Safari clicando em Desenvolver > Mostrar Console JavaScript. Você também pode usar o atalho Option + ⌘ + C. A aba do console será aberta automaticamente, você não precisará escolhê-la.
Abrir console do Microsoft Edge
F12 Developer Tools no menu suspenso, ou pressionando F12. Você também pode clicar com o botão direito em qualquer elemento da página e selecionar Inspecionar Elemento.
Abrir console do Internet Explorer
A console de desenvolvimento do IE pode ser aberta da mesma forma que a do Edge. Clique em Ferramentas de Desenvolvedor F12 no menu suspenso ou simplesmente pressione a tecla F12. Ao fazer isso, você terá acesso com sucesso à console do Internet Explorer e poderá começar a examiná-la.
As abas principais nas Ferramentas do Desenvolvedor
Abaixo está uma visão geral rápida das principais abas do console localizadas entre as Ferramentas de Desenvolvedor. Analisamos todas elas usando o Google Chrome como exemplo.
Aba Elementos
O Painel de Elementos é uma ótima ferramenta para quem quer analisar o desempenho de CSS e HTML da sua página. Você pode clicar com o botão direito em qualquer elemento da página, escolher Inspecionar Elemento e ver os atributos do elemento destacados no código.
Console
A aba Console nas Ferramentas do Desenvolvedor do Chrome serve para exibir o funcionamento de scripts na página. É um intérprete de linhas de comando que você pode usar para iniciar um motor de script e inserir comandos para executar os scripts. Se nossa equipe de suporte pedir que você tire uma captura de tela do console, eles vão precisar de uma imagem tirada na aba Console.
Painel de Fontes
Você pode usar a aba Sources no Chrome DevTools para editar JavaScript e CSS, visualizar arquivos, criar trechos de JavaScript e usá-los adiante. Além disso, essa aba pode ajudar na depuração de código JavaScript.
Aba de Rede
O Painel de Rede pode ser usado como ferramenta de teste, que analisa o desempenho da página e identifica problemas que estão atrasando o site. A aba Rede no Chrome começa a registrar todas as requisições de rede assim que você abre as DevTools. Você pode classificá-las ainda mais por diferentes propriedades.
Aba Desempenho
O painel de Desempenho permite registrar o tempo de execução e as performances de carregamento ao longo do tempo. Este painel mostra o quão bem o site se comporta assim que está totalmente carregado e sendo utilizado pelos visitantes. Você pode escolher gravar o desempenho ou tirar uma série de capturas de tela do processo.
Aba de Memória
Você pode usar a guia Memória do Chrome para diagnosticar e corrigir problemas de memória, como inchaço, coleta de lixo e vazamentos. Todos esses problemas afetam o desempenho da página. Se esses problemas não forem resolvidos, o seu site ficará lento e pouco atraente para os visitantes.
Painel de Aplicações
Com a ajuda da aba Aplicação você pode depurar aplicações web progressivas; inspecionar e gerenciar armazenamento, bancos de dados e caches; inspecionar e excluir Cookies; e inspecionar recursos.
Segurança
Aba Segurança pode ser útil se quiser depurar problemas de conteúdo misto e certificados. O site é considerado inseguro quando a URL visitada é solicitada via HTTP. De acordo com os padrões modernos da web, isso deve ser feito via protocolo HTTPS. Se você vir que a página contém conteúdo misto, isso significa que ela está parcialmente protegida e vulnerável a interceptadores.
Aba Lighthouse
Lighthouse é uma ferramenta automatizada para melhorar a qualidade de aplicações web. Ela é integrada diretamente ao Chrome DevTools. Ela oferece auditorias de desempenho, acessibilidade, PWAs (Aplicações Web Progressivas), SEO e muito mais.
Avisos e erros comuns no console ao usar os widgets Elfsight
Às vezes algo dá errado no funcionamento dos widgets da Elsfight. Não se assuste se vir avisos vermelhos ou erros no console. Se souber o motivo pelo qual aconteceram, provavelmente conseguirá corrigir tudo sozinho. Abaixo você encontrará uma lista de falhas comuns que pode ver no console.
Estes são dois erros relacionados a todos os nossos widgets:
WIDGET BLOQUEADO – você bloqueou o domínio do site na sua conta Elfsight se o erro estiver relacionado a apps.elfsight.com.
WIDGET NÃO ENCONTRADO – você pode ter excluído acidentalmente o widget na conta. Verifique-o.
Viu? Não é nada. Agora vamos discutir alguns erros comuns no funcionamento de determinados widgets e integrações.
Problemas comuns do Google Maps
Calculadoras de Fitness e Saúde
ExpiredKeyMapError – a chave de API expirou ou não é reconhecida. Na maioria dos casos, você deve gerar uma nova. Se você obtiver esse erro logo após criar uma nova chave de API, será necessário aguardar de 1 a 8 minutos ou ativar a Places API separadamente.
RefererNotAllowedMapError – A URL da Elfsight que carrega a Maps JavaScript API não está autorizada como referer. Verifique as configurações de referer da sua chave de API no Google Cloud Platform Console. Ao usar nosso widget, você precisará adicioná-nos como referer. Confira este artigo sobre como fazer isso corretamente.
ClientBillingNotEnabledMapError – Para usar o widget de mapas do Google, você precisa ter uma conta de faturamento. Essa falha ocorreu porque você não ativou o faturamento no seu projeto. A solução é habilitar o faturamento no Google Cloud Project associado a este ID de cliente. Você pode fazer isso aqui.
BillingNotEnabledMapError – Usando o Google Maps, você precisará habilitar o faturamento.
Falhas na Galeria YouTube no console
Se você usar a Galeria de Vídeos do YouTube da Elfsight, não precisará se preocupar com a maioria dos problemas listados abaixo. No entanto, dois problemas gerais também podem ocorrer em nosso widget.
quotaExceeded– O YouTube usa cotas para permitir que conteúdos sejam acessados e carregados em sites ou aplicativos. Quando a cota do YouTube é excedida, a Galeria do YouTube pode parar de funcionar ou ficar lenta no site. A solução pode ser a seguinte:
- Obtenha uma nova chave de API se você estiver buscando conteúdo do YouTube por conta própria;
- Entre em contato com nossa equipe de suporte em [email protected] se estiver usando a Galeria YouTube da Elfsight, que é muito mais fácil.
videoNotFound – Este aviso pode ocorrer se a URL que você inseriu para vincular ao vídeo do YouTube estiver incorreta. Às vezes os usuários colam o link da página com o vídeo, mas não é o local real do vídeo, resultando no erro. Verifique tudo e cole o link para o vídeo original.
Erros do Feed do Facebook e do Instagram
Se o Feed do Facebook ou o Instagram pararem de funcionar, você pode verificar o que está acontecendo no Console de Desenvolvedor. Como ambas as aplicações populares funcionam com base na API do Facebook, as explicações de erro a seguir podem funcionar igualmente para as duas.
err_ssl_protocol_error ao usar o widget de Feed do Facebook ou Instagram no seu site pode ser causado por várias razões. Para resolvê-lo, você pode tentar definir uma data e hora corretas, limpar os dados de navegação do Chrome ou limpar o estado SSL. Além disso, se a Facebook Graph API retornar erros, você pode usar o fbtrace_id para obter mais informações sobre eles. No entanto, se nada disso ajudar, você pode sempre entrar em contato com nossa equipe de suporte.
rest_cannot_access – geralmente significa que um widget de terceiros, como o plugin Password Protect, está impedindo que nosso widget funcione corretamente. Desativar esse serviço costuma resolver o problema.
A página solicitada não pode ser exibida no momento – isso pode significar que sua aplicação do Facebook está em modo de desenvolvimento. Você não verá essa mensagem de erro se for um usuário do Elfsight Facebook Feed; no entanto, se vir esta mensagem, entre em contato com nossa equipe de suporte.
OAuthException no Instagram, em particular, significa que o status de login ou o token de acesso foi revogado, expirou ou é inválido por algum motivo. Nesse caso, entre em contato com nossa equipe de suporte; os desenvolvedores da Elfsight obterão um novo token de acesso ou verificarão um subcódigo, se houver.
Os erros de console mais comuns
Como desenvolvedor web experiente, você provavelmente já viu esses erros mais do que gostaria. Eles aparecem no Chrome quando você lê uma propriedade ou chama um método em um objeto indefinido. Você pode testar e capturar esses erros específicos no Console de Desenvolvedor do Chrome e do Safari.
Se você não é um programador profissional, pode pular esta diretriz.
Uncaught TypeError: Não é possível ler a propriedade
Isso pode acontecer por várias razões, mas a mais comum é a inicialização inadequada do estado ao renderizar componentes de UI. Isso é fácil de corrigir. A forma mais simples: inicialize o estado com valores padrão sensatos no construtor.
TypeError: ‘indefinido’ não é um objeto
Este é um erro que ocorre no Safari quando você lê uma propriedade ou chama um método em um objeto indefinido. Você pode testar isso no Console do Desenvolvedor do Safari. É praticamente o mesmo erro do Chrome acima, mas o Safari usa uma mensagem de erro diferente.
(unknown): Erro de script
Se você vir este erro, primeiramente obtenha a mensagem real. Você pode obtê-la fazendo o seguinte: definir o cabeçalho Access-Control-Allow-Origin para * significa que o recurso pode ser acessado corretamente a partir de qualquer domínio. Você pode substituir * pelo seu domínio, se necessário: por exemplo, Access-Control-Allow-Origin: www.example.org. No entanto, gerenciar vários domínios fica complicado e pode não valer a pena se estiver usando um CDN devido a problemas de cache que podem surgir.
É assim que você deve resolver os erros mais comuns do console do JavaScript. Vamos manter esta lista atualizada conforme encontrarmos outros problemas, tanto nossos quanto dos nossos clientes.
Conclusão
Console do Desenvolvedor: uma ferramenta poderosa que permite a qualquer programador acessar uma imensa quantidade de dados do seu site. Não é difícil abri-la e começar a usar, porém exigirá tempo e prática — tenha paciência.
Quais erros você já encontrou? Compartilhe sua experiência nos comentários abaixo; ficaremos felizes em discutir com você!
Além disso, temos guias incríveis; por exemplo, você pode aprender como incorporar avaliações do Google no site!
