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 (sometimes Delete Element). Deletes the current element.
  • Edit as HTML (sometimes Add attribute/Edit text). Lets you change the HTML and see the results on the fly. Very useful for debugging and testing.
  • :hover/:active/:focus. Forces element states to be toggled on, so you can see what their styling would look like.
  • Copy/Copy as HTML. Copy the currently selected HTML.
  • Some browsers also have Copy CSS Path and Copy XPath available, to allow you to copy the CSS selector or XPath expression that would select the current HTML element.

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 your changes.

Exploring the CSS editor

By default, the CSS editor displays the CSS rules applied to the currently selected element:

These features are especially handy:

  • The rules applied to the current element are shown in order of most-to-least-specific.
  • Click the checkboxes next to each declaration to see what would happen if you removed the declaration.
  • Click the little arrow next to each shorthand property to show the property's longhand equivalents.
  • Click a property name or value to bring up a text box, where you can key in a new value to get a live preview of a style change.
  • Next to each rule is the file name and line number the rule is defined in. Clicking that rule causes the dev tools to jump to show it in its own view, where it can generally be edited and saved.
  • You can also click the closing curly brace of any rule to bring up a text box on a new line, where you can write a completely new declaration for your page.

You'll notice a number of clickable tabs at the top of the CSS Viewer:

  • Computed: This shows the computed styles for the currently selected element (the final, normalized values that the browser applies).
  • Box model: This represents visually the current element's box model, so you can see at a glance what padding, border and margin is applied to it, and how big its content is.
  • Fonts: In Firefox, the Fonts tab shows the fonts applied to the current element.

Find out more

Find more out about the Inspector in different browsers:

The JavaScript console

The JavaScript console is an incredibly useful tool for debugging JavaScript that isn't working as expected. It allows you to run lines of JavaScript against the page currently loaded in the browser, and reports the errors encountered as the browser tries to execute your code. To access the console in any browser, just press the Console button. (In Internet Explorer, press Ctrl + 2.) This will give you a window like the following:

To see what happens, try entering the following snippets of code into the console one by one (and then pressing 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);

Now try entering the following incorrect versions of the code and see what you get.

  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);

You'll start to see the kind of errors that the browser returns. Often these errors are fairly cryptic, but it should be pretty simple to figure these problems out!

Find out more

Find more out about the JavaScript console in different browsers:

See also

Etiquetas do documento e colaboradores

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