Todo navegador web moderno inclui um poderoso conjunto de ferramentas para desenvolvedores. Essas ferramentas fazem muitas coisas, desde inspecionar o HTML, CSS e JavaScript recém carregado e quais recursos foram requeridos até mostrar quanto tempo a página precisou para carregar. Este artigo explica como usar as funções básicas das ferramentas para desenvolvedores do seu navegador.
Nota: Antes de você executar os exemplos abaixo, abra o Beginner's example site (site de exemplos do iniciante) que nós criamos durante o início da série de artigos da Web ( Getting started with the Web ). Você poderá abrir isso enquanto segue os passos abaixo.
O devtools está inserido no navegador em uma janela semelhante a esta:
Como você acessa? Três modos:
➤ 
➤ Toggle Tools, or Tools ➤ Web Developer ➤ Toggle Tools
O devtools usualmente abre por padrão o inspetor, que se parece com a imagem abaixo. Esta ferramenta permite que você veja o resultado do HTML num site em execução, bem como o CSS aplicado en cada elemento na página. Ele também lhe mostra as mudanças efetuadas no HTML e CSS e os resultados são produzidos imediatamente, ao vivo, na janela do navegador.
Se você não vê o inspector,
Para começar tente pressionar o botão direito do mouse sobre um elemento HTML no inspetor do DOM e olhe para o menu de contexto. As opções do menu variam nos navegadores, mas os mais importantes são os mesmos.
Tente editar alguns dos seus DOM agora. Clique duas vezes em um elemento ou clique com o botão direito do mouse e escolha Editar como HTML no menu de contexto. Você pode fazer alterações que quiser, mas não pode salvar suas alterações.
Por padrão, o editor CSS exibe as regras CSS aplicadas ao elemento atualmente selecionado:
Esses recursos são especialmente úteis:
Você notará várias guias clicáveis na parte superior do Visualizador de CSS:
Descubra mais sobre o Inspetor em diferentes navegadores:
O depurador Javascript permite a visualização dos conteúdos das variáveis e a configuração dos pontos de paradas(breakpoints) no código. Breakpoints são marcadores de linha para analisar a execução do código. A identificação previne problemas.
Para acessar o (debugger)depurador:
Firefox: Clique ➤ Web Developer ➤ Debugger ou pelo atalho Ctrl + Shift + S para abrir o Debugger Javascript. Se a ferramenta já estiver vísivel, clique na aba Debugger.
Chrome: Abra as ferramentas de desenvolvimento e selecione a aba Fontes(Sources). (Opera funciona igualmente).
Edge e Internet Explorer 11: Aperte F12 então, Ctrl + 3, ou se a ferramenta já estiver visível, clique na aba Debugger(depurador).
Safari: Abra as ferramentas de desenvolvedor e então selecione a aba Debugger(depurador).
Há três painéis no Depurador(debugger) no Firefox
O primeiro painel na parte esquerda contém uma lista de arquivos associado com a página que está sendo depurada(debugging). Selecione o arquivo da seleção. Clique no arquivo para selecionar e visualizar os conteúdos no painel central do Debugger.
Insira os pontos de parada (breakpoints) onde deseja que a execução pare. Na imagem abaixo, a linha selecionada é a 18 na qual tem um ponto de parada (breakpoint).
À direita do painel é exibida uma lista de expressões e pontos de paradas adicionadas.
Na imagem, na primeira seção, Watch expressions, mostra a lista de itens e variáveis que foram adicionadas. Expanda a lista para visualizar os valores no vetor.
Na próxima seção, Pontos de paradas, lista os pontos de paradas na página. No arquivo example.js, um breakpoint foi adicionado listItems.push(inputNewItem.value);
As duas seções finais aparecem somente quando o código está executando.
A seção Call stack (chamada na pilha) mostra que o código foi executado para a linha atual. A função manuseia o clique do mouse e o código está pausado no ponto de parada (breakpoint).
A seção final, Scopes(escopos), mostra os valores visíveis em vários pontos no código. Por exemplo, na imagem abaixo, os objetos disponíveis estão na função addItemClick.
O console JavaScript é uma ferramenta incrivelmente útil para depurar códigos em JavaScript que não está funcionando como o esperado. Ele permite que você execute linhas de JavaScript enquanto a página é carregada no navegador e relata os erros encontrados enquanto o navegador tenta executar o código.
Para acessar o console basta abrir ferramentas de desenvolvimentos e escolher a aba Console.
No Firefox o atalho é ctrl + shift+ k ou no menu comando: ➤ Web Developer ➤ Web Console, or Tools ➤ Web Developer ➤ Web Console.
Aparecerá uma janela como a seguinte:
Para ver o que acontece, tente inserir os seguintes trechos de código no console, um por um (e, em seguida, pressione Enter):
alert('hello!');
document.querySelector('html').style.backgroundColor = 'purple';
var myImage = document.createElement('img');
myImage.setAttribute('src','https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png');
document.querySelector('h1').appendChild(myImage);
Agora, tente inserir as seguintes versões incorretas do código e veja o que você obtém.
alert('hello!);
document.cheeseSelector('html').style.backgroundColor = 'purple';
var myImage = document.createElement('img');
myBanana.setAttribute('src','https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png');
document.querySelector('h1').appendChild(myImage);
Você começará a ver o tipo de erro que o navegador retorna. Muitas vezes, esses erros são bastante críticos, mas deve ser bem simples descobrir esses problemas!
Descubra mais sobre o console JavaScript em diferentes navegadores: