O que são as ferramentas de desenvolvimento do navegador

Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

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.

Como abrir o devtools no seu navegador

O devtools está inserido no navegador em uma janela semelhante a esta:

Como você acessa? Três modos:

  • Teclado. Ctrl + Shift + I, exceto:
    • Internet Explorer. F12
    • Mac OS X. ⌘ + ⌥ + I
  • Menu bar.
    • Firefox. Menu  ➤ Toggle Tools, or Tools ➤ Web Developer ➤ Toggle Tools
    • Chrome. View ➤ Developer ➤ Developer Tools
    • Safari. Develop ➤ Show Web Inspector. Se você nãoconsegue ver o Develop menu, vá para Safari Preferences ➤ Advanced, e confira o Show Develop menu no menu bar checkbox. 
    • Opera. Developer ➤ Web Inspector
  • Context menu. Pressione-e-segure/botão-direito no item da webpage (Ctrl-click on the Mac), e escolha Inspect Element no menu de contexto que aparece. (An added bonus: this method straight-away highlights the code of the element you right-clicked.)

O Inspetor: DOM explorer e editor CSS

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,

  • Clique a aba Inspector.
  • No Internet Explorer, Clique a aba DOM Explorer, ou pressione Ctrl + 1.
  • No Safari, os controles não são apresentados claramente, mas você poderia ver se não tiver selecionado algo para aparecerna janela.  Pressione o botão Style para ver o CSS.

Explore o inspector DOM

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.

  • Delete Node (às vezes Delete Element). Exclui o elemento atual.
  • Edit as HTML (às vezes Add attribute/Edit text). Permite alterar o HTML e ver os resultados na hora. Muito útil para depuração e teste.
  • :hover/:active/:focus. Força os estados dos elementos a serem alternados, para que você possa ver como seria seu estilo.
  • Copy/Copy as HTML. Copia o HTML atualmente selecionado.
  • Alguns navegadores também têm Copy CSS Path e Copy XPath available, para permitir que você copie o seletor CSS ou a expressão XPath que selecionaria o elemento HTML atual.

Try editing some of your DOM now. Double-click an element, or right-click it and choose Edit as HTML from the context menu. You can make any changes you'd like, but you cannot save yTente 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.

Explorando o editor de CSS

Por padrão, o editor CSS exibe as regras CSS aplicadas ao elemento atualmente selecionado:

Esses recursos são especialmente úteis:

  • As regras aplicadas ao elemento atual são mostradas em ordem de mais específicas.
  • Clique nas caixas de seleção ao lado de cada declaração para ver o que aconteceria se você removesse a declaração.
  • Clique na pequena seta ao lado de cada propriedade abreviada para mostrar os equivalentes de longhand da propriedade.
  • Clique no nome ou no valor de uma propriedade para exibir uma caixa de texto, na qual você pode digitar um novo valor para obter uma visualização ao vivo de uma alteração de estilo.
  • Ao lado de cada regra está o nome do arquivo e o número da linha em que a regra está definida. Clicar nessa regra faz com que as ferramentas dev pularem para mostrá-la em sua própria visão, onde geralmente podem ser editadas e salvas.
  • Você também pode clicar na chave de fechamento de qualquer regra para abrir uma caixa de texto em uma nova linha, onde você pode escrever uma declaração completamente nova para a sua página.

Você notará várias guias clicáveis na parte superior do Visualizador de CSS:

  • Computed: Isso mostra os estilos calculados para o elemento atualmente selecionado (os valores finais normalizados que o navegador aplica).
  • Box model: Isso representa visualmente o modelo de caixa do elemento atual, para que você possa ver rapidamente o preenchimento, a borda e a margem aplicados a ele e o tamanho do conteúdo.
  • Fonts: No Firefox, a guia Fontes mostra as fontes aplicadas ao elemento atual.

Descubra mais

Descubra mais sobre o Inspetor em diferentes navegadores:

O console JavaScript

O console JavaScript é uma ferramenta incrivelmente útil para depurar JavaScript que não funciona. O console JavaScript é uma ferramenta incrivelmente útil para depurar JavaScript que não está funcionando como esperado. Ele permite que você execute linhas de JavaScript contra a página atualmente carregada no navegador e relata os erros encontrados enquanto o navegador tenta executar seu código. Para acessar o console em qualquer navegador, basta pressionar o botão Console. (No Internet Explorer, pressione Ctrl + 2.) Isto lhe dará 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):

  1. alert('hello!');
  2. document.querySelector('html').style.backgroundColor = 'purple';
  3. 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.

  1. alert('hello!);
  2. document.cheeseSelector('html').style.backgroundColor = 'purple';
  3. 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ípticos, mas deve ser bem simples descobrir esses problemas!

Descubra mais

Descubra mais sobre o console JavaScript em diferentes navegadores:

Veja também

Etiquetas do documento e colaboradores

Colaboradores desta página: italorangel, ocaccy, 7aylors, rubenfaria
Última atualização por: italorangel,