{"id":43525,"date":"2021-07-28T15:20:50","date_gmt":"2021-07-28T13:20:50","guid":{"rendered":"https:\/\/kinsta.com\/?p=97002"},"modified":"2025-02-11T05:57:32","modified_gmt":"2025-02-11T08:57:32","slug":"ferramenta-inspecionar","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/ferramenta-inspecionar\/","title":{"rendered":"Como Usar a Ferramenta Inspecionar do seu Navegador para Editar P\u00e1ginas da Web"},"content":{"rendered":"<p>H\u00e1 in\u00fameros <a href=\"https:\/\/kinsta.com\/pt\/blog\/ferramentas-de-desenvolvimento-web\/\">recursos valiosos de desenvolvimento web<\/a>, sejam livros, v\u00eddeos, <a href=\"https:\/\/kinsta.com\/pt\/blog\/cursos-de-web-design\/\">cursos on-line<\/a> e muito mais. Aprender a usar a ferramenta Inspecionar Elemento do navegador \u00e9 uma capacidade t\u00e3o poderosa. \u00c9 uma ferramenta de aprendizagem inestim\u00e1vel &#8211; uma ferramenta que est\u00e1 bem debaixo da ponta de seus dedos e sempre acess\u00edvel.<\/p>\n<p>Com o recurso Inspecionar Elemento, voc\u00ea pode ver o funcionamento interno do site. Embora voc\u00ea s\u00f3 possa ver marcas front-end como HTML, CSS e, \u00e0s vezes, JavaScript, isso lhe d\u00e1 uma maneira de ver precisamente como os desenvolvedores constru\u00edram um site.<\/p>\n<p>Neste artigo, vamos lhe mostrar como usar a ferramenta Inspecionar Elemento e algumas das tecnologias, caracter\u00edsticas e funcionalidades relacionadas que voc\u00ea vai encontrar. Primeiro, vamos dar-lhe uma introdu\u00e7\u00e3o formal \u00e0 pr\u00f3pria ferramenta Inspecionar Elemento.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<p><strong>Confira nosso <a href=\"https:\/\/www.youtube.com\/watch?v=TYYB8s4uUI4\">guia em v\u00eddeo sobre como editar um site com a ferramenta inspecionar elemento<\/a><\/strong><\/p>\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=TYYB8s4uUI4\"><\/kinsta-video>\n<h2>Introduzindo o recurso Inspecionar Elemento<\/h2>\n<p>Nos primeiros tempos da web, s\u00f3 havia uma maneira de ver o c\u00f3digo de um site &#8211; o recurso <strong>View Source.<\/strong><\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"The Kinsta View Source page\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/kinsta-view-source.png\" alt=\"P\u00e1gina \"View Source\" da Kinsta.com\" width=\"1000\" height=\"637\"><figcaption class=\"wp-caption-text\">P\u00e1gina &#8220;View Source&#8221; da Kinsta.com<\/figcaption><\/figure>\n<p>Esta situa\u00e7\u00e3o prevaleceu nos dias antes de termos <a href=\"https:\/\/kinsta.com\/pt\/blog\/css-wordpress\/\">Folhas de Estilo em Cascata (CSS)<\/a> e <a href=\"https:\/\/kinsta.com\/pt\/blog\/bibliotecas-javascript\/\">JavaScript<\/a> em abund\u00e2ncia. Os desenvolvedores web usavam HTML para todos os elementos do site, incluindo conte\u00fado, design, e&#8230; bem, tudo.<\/p>\n<p>Uma vez que a web come\u00e7ou a evoluir e as tecnologias subjacentes aumentaram em poder, foi necess\u00e1rio desenvolver melhores ferramentas. <a href=\"http:\/\/firebug.com\">Firefox&#8217;s Firebug<\/a> foi uma solu\u00e7\u00e3o precoce para descobrir como um site funcionava e funcionava sob o cap\u00f4:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"The Firefox and Firebug logos.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/firebug.png\" alt=\"Os logotipos Firefox e Firebug\" width=\"1000\" height=\"230\"><figcaption class=\"wp-caption-text\">Os logotipos Firefox e Firebug<\/figcaption><\/figure>\n<p>Depois de um tempo, essa funcionalidade encontrou seu caminho em quase todos os navegadores. Hoje, sabemos que essa funcionalidade \u00e9 a ferramenta Inspecionar Elemento:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"The Inspect Element tool used on the Kinsta website.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/kinsta-inspect-element.png\" alt=\"A ferramenta Inspecionar Elemento no site da Kinsta.\" width=\"1000\" height=\"580\"><figcaption class=\"wp-caption-text\">A ferramenta Inspecionar Elemento no site da Kinsta.<\/figcaption><\/figure>\n<p>\u00c9 uma maneira poderosa de ver a tecnologia e o c\u00f3digo subjacente de um site. Como tal, voc\u00ea pode encontr\u00e1-la em alguns lugares diferentes &#8211; muitas vezes atrav\u00e9s de um menu da barra de ferramentas, clicando com o bot\u00e3o direito em uma p\u00e1gina e selecionando a op\u00e7\u00e3o, ou com um atalho de teclado.<\/p>\n<p>Embora o foco principal da ferramenta Inspecionar Elemento esteja no HTML e CSS de uma p\u00e1gina, h\u00e1 muito mais que voc\u00ea pode fazer com ela.<\/p>\n\n<h3>Visitando o painel da ferramenta Inspecionar Elemento<\/h3>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Brave's DevTools.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/brave-devtools-1.png\" alt=\"DevTools da Brave.\" width=\"1000\" height=\"629\"><figcaption class=\"wp-caption-text\">DevTools da Brave.<\/figcaption><\/figure>\n<p>A ferramenta Inspecionar Elemento \u00e9 muito mais do que uma forma de exibir c\u00f3digo. Muitas vezes h\u00e1 v\u00e1rios pain\u00e9is a serem acessados:<\/p>\n<ul>\n<li><strong>Inspecionar &#8211; <\/strong>Isto \u00e9 chamado de <strong>Elementos <\/strong>em alguns navegadores. \u00c9 a tela principal da ferramenta Inspecionar Elemento e mostra o c\u00f3digo da p\u00e1gina, juntamente com o CSS espec\u00edfico do elemento. Voc\u00ea tamb\u00e9m encontrar\u00e1 mais detalhes sobre o &#8220;grid system&#8221; de um site e outros aspectos.<\/li>\n<li><strong>Console &#8211; <\/strong>Este \u00e9 um registro de aviso para um site, e \u00e9 um lugar onde voc\u00ea tamb\u00e9m pode inserir trechos de c\u00f3digo para realizar um teste r\u00e1pido de uma id\u00e9ia.<\/li>\n<li><strong>Rede &#8211; <\/strong>Aqui, voc\u00ea ver\u00e1 as solicita\u00e7\u00f5es feitas de e para um servidor, tais como todas as solicita\u00e7\u00f5es POST e GET.<\/li>\n<li><strong>Performance &#8211; <\/strong>\u00c9 claro, um site <a href=\"https:\/\/kinsta.com\/pt\/aprenda\/acelerar-o-seu-site-wordpress\/\">tem que ser performante<\/a>. Como tal, h\u00e1 uma ferramenta dedicada para ajud\u00e1-lo a avaliar algumas m\u00e9tricas essenciais do site. Alguns navegadores fazem melhor do que outros aqui.<\/li>\n<li><strong>Mem\u00f3ria &#8211; <\/strong>Este painel permite ver como um site utiliza a mem\u00f3ria e, novamente, alguns navegadores oferecem m\u00e9tricas extensivas.<\/li>\n<li><strong>Aplicativo &#8211; <\/strong>Dentro deste painel, voc\u00ea pode ver toda uma gama de informa\u00e7\u00f5es sobre o cache do site, servi\u00e7os de fundo e muito mais.<\/li>\n<\/ul>\n<p>Al\u00e9m disto, h\u00e1 mais pain\u00e9is que voc\u00ea pode acrescentar:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"A list of further panels within Brave's DevTools.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/brave-more-devtools.png\" alt=\"Uma lista de outros pain\u00e9is dentro das DevTools da Brave.\" width=\"1000\" height=\"643\"><figcaption class=\"wp-caption-text\">Uma lista de outros pain\u00e9is dentro da DevTools da Brave.<\/figcaption><\/figure>\n<p>Existem pain\u00e9is simples, como o <strong>Media<\/strong>, e pain\u00e9is mais complexos como o <strong>JavaScript Profiler <\/strong>e o <strong>Performance monitor<\/strong>. Em poucas palavras, o nome da ferramenta Inspecionar Elemento est\u00e1 fazendo um mau servi\u00e7o a todas as funcionalidades sob o cap\u00f4. Ela tem um poder imenso e deve ser central para o fluxo de trabalho de qualquer desenvolvedor web.<\/p>\n<h2>Por que usar a ferramenta Inspecionar Elemento?<\/h2>\n<p>A ferramenta Inspecionar Elemento \u00e9 quase a \u00fanica solu\u00e7\u00e3o &#8220;na\u00efled-on&#8221; que voc\u00ea precisar\u00e1 ter ao seu lado durante o desenvolvimento. Vamos entrar nos detalhes t\u00e9cnicos sobre o porqu\u00ea durante o resto do artigo. Primeiro, por\u00e9m, vale a pena falar sobre sua motiva\u00e7\u00e3o para usar a ferramenta Inspecionar Elemento.<\/p>\n<p>H\u00e1 algumas raz\u00f5es pelas quais voc\u00ea gostaria de usar a ferramenta:<\/p>\n<ul>\n<li>Voc\u00ea pode navegar por outros sites para obter inspira\u00e7\u00e3o sobre como trabalhar no seu site.<\/li>\n<li>Voc\u00ea aprender\u00e1 como outros sites ou desenvolvedores conseguem t\u00e9cnicas espec\u00edficas.<\/li>\n<li>Ele lhe d\u00e1 uma licen\u00e7a para experimentar em seu site sem conseq\u00fc\u00eancias.<\/li>\n<li>Na maioria das ferramentas para Inspecionar Elementos, voc\u00ea tem a oportunidade de depurar os sites.<\/li>\n<li>\u00c9 bom saber mais sobre o site em quest\u00e3o.<\/li>\n<\/ul>\n<p>Em resumo, aprender sobre o desenvolvimento da web envolve olhar bons exemplos de sites e descobrir o que os faz funcionar.<\/p>\n<p>A ferramenta Inspecionar Elemento permite que voc\u00ea verifique exatamente o HTML e o CSS usados em um site, dando-lhe uma grande chance de implementar esses aspectos e t\u00e9cnicas em seu trabalho.<\/p>\n<h2>Como encontrar a ferramenta de Inspe\u00e7\u00e3o de Elementos do seu navegador?<\/h2>\n<p>A boa not\u00edcia \u00e9 que encontrar a ferramenta Inspecionar Elemento \u00e9 simples. Na maioria dos casos, voc\u00ea clicar\u00e1 com o bot\u00e3o direito em uma p\u00e1gina e selecionar\u00e1 <strong>Inspecionar<\/strong> ou <strong>Inspecionar Elemento.<\/strong><\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Choosing the Inspect Element tool.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/select-inspect-element.png\" alt=\"Escolhendo a ferramenta Inspecionar Elemento.\" width=\"1000\" height=\"516\"><figcaption class=\"wp-caption-text\">Escolhendo a ferramenta Inspecionar Elemento.<\/figcaption><\/figure>\n<p>Por padr\u00e3o, ela abrir\u00e1 a ferramenta em uma janela dividida. Muitas vezes, por padr\u00e3o, a ferramenta \u00e9 aberta para o lado direito. Mas voc\u00ea pode personalizar isto ao seu gosto e at\u00e9 mesmo colocar a ferramenta na sua janela.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"The Inspect Element tool in its own window.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/own-window.png\" alt=\"A ferramenta Inspecionar Elemento em sua janela.\" width=\"1000\" height=\"606\"><figcaption class=\"wp-caption-text\">A ferramenta Inspecionar Elemento em sua janela.<\/figcaption><\/figure>\n<p>Naturalmente, voc\u00ea tamb\u00e9m pode acessar Inspecionar Elemento a partir da barra de ferramentas do navegador ou atrav\u00e9s de um atalho de teclado. A localiza\u00e7\u00e3o exata varia de acordo com o navegador. Por exemplo, <a href=\"https:\/\/firefox-source-docs.mozilla.org\/devtools-user\/index.html\">no Firefox<\/a>, voc\u00ea encontrar\u00e1 as <strong>Ferramentas do Desenvolvedor da Web <\/strong>no menu<strong> Ferramentas &gt; Ferramentas do Navegador. <\/strong>Em contraste, <a href=\"https:\/\/kinsta.com\/pt\/blog\/revisao-brave-browser\/\">Brave<\/a> (e outros navegadores baseados em Chrome) t\u00eam a op\u00e7\u00e3o <strong>Ferramentas do Desenvolvedor<\/strong> no menu<strong> View &gt; Developer Tools<\/strong>.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Brave's toolbar menu, showing its developer tools.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/developer-option.png\" alt=\"Menu da barra de ferramentas da Brave, mostrando suas ferramentas de desenvolvimento.\" width=\"1000\" height=\"607\"><figcaption class=\"wp-caption-text\">Menu da barra de ferramentas da Brave, mostrando suas ferramentas de desenvolvimento.<\/figcaption><\/figure>\n<p>Os atalhos do teclado s\u00e3o muitas vezes similares em cross-browser: <strong>Comando + Shift + C <\/strong>(<strong>Controle + Shift + C <\/strong>para Windows). Este atalho faz com que seja r\u00e1pido trazer \u00e0 tona as ferramentas com as quais voc\u00ea precisa trabalhar imediatamente.<\/p>\n<p>Se voc\u00ea nunca abriu a ferramenta Inspecionar Elemento antes, ela \u00e9 freq\u00fcentemente exibida no lado direito do seu menu, como mencionamos anteriormente. Para mudar isso, clique no menu de <a href=\"https:\/\/kinsta.com\/pt\/blog\/trafego-para-o-seu-site\/\">traffic<\/a> na barra de ferramenta Inspecionar Elemento. Aqui, voc\u00ea pode mudar o lado em que a &#8220;painel\/doca&#8221; \u00e9 exibida:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" title=\"The Dock side option in the Inspect Element tool.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/dock-side.png\" alt=\"As op\u00e7\u00f5es \"Dock side\" na ferramenta Inspecionar Elemento.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">As op\u00e7\u00f5es &#8220;Dock side&#8221; na ferramenta Inspecionar Elemento.<\/figcaption><\/figure>\n<p>Observe que o Firefox tamb\u00e9m usa uma visualiza\u00e7\u00e3o &#8220;painel triplo&#8221; por padr\u00e3o, o que ajuda a obter o m\u00e1ximo de informa\u00e7\u00f5es na ferramenta Inspecionar Elemento:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Firefox's triple pane view.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/firefox-triple-panes.png\" alt=\"Vista do \"painel triplo\" do Firefox.\" width=\"1000\" height=\"653\"><figcaption class=\"wp-caption-text\">Vista do &#8220;painel triplo&#8221; do Firefox.<\/figcaption><\/figure>\n<p>Agora que voc\u00ea tem a ferramenta aberta, \u00e9 uma boa id\u00e9ia descobrir o que voc\u00ea pode fazer com ela. Falaremos sobre isso a seguir.<\/p>\n<h2>3 situa\u00e7\u00f5es para a utiliza\u00e7\u00e3o da ferramenta Inspecionar Elemento<\/h2>\n<p>Abordamos algumas maneiras de usar a ferramenta Inspecionar Elemento, mas podemos ir mais al\u00e9m para oferecer alguns casos de uso. Vamos discuti-los em resumo.<\/p>\n<h3>1. Busca de elementos espec\u00edficos em uma p\u00e1gina da Web<\/h3>\n<p>O objetivo principal da ferramenta Inspecionar Elemento est\u00e1 em seu nome &#8211; inspecionar elementos do site. Para fazer isso, voc\u00ea ir\u00e1 para a p\u00e1gina web desejada e ent\u00e3o escolher\u00e1 seu m\u00e9todo de abertura das <a href=\"https:\/\/kinsta.com\/pt\/blog\/ferramentas-de-revisao-de-codigo\/\">ferramentas de desenvolvimento<\/a>.<\/p>\n<p>Uma vez aberto o painel, voc\u00ea clicar\u00e1 na seta que atua como um seletor para o elemento desejado:<\/p>\n<figure style=\"width: 946px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"The Inspector Arrow icon.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/inspector-arrow.png\" alt=\"O \u00edcone da Seta Inspetora.\" width=\"946\" height=\"304\"><figcaption class=\"wp-caption-text\">O \u00edcone da Seta Inspecionar.<\/figcaption><\/figure>\n<p>A partir daqui, voc\u00ea pode pairar sobre qualquer elemento da p\u00e1gina, e voc\u00ea o ver\u00e1 destacado na janela <strong>Inspecionar\/Elementos:<\/strong><\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Highlighting an element in the development tools panel.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/highlight-element.png\" alt=\"Destacando um elemento no painel de ferramentas de desenvolvimento.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">Destacando um elemento no painel de ferramentas de desenvolvimento.<\/figcaption><\/figure>\n<p>\u00c9 um processo simples &#8211; uma das raz\u00f5es pelas quais a ferramenta Inspecionar Elemento \u00e9 t\u00e3o valiosa e popular entre os desenvolvedores web.<\/p>\n<h3>2. Emula\u00e7\u00e3o de um dispositivo alvo, tela e navegador<\/h3>\n<p>Inspecionar Elemento tamb\u00e9m funciona como uma esp\u00e9cie de emulador de dispositivos. Em outras palavras, voc\u00ea pode ver como fica um site em um dispositivo espec\u00edfico. As op\u00e7\u00f5es s\u00e3o numerosas:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"A list of emulated devices within Brave.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/emulated-devices.png\" alt=\"Uma lista de dispositivos emulados mostrados em Brave.\" width=\"1000\" height=\"655\"><figcaption class=\"wp-caption-text\">Uma lista de dispositivos emulados mostrados em Brave.<\/figcaption><\/figure>\n<p>Este emulador ser\u00e1 \u00f3timo para julgar se sua estrat\u00e9gia m\u00f3vel-primeiro ou <a href=\"https:\/\/kinsta.com\/pt\/blog\/design-responsivo-web\/\">projeto responsivo<\/a> \u00e9 preciso e funcional. \u00c9 inestim\u00e1vel e tamb\u00e9m mais econ\u00f4mico do que ter 200 dispositivos flutuando ao redor de sua tabela.<\/p>\n<p>Muitas vezes voc\u00ea ter\u00e1 acesso \u00e0 emula\u00e7\u00e3o de dispositivos a partir de um pequeno \u00edcone em algum lugar no painel do Inspecionar Elemento:<\/p>\n<figure style=\"width: 942px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Emulating a device with the Inspect Element tool.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/device-icon.png\" alt=\"Emulando um dispositivo com a ferramenta Inspecionar Elemento.\" width=\"942\" height=\"224\"><figcaption class=\"wp-caption-text\">Emulando um dispositivo com a ferramenta Inspecionar Elemento.<\/figcaption><\/figure>\n<p>Clicando neste \u00edcone, seu site ser\u00e1 exibido como aparece no dispositivo que voc\u00ea selecionou:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Choosing a device to emulate from the Inspect Element tool.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/device-emulation.png\" alt=\"Escolhendo um dispositivo para emular a partir da ferramenta Inspecionar Elemento.\" width=\"1000\" height=\"681\"><figcaption class=\"wp-caption-text\">Escolhendo um dispositivo para emular a partir da ferramenta Inspecionar Elemento.<\/figcaption><\/figure>\n<p>Mais tarde, vamos investigar isto com mais detalhes, mas \u00e9 uma forma s\u00f3lida de tornar seus projetos consistentes atrav\u00e9s de dispositivos.<\/p>\n<h3>3. Como avaliar o desempenho da p\u00e1gina da Web<\/h3>\n<p>A ferramenta Inspecionar Elemento tamb\u00e9m pode ajud\u00e1-lo a julgar a <a href=\"https:\/\/kinsta.com\/pt\/blog\/teste-de-velocidade-do-seu-site\/\">velocidade e o desempenho<\/a> de um site atrav\u00e9s do painel <strong>Performance:<\/strong><\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"The Inspect Element Performance panel.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/performance-tab.png\" alt=\"O painel de Desempenho do Inspecionar Elemento.\" width=\"1000\" height=\"767\"><figcaption class=\"wp-caption-text\">O painel de Desempenho do Inspecionar Elemento.<\/figcaption><\/figure>\n<p>Este recurso funciona &#8220;registrando&#8221; os tempos de carregamento de elementos e scripts espec\u00edficos. Os navegadores baseados no Chrome t\u00eam um desempenho brilhante ao oferecer estas informa\u00e7\u00f5es. Voc\u00ea gravar\u00e1 a p\u00e1gina conforme ela carrega, e ent\u00e3o visualizar\u00e1 os resultados em um formato de linha do tempo.<\/p>\n<p>\u00c9 uma excelente maneira de verificar se uma p\u00e1gina tem um desempenho de n\u00edvel geral. A partir da\u00ed, voc\u00ea vai querer usar uma ferramenta como o <a href=\"https:\/\/kinsta.com\/pt\/blog\/google-pagespeed-insights\/\">Google PageSpeed Insights<\/a> ou o <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/lighthouse\/blipmdconlkpinefehnmjammfjpmpbjk?hl=en\">Lighthouse<\/a> para trabalhar ainda mais no desempenho do seu site. Os navegadores baseados no Chrome ter\u00e3o um gerador de relat\u00f3rios do Lighthouse incorporado:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"A built-in Google Lighthouse report.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/lighthouse.png\" alt=\"Um relat\u00f3rio integrado do Google Lighthouse.\" width=\"1000\" height=\"663\"><figcaption class=\"wp-caption-text\">Um relat\u00f3rio integrado do Google Lighthouse.<\/figcaption><\/figure>\n<p>Voc\u00ea tamb\u00e9m pode ver um resumo dos testes de desempenho dentro de algumas outras guias. Por exemplo, voc\u00ea pode ver uma <b>Call Tree<\/b>, um resumo geral, e um <strong>Registro de Eventos<\/strong>:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"The Inspect Element's Event Log.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/event-log.png\" alt=\"O Registro de Eventos do Inspecionar Elemento.\" width=\"1000\" height=\"663\"><figcaption class=\"wp-caption-text\">O Registro de Eventos do Inspecionar Elemento.<\/figcaption><\/figure>\n<p>\u00c9 conceb\u00edvel que voc\u00ea n\u00e3o precisaria de nenhuma outra ferramenta para julgar o desempenho ou o funcionamento do seu site. Aprender como ele funciona na pr\u00e1tica \u00e9 algo que discutiremos a seguir.<\/p>\n<h2>Truques e dicas para usar a ferramenta Inspecionar Elemento<\/h2>\n<p>J\u00e1 falamos sobre como a ferramenta Inspecionar Elemento \u00e9 mais poderosa do que parece \u00e0 primeira vista. Vamos dar uma olhada em alguns truques e dicas para obter o melhor do seu conjunto de recursos, come\u00e7ando com o b\u00e1sico.<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"5\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>1. Mudan\u00e7a de propriedades, valores e estados dos elementos<\/h3>\n<p>At\u00e9 agora, s\u00f3 tocamos no conceito de usar a ferramenta Inspecionar Elemento para fazer mudan\u00e7as tempor\u00e1rias em um site. Vamos discutir como fazer isso com mais detalhes.<\/p>\n<p>As etapas s\u00e3o simples. Primeiro, use o \u00edcone da seta para selecionar seu elemento escolhido. Voc\u00ea ver\u00e1 uma sobreposi\u00e7\u00e3o que destaca os v\u00e1rios componentes enquanto voc\u00ea paira sobre eles:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Selecting elements in the Inspect Element tool.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/selecting-element.png\" alt=\"Sele\u00e7\u00e3o de elementos na ferramenta Inspecionar Elemento.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">Sele\u00e7\u00e3o de elementos na ferramenta Inspecionar Elemento.<\/figcaption><\/figure>\n<p>Uma vez chegado ao elemento desejado, voc\u00ea pode clicar duas vezes em quase qualquer lugar que voc\u00ea veja uma etiqueta dentro do painel <strong>Elements <\/strong>e digitar uma mudan\u00e7a. Por exemplo, queremos mudar o texto original do her\u00f3i na p\u00e1gina inicial da Kinsta para algo diferente:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Changing text on the Kinsta home page.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/changing-text.png\" alt=\"Mudan\u00e7a de texto na p\u00e1gina inicial do Kinsta.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">Mudan\u00e7a de texto na p\u00e1gina inicial da Kinsta.<\/figcaption><\/figure>\n<p>Voc\u00ea tamb\u00e9m pode <a href=\"https:\/\/kinsta.com\/pt\/blog\/css-wordpress\/\">trabalhar com o CSS<\/a> da mesma forma que com o HTML. Por exemplo, pegue os bot\u00f5es Call to Action (CTA) na p\u00e1gina inicial da Kinsta:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Selecting a button on the Kinsta home page.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/original-text.png\" alt=\"Selecionando um bot\u00e3o na p\u00e1gina inicial da Kinsta.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">Selecionando um bot\u00e3o na p\u00e1gina inicial da Kinsta.<\/figcaption><\/figure>\n<p>Se voc\u00ea selecionar o bot\u00e3o usando o ponteiro, voc\u00ea pode ver seu CSS relacionado no painel <strong>Estilos <\/strong>\u00e0 direita:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"The Style panel within the Inspect Element tool.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/button-color.png\" alt=\"O painel Style dentro da ferramenta Inspecionar Elemento.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">O painel Style dentro da ferramenta Inspecionar Elemento.<\/figcaption><\/figure>\n<p>Como com os elementos HTML, voc\u00ea pode mudar os valores e adicionar seu CSS tamb\u00e9m:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Changing the button color in the Styles panel.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/button-color-change.png\" alt=\"Mudando a cor do bot\u00e3o no painel Estilos.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">Mudando a cor do bot\u00e3o no painel Estilos.<\/figcaption><\/figure>\n<p>\u00c9 claro, para elementos como bot\u00f5es, voc\u00ea pode querer trabalhar com seus v\u00e1rios estados. Neste caso, o estado <strong>:hover <\/strong>tamb\u00e9m vale a pena mudar. Para fazer isso, clique no link <strong>:hov <\/strong>no painel Estilo. Escolhendo isto, voc\u00ea pode selecionar aqueles para os quais voc\u00ea quer ver o CSS do estado :hover-state:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Bringing up the states options in the Styles panel.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/hover-options.png\" alt=\"Trazendo as op\u00e7\u00f5es \"Estados\" no painel de Estilos.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">Trazendo as op\u00e7\u00f5es &#8220;Estados&#8221; no painel de Estilos.<\/figcaption><\/figure>\n<p>A p\u00e1gina web mostrar\u00e1 como fica o estado sem que voc\u00ea tenha que agir. Aqui, n\u00f3s mudamos as cores para diferenci\u00e1-lo do estado padr\u00e3o do bot\u00e3o:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Changing hover state colors in the Styles panel.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/hover-color-change.png\" alt=\"Mudan\u00e7a de cores do estado de pairar no painel de Estilos.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">Mudan\u00e7a de cores do estado de pairar no painel de Estilos.<\/figcaption><\/figure>\n<p>Voc\u00ea pode at\u00e9 mesmo tirar URLs de imagens e troc\u00e1-las por outras. Na p\u00e1gina inicial da Kinsta, mostramos uma captura de tela do <a href=\"https:\/\/my.kinsta.com\/login?lang=pt\">painel MyKinsta<\/a>:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"The MyKinsta dashboard on the Kinsta home page.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/original-image-dashboard.png\" alt=\"O painel MyKinsta na p\u00e1gina inicial do Kinsta.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">O painel MyKinsta na p\u00e1gina inicial da Kinsta.<\/figcaption><\/figure>\n<p>Atrav\u00e9s da localiza\u00e7\u00e3o do elemento e da mudan\u00e7a da URL de origem da imagem, voc\u00ea \u00e9 capaz de testar outras imagens em seu lugar:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Changing an image on the Kinsta home page\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/cat-dashboard.png\" alt=\"Neste caso, a mudan\u00e7a foi ao ar em poucos minutos \" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">Neste caso, a mudan\u00e7a foi ao ar em poucos minutos (Fonte de imagem: <a href=\"https:\/\/pixabay.com\/photos\/cat-red-cat-kitten-cute-fur-dream-4037008\/\" target=\"_blank\" rel=\"noopener noreferrer\">Pixabay<\/a>).<\/figcaption><\/figure>\n<p>Como seria de esperar, estas mudan\u00e7as n\u00e3o s\u00e3o permanentes, e com uma r\u00e1pida atualiza\u00e7\u00e3o da p\u00e1gina, voc\u00ea pode fazer com que as coisas voltem ao normal. Como alternativa, voc\u00ea tamb\u00e9m pode copiar o HTML e o CSS para <a href=\"https:\/\/kinsta.com\/pt\/blog\/editores-html-gratuitos\/\">seu editor<\/a> e inclu\u00ed-los em seu c\u00f3digo para que essas mudan\u00e7as sejam permanentes.<\/p>\n<h3>2. Busca de Elementos<\/h3>\n<p>Pode ser que antes de poder alterar um elemento, voc\u00ea precise encontr\u00e1-lo. A ferramenta Inspecionar Elemento tem uma funcionalidade de busca direta que pode ajud\u00e1-lo a encontrar qualquer aspecto de uma p\u00e1gina da web.<\/p>\n<p>Dito isto, \u00e9 dif\u00edcil de encontrar se voc\u00ea n\u00e3o souber onde procurar. O caminho &#8220;oficial&#8221; nos navegadores baseados em Chrome \u00e9 ir para o menu &#8220;traffic&#8221; no lado direito da p\u00e1gina e selecionar a op\u00e7\u00e3o <strong>Procurar:<\/strong><\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"The Search option in Brave's DevTools.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/search-elements.png\" alt=\"A op\u00e7\u00e3o \"Busca\" no DevTools da Brave.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">A op\u00e7\u00e3o &#8220;Busca&#8221; no DevTools da Brave.<\/figcaption><\/figure>\n<p>Com isso, ser\u00e1 aberto o painel do <strong>Console<\/strong>, juntamente com uma aba de <strong>Busca.<\/strong> Daqui, digite a tag desejada na caixa de texto, e voc\u00ea ver\u00e1 uma lista de elementos associados na p\u00e1gina:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Searching for elements in Brave's DevTools.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/search-panel-results.png\" alt=\"Busca de elementos nas DevTools da Brave.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">Busca de elementos nas DevTools da Brave.<\/figcaption><\/figure>\n<p>Observe que em outros navegadores, voc\u00ea pode encontrar a funcionalidade em outro lugar. Por exemplo, o Firefox inclui uma caixa de <a href=\"https:\/\/kinsta.com\/pt\/blog\/alternativas-mecanismos-de-pesquisa\/\">busca<\/a> na parte superior do seu painel <strong>Inspecionar:<\/strong><\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Searching for elements in the Firefox Inspector panel.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/firefox-search-html.png\" alt=\"Procura de elementos no painel do Inspetor Firefox.\" width=\"1000\" height=\"653\"><figcaption class=\"wp-caption-text\">Procura de elementos no painel Inspecionar Firefox.<\/figcaption><\/figure>\n<p>Aqui est\u00e1 outra dica r\u00e1pida: Voc\u00ea pode realizar a expans\u00e3o recursiva dos v\u00e1rios n\u00f3s e elementos clicando com o bot\u00e3o direito dentro do painel de <strong>Elementos<\/strong>, e escolhendo <strong>Expandir recursivamente<\/strong>:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"The Expand recursively option in the Elements panel.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/recursive-expansion.png\" alt=\"A op\u00e7\u00e3o Expandir recursivamente no painel de Elementos.\" width=\"1000\" height=\"606\"><figcaption class=\"wp-caption-text\">A op\u00e7\u00e3o Expandir recursivamente no painel de Elementos.<\/figcaption><\/figure>\n<p>Se voc\u00ea der uma olhada no painel <strong>Estilos<\/strong>, voc\u00ea tamb\u00e9m encontrar\u00e1 uma caixa de texto <strong>Filtro.<\/strong> Este campo permite filtrar pelas propriedades do CSS, tornando-o um \u00f3timo companheiro para a funcionalidade de busca global:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Filtering by properties in the Styles panel.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/filter-properties.png\" alt=\"Filtragem por propriedades no painel Estilos.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">Filtragem por propriedades no painel Estilos.<\/figcaption><\/figure>\n<p>De modo geral, n\u00e3o deve ser dif\u00edcil encontrar o que voc\u00ea precisa com dois filtros e ferramentas de busca dedicados.<\/p>\n<h3>3. Uma breve introdu\u00e7\u00e3o ao modelo caixa<\/h3>\n<p>Uma das melhores maneiras que a ferramenta Inspecionar Elemento pode ajud\u00e1-lo a aprender mais sobre como as propriedades do CSS agem sobre os elementos \u00e9 o painel visual &#8220;modelo caixa&#8221;.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"The Box Model.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/box-model.png\" alt=\"O Modelo Caixa.\" width=\"1000\" height=\"359\"><figcaption class=\"wp-caption-text\">O Modelo Caixa.<\/figcaption><\/figure>\n<p>Esta vis\u00e3o geral lhe d\u00e1 uma representa\u00e7\u00e3o de como uma caixa espec\u00edfica (como &#8220;elemento&#8221; ou &#8220;div&#8221;) aparece na tela. Em outras palavras, \u00e9 uma vis\u00e3o geral de como as margens, acolchoamento, borda e conte\u00fado se combinam para se tornar a se\u00e7\u00e3o que voc\u00ea v\u00ea na tela.<\/p>\n<p>Explicar o modelo completo de caixa CSS e como ele interage com o <a href=\"https:\/\/kinsta.com\/pt\/blog\/html-vs-html5\/\">HTML de uma p\u00e1gina da web<\/a> est\u00e1 al\u00e9m do escopo deste artigo, embora <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/CSS\/Building_blocks\/The_box_model\">a Mozilla tenha um guia fant\u00e1stico<\/a> para o interior e exterior do conceito.<\/p>\n<p>Voc\u00ea encontrar\u00e1 freq\u00fcentemente o painel <strong>Modelo Caixa <\/strong>dentro das se\u00e7\u00f5es <strong>Layout <\/strong>ou <strong>Computed <\/strong>do painel direito da ferramenta Inspecionar Elemento:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"The Box Model panel within the Inspect Element tool.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/box-model-panel.png\" alt=\"O painel \"Modelo de Caixa\" dentro da ferramenta Inspecionar Elemento.\" width=\"1000\" height=\"653\"><figcaption class=\"wp-caption-text\">O painel &#8220;Modelo Caixa&#8221; dentro da ferramenta Inspecionar Elemento.<\/figcaption><\/figure>\n<p>Como com qualquer elemento e propriedades, voc\u00ea tamb\u00e9m pode alterar os valores e configura\u00e7\u00f5es de uma determinada caixa. Haver\u00e1 tamb\u00e9m uma lista de outras propriedades para ajud\u00e1-lo a posicionar a caixa, definir um \u00edndice z, aplicar configura\u00e7\u00f5es de flutua\u00e7\u00e3o e exibi\u00e7\u00e3o, e muito mais.<\/p>\n<p>Enquanto trabalha com o modelo caixa, voc\u00ea tamb\u00e9m pode se beneficiar de ver o sistema de grade em jogo na p\u00e1gina. Para isso, d\u00ea uma olhada no painel <strong>Layout <\/strong>&#8211; as op\u00e7\u00f5es que voc\u00ea precisa estar\u00e3o sob o menu <strong>Grid:<\/strong><\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"The Grid settings menu.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/grid-settings.png\" alt=\"O menu Grid settings.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">O menu Grid settings.<\/figcaption><\/figure>\n<p>Clicando nas configura\u00e7\u00f5es de exibi\u00e7\u00e3o desejadas e, em seguida, escolhendo uma sobreposi\u00e7\u00e3o relevante, ser\u00e1 mostrado na tela, permitindo tomar decis\u00f5es mais precisas usando o modelo caixa para manipular os elementos do site.<\/p>\n<h3>4. Emulando dispositivos usando a ferramenta Inspecionar Elemento<\/h3>\n<p>Eles passaram das palavras-chave para termos l\u00e9xicos integrados, mas &#8220;responsivo&#8221; e &#8220;amig\u00e1vel ao celular&#8221; s\u00e3o fatores-chave para o desenvolvimento da web. Como tal, a ferramenta Inspecionar Elemento aborda esta faceta atrav\u00e9s de um par de recursos.<\/p>\n<p>Na maioria dos navegadores, a ferramenta Inspecionar Elemento ter\u00e1 um \u00edcone de dispositivo m\u00f3vel ao longo da barra de ferramentas superior:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Toggling mobile responsive viewing within Brave.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/mobile-device-icon.png\" alt=\"Trocando a visualiza\u00e7\u00e3o m\u00f3vel responsiva dentro da Brave.\" width=\"1000\" height=\"378\"><figcaption class=\"wp-caption-text\">Trocando a visualiza\u00e7\u00e3o m\u00f3vel responsiva dentro do Brave.<\/figcaption><\/figure>\n<p>O Safari, no entanto, \u00e9 diferente. Em vez disso, h\u00e1 uma altern\u00e2ncia entre o modo<strong> Enter\/Exit Responsive Design Mode <\/strong>no menu <strong>Develop:<\/strong><\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"The Exit Responsive Design Mode option in Safari.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/safari-responsive-mode.png\" alt=\"A op\u00e7\u00e3o \"Exit Responsive Design Mode\" no Safari.\" width=\"1000\" height=\"402\"><figcaption class=\"wp-caption-text\">A op\u00e7\u00e3o &#8220;Exit Responsive Design Mode&#8221; no Safari.<\/figcaption><\/figure>\n<p>Independentemente de como voc\u00ea chegar l\u00e1, uma vez escolhida a op\u00e7\u00e3o, a p\u00e1gina web ser\u00e1 exibida como se voc\u00ea a estivesse visualizando em um dispositivo menor:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"A mobile device layout view in Firefox.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/mobile-layout.png\" alt=\"Uma visualiza\u00e7\u00e3o do layout do dispositivo m\u00f3vel no Firefox\" width=\"1000\" height=\"653\"><figcaption class=\"wp-caption-text\">Uma visualiza\u00e7\u00e3o do layout do dispositivo m\u00f3vel no Firefox.<\/figcaption><\/figure>\n<p>Enquanto o Safari oferece apenas a voc\u00ea a escolha de diferentes dispositivos Apple, outros navegadores se aprofundam para lhe fornecer as ferramentas que voc\u00ea precisa para projetar com princ\u00edpios de mobile-first. Por exemplo, voc\u00ea pode escolher a orienta\u00e7\u00e3o do viewport, bem como o dispositivo que voc\u00ea gostaria de emular:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"The Device Emulation list in Brave.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/emulate-device.png\" alt=\"A lista \"Emula\u00e7\u00e3o de Dispositivos\" em Brave.\" width=\"1000\" height=\"604\"><figcaption class=\"wp-caption-text\">A lista &#8220;Emula\u00e7\u00e3o de Dispositivos&#8221; no Brave.<\/figcaption><\/figure>\n<p>H\u00e1 dois outros recursos interessantes aqui. Primeiro, voc\u00ea pode escolher uma velocidade de rede emulada. O Safari n\u00e3o inclui nenhuma op\u00e7\u00e3o para isto, e os navegadores baseados em Chrome oferecem uma pequena escolha geral de estrangulamento da rede:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"The throttling options in Brave.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/brave-throttling.png\" alt=\"As op\u00e7\u00f5es de estrangulamento em Brave.\" width=\"1000\" height=\"335\"><figcaption class=\"wp-caption-text\">As op\u00e7\u00f5es de estrangulamento em Brave.<\/figcaption><\/figure>\n<p>O Firefox faz o melhor aqui, com uma sele\u00e7\u00e3o decente de escolhas de rede para escolher:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Firefox's throttling options.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/firefox-throttling.png\" alt=\"As op\u00e7\u00f5es de estrangulamento do Firefox.\" width=\"1000\" height=\"366\"><figcaption class=\"wp-caption-text\">As op\u00e7\u00f5es de estrangulamento do Firefox.<\/figcaption><\/figure>\n<p>Para arredondar as coisas, voc\u00ea tamb\u00e9m \u00e9 capaz de simular o feedback t\u00e1ctil e o reconhecimento do sensor. \u00c9 o padr\u00e3o nos navegadores baseados em Chrome, e no Firefox, voc\u00ea tem que altern\u00e1-lo:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"The haptic feedback option in Firefox.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/firefox-haptic.png\" alt=\"A op\u00e7\u00e3o de feedback t\u00e1ctil no Firefox.\" width=\"1000\" height=\"312\"><figcaption class=\"wp-caption-text\">A op\u00e7\u00e3o de feedback t\u00e1ctil no Firefox.<\/figcaption><\/figure>\n<p>O Firefox fica para tr\u00e1s, como o Chrome, o Brave, e outros mostram seu cursor como uma pequena &#8220;ponta de dedo&#8221; sobreposta. A funcionalidade n\u00e3o \u00e9 perfeita para nenhum navegador, embora seja uma maneira confi\u00e1vel de determinar <a href=\"https:\/\/kinsta.com\/pt\/blog\/teste-de-velocidade-do-seu-site\/\">como seu site pode agir<\/a> sobre outros dispositivos.<\/p>\n<p>Este tipo de teste muitas vezes fica de lado para muitos desenvolvedores web. Dito isto, n\u00e3o h\u00e1 desculpa agora quando os navegadores oferecem solu\u00e7\u00f5es abrangentes como esta.<\/p>\n<h3>5. Atalhos do teclado ao utilizar a ferramenta Inspecionar Elemento<\/h3>\n<p>A maioria dos atalhos de teclado do navegador s\u00e3o freq\u00fcentemente os mesmos em todos os navegadores. Isso \u00e9 uma boa not\u00edcia, se voc\u00ea alternar entre v\u00e1rias ferramentas para testar seus sites.<\/p>\n<p>Aqui est\u00e1 uma lista r\u00e1pida de alguns dos atalhos mais populares (e valiosos):<\/p>\n<table>\n<tbody>\n<tr>\n<td>Abrir a ferramenta Inspecionar Elemento<\/td>\n<td><strong>Comando + Shift + C <\/strong>para Mac, <strong>Controle + Shift + C <\/strong>para Windows<\/td>\n<\/tr>\n<tr>\n<td>Movimentar-se entre os n\u00f3s<\/td>\n<td>Setas <strong>para cima <\/strong>e <strong>para baixo<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Expandir o n\u00f3 selecionado<\/td>\n<td>Seta <strong>para a direita<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Colapsar o n\u00f3 selecionado<\/td>\n<td>Seta <strong>\u00e0 esquerda<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Recursivamente expandir e colapsar os n\u00f3s<\/td>\n<td><strong>Op\u00e7\u00e3o + Clique <\/strong>para Mac, <strong>Alt + Clique <\/strong>para Windows<\/td>\n<\/tr>\n<tr>\n<td>Mova-se dentro de um n\u00f3 para trabalhar com atributos<\/td>\n<td><strong>Entrar <\/strong>ou <strong>retornar<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Avan\u00e7ar atrav\u00e9s dos atributos de um n\u00f3<\/td>\n<td><strong>Tab<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Recuar atrav\u00e9s dos atributos de um n\u00f3<\/td>\n<td><strong>Shift + Tab<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Ocultar ou mostrar o n\u00f3 selecionado<\/td>\n<td><strong>H<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Editar e parar de editar um n\u00f3 como HTML<\/td>\n<td><strong>F2<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Quando uma propriedade CSS \u00e9 selecionada, aumente o valor em um<\/td>\n<td>Seta <strong>para cima<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Quando uma propriedade CSS \u00e9 selecionada, diminua o valor por um<\/td>\n<td>Seta <strong>para baixo<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Quando uma propriedade CSS \u00e9 selecionada, aumente o valor em dez<\/td>\n<td><strong>Shift + seta para cima<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Quando uma propriedade CSS \u00e9 selecionada, diminua o valor em dez<\/td>\n<td><strong>Shift + Seta para baixo<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Quando uma propriedade CSS \u00e9 selecionada, aumente o valor em 0,1<\/td>\n<td><strong>Op\u00e7\u00e3o + <\/strong>seta para <strong>cima <\/strong>para Mac, <strong>Alt + <\/strong>seta para <strong>cima <\/strong>para Windows<\/td>\n<\/tr>\n<tr>\n<td>Quando uma propriedade CSS \u00e9 selecionada, diminua o valor em 0,1<\/td>\n<td><strong>Op\u00e7\u00e3o + <\/strong>seta para <strong>baixo <\/strong>para Mac,<strong>Alt + seta <\/strong>para<strong>baixo <\/strong>para Windows<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u00c9 claro, h\u00e1 muitos mais atalhos dispon\u00edveis. A Mozilla possui <a href=\"https:\/\/firefox-source-docs.mozilla.org\/devtools-user\/keyboard_shortcuts\/index.html#page_inspector\">documenta\u00e7\u00e3o excepcional<\/a> para o Firefox, enquanto o Chrome, o Brave, o Edge e outros <a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/shortcuts\/\">compartilham os atalhos<\/a>. A Apple \u00e9 menos \u00fatil com os atalhos para desenvolvedores Safari, pois n\u00e3o h\u00e1 uma lista definida dentro de suas p\u00e1ginas de ajuda. Ao inv\u00e9s disso, sugerimos a leitura da <a href=\"https:\/\/support.apple.com\/en-us\/guide\/safari-developer\/welcome\/mac\">documenta\u00e7\u00e3o oficial<\/a> das ferramentas para desenvolvedores do Safari.<\/p>\n\n<h2>Resumo<\/h2>\n<p>O desenvolvimento da web n\u00e3o \u00e9 mais apenas HTML. H\u00e1 muitas tecnologias envolvidas. Mesmo mantendo a santa trindade do HTML, CSS e JavaScript, voc\u00ea ainda precisar\u00e1 ver como um site re\u00fane todos esses componentes.<\/p>\n<p>A ferramenta Inspecionar Elemento do navegador \u00e9 uma das melhores maneiras de olhar sob o cap\u00f4 de um site e descobrir em detalhes expl\u00edcitos como ela funciona. Embora seja fant\u00e1stico como auxiliar de aprendizagem, tamb\u00e9m pode ajud\u00e1-lo a testar mudan\u00e7as em seu site e descobrir como ele funciona em diferentes dispositivos e redes m\u00f3veis.<\/p>\n<p><em>Voc\u00ea usa a ferramenta Inspecionar Elemento com freq\u00fc\u00eancia? Se sim, quais s\u00e3o seus recursos favoritas? Compartilhe suas opini\u00f5es na se\u00e7\u00e3o de coment\u00e1rios!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>H\u00e1 in\u00fameros recursos valiosos de desenvolvimento web, sejam livros, v\u00eddeos, cursos on-line e muito mais. Aprender a usar a ferramenta Inspecionar Elemento do navegador \u00e9 uma &#8230;<\/p>\n","protected":false},"author":117,"featured_media":43528,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[469,511],"topic":[993,1018],"class_list":["post-43525","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-browsers","tag-troubleshooting","topic-dicas-de-marketing-on-line","topic-ferramentas-desenvolvimento-web"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Como usar a Ferramenta Inspecionar do seu Navegador para Editar P\u00e1ginas da Web<\/title>\n<meta name=\"description\" content=\"Saiba como usar a ferramenta inspecionar elementos do seu navegador para verificar o c\u00f3digo HTML de uma p\u00e1gina da web. Al\u00e9m disso, edite e solucione problemas de p\u00e1ginas da web localmente com ele.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/pt\/blog\/ferramenta-inspecionar\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Usar a Ferramenta Inspecionar do seu Navegador para Editar P\u00e1ginas da Web\" \/>\n<meta property=\"og:description\" content=\"Saiba como usar a ferramenta inspecionar elementos do seu navegador para verificar o c\u00f3digo HTML de uma p\u00e1gina da web. Al\u00e9m disso, edite e solucione problemas de p\u00e1ginas da web localmente com ele.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/ferramenta-inspecionar\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-28T13:20:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-11T08:57:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/07\/ferramenta-inspecao.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Salman Ravoof\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Saiba como usar a ferramenta inspecionar elementos do seu navegador para verificar o c\u00f3digo HTML de uma p\u00e1gina da web. Al\u00e9m disso, edite e solucione problemas de p\u00e1ginas da web localmente com ele.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/07\/ferramenta-inspecao.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@salmanravoof\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Salman Ravoof\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"25 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/ferramenta-inspecionar\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/ferramenta-inspecionar\/\"},\"author\":{\"name\":\"Salman Ravoof\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\"},\"headline\":\"Como Usar a Ferramenta Inspecionar do seu Navegador para Editar P\u00e1ginas da Web\",\"datePublished\":\"2021-07-28T13:20:50+00:00\",\"dateModified\":\"2025-02-11T08:57:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/ferramenta-inspecionar\/\"},\"wordCount\":4048,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/ferramenta-inspecionar\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/07\/ferramenta-inspecao.jpeg\",\"keywords\":[\"Browsers\",\"Troubleshooting\"],\"articleSection\":[\"Desenvolvimento WordPress\"],\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/ferramenta-inspecionar\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/ferramenta-inspecionar\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/ferramenta-inspecionar\/\",\"name\":\"Como usar a Ferramenta Inspecionar do seu Navegador para Editar P\u00e1ginas da Web\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/ferramenta-inspecionar\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/ferramenta-inspecionar\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/07\/ferramenta-inspecao.jpeg\",\"datePublished\":\"2021-07-28T13:20:50+00:00\",\"dateModified\":\"2025-02-11T08:57:32+00:00\",\"description\":\"Saiba como usar a ferramenta inspecionar elementos do seu navegador para verificar o c\u00f3digo HTML de uma p\u00e1gina da web. Al\u00e9m disso, edite e solucione problemas de p\u00e1ginas da web localmente com ele.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/ferramenta-inspecionar\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/ferramenta-inspecionar\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/ferramenta-inspecionar\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/07\/ferramenta-inspecao.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/07\/ferramenta-inspecao.jpeg\",\"width\":1460,\"height\":730,\"caption\":\"ferramenta de inspe\u00e7\u00e3o\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/ferramenta-inspecionar\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ferramentas de Desenvolvimento Web\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/ferramentas-desenvolvimento-web\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Como Usar a Ferramenta Inspecionar do seu Navegador para Editar P\u00e1ginas da Web\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\",\"name\":\"Salman Ravoof\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"caption\":\"Salman Ravoof\"},\"description\":\"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.\",\"sameAs\":[\"https:\/\/salmanravoof.com\",\"https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/\",\"https:\/\/x.com\/salmanravoof\"],\"url\":\"https:\/\/kinsta.com\/pt\/blog\/author\/salmanravoof\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Como usar a Ferramenta Inspecionar do seu Navegador para Editar P\u00e1ginas da Web","description":"Saiba como usar a ferramenta inspecionar elementos do seu navegador para verificar o c\u00f3digo HTML de uma p\u00e1gina da web. Al\u00e9m disso, edite e solucione problemas de p\u00e1ginas da web localmente com ele.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/pt\/blog\/ferramenta-inspecionar\/","og_locale":"pt_PT","og_type":"article","og_title":"Como Usar a Ferramenta Inspecionar do seu Navegador para Editar P\u00e1ginas da Web","og_description":"Saiba como usar a ferramenta inspecionar elementos do seu navegador para verificar o c\u00f3digo HTML de uma p\u00e1gina da web. Al\u00e9m disso, edite e solucione problemas de p\u00e1ginas da web localmente com ele.","og_url":"https:\/\/kinsta.com\/pt\/blog\/ferramenta-inspecionar\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2021-07-28T13:20:50+00:00","article_modified_time":"2025-02-11T08:57:32+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/07\/ferramenta-inspecao.jpeg","type":"image\/jpeg"}],"author":"Salman Ravoof","twitter_card":"summary_large_image","twitter_description":"Saiba como usar a ferramenta inspecionar elementos do seu navegador para verificar o c\u00f3digo HTML de uma p\u00e1gina da web. Al\u00e9m disso, edite e solucione problemas de p\u00e1ginas da web localmente com ele.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/07\/ferramenta-inspecao.jpeg","twitter_creator":"@salmanravoof","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Salman Ravoof","Tempo estimado de leitura":"25 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/ferramenta-inspecionar\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/ferramenta-inspecionar\/"},"author":{"name":"Salman Ravoof","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987"},"headline":"Como Usar a Ferramenta Inspecionar do seu Navegador para Editar P\u00e1ginas da Web","datePublished":"2021-07-28T13:20:50+00:00","dateModified":"2025-02-11T08:57:32+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/ferramenta-inspecionar\/"},"wordCount":4048,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/ferramenta-inspecionar\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/07\/ferramenta-inspecao.jpeg","keywords":["Browsers","Troubleshooting"],"articleSection":["Desenvolvimento WordPress"],"inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/ferramenta-inspecionar\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/ferramenta-inspecionar\/","url":"https:\/\/kinsta.com\/pt\/blog\/ferramenta-inspecionar\/","name":"Como usar a Ferramenta Inspecionar do seu Navegador para Editar P\u00e1ginas da Web","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/ferramenta-inspecionar\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/ferramenta-inspecionar\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/07\/ferramenta-inspecao.jpeg","datePublished":"2021-07-28T13:20:50+00:00","dateModified":"2025-02-11T08:57:32+00:00","description":"Saiba como usar a ferramenta inspecionar elementos do seu navegador para verificar o c\u00f3digo HTML de uma p\u00e1gina da web. Al\u00e9m disso, edite e solucione problemas de p\u00e1ginas da web localmente com ele.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/ferramenta-inspecionar\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/ferramenta-inspecionar\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/ferramenta-inspecionar\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/07\/ferramenta-inspecao.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/07\/ferramenta-inspecao.jpeg","width":1460,"height":730,"caption":"ferramenta de inspe\u00e7\u00e3o"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/ferramenta-inspecionar\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Ferramentas de Desenvolvimento Web","item":"https:\/\/kinsta.com\/pt\/topicos\/ferramentas-desenvolvimento-web\/"},{"@type":"ListItem","position":3,"name":"Como Usar a Ferramenta Inspecionar do seu Navegador para Editar P\u00e1ginas da Web"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987","name":"Salman Ravoof","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","caption":"Salman Ravoof"},"description":"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.","sameAs":["https:\/\/salmanravoof.com","https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/","https:\/\/x.com\/salmanravoof"],"url":"https:\/\/kinsta.com\/pt\/blog\/author\/salmanravoof\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/43525","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/117"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=43525"}],"version-history":[{"count":7,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/43525\/revisions"}],"predecessor-version":[{"id":58438,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/43525\/revisions\/58438"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/43525\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/43525\/translations\/it"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/43525\/translations\/de"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/43525\/translations\/es"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/43525\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/43525\/translations\/fr"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/43525\/translations\/nl"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/43525\/translations\/se"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/43525\/translations\/jp"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/43525\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/43528"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=43525"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=43525"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=43525"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}