{"id":6244,"date":"2023-01-12T09:00:56","date_gmt":"2023-01-12T12:00:56","guid":{"rendered":"https:\/\/www.valuehost.com.br\/blog\/?p=6244"},"modified":"2022-12-28T11:00:36","modified_gmt":"2022-12-28T14:00:36","slug":"inspecionar-elemento","status":"publish","type":"post","link":"https:\/\/www.valuehost.com.br\/blog\/inspecionar-elemento\/","title":{"rendered":"Como usar a ferramenta de inspecionar elemento? Confira!"},"content":{"rendered":"<p>Quem administra v\u00e1rios <a href=\"https:\/\/www.valuehost.com.br\/blog\/criar-um-site-do-zero\/\" target=\"_blank\" rel=\"noopener\">sites<\/a>, por ter que lidar com muitos c\u00f3digos e recursos, acaba tendo um <strong>grande desafio<\/strong>: como testar mudan\u00e7as no site, sem ter que mexer diretamente nos c\u00f3digos? Toda melhoria, antes de ser implementada, precisa ser testada, pois cada altera\u00e7\u00e3o pode trazer impactos em v\u00e1rios par\u00e2metros, desde o design at\u00e9 as funcionalidades \u2014 o que geraria um retrabalho. Uma maneira de testar essas mudan\u00e7as \u00e9 com a utiliza\u00e7\u00e3o da ferramenta de <strong>inspecionar elementos<\/strong>.<\/p>\n<p>A partir dessa ferramenta, o desenvolvedor tem a oportunidade de realizar uma s\u00e9rie de testes, como a visualiza\u00e7\u00e3o para dispositivos m\u00f3veis, an\u00e1lise de mudan\u00e7as de imagens e estilo em uma p\u00e1gina, identifica\u00e7\u00e3o de classes CSS entre outros recursos. \u00c9 a oportunidade para que a equipe ganhe agilidade e possa implementar as mudan\u00e7as somente <strong>depois de testadas e certificadas.<\/strong><\/p>\n<p>Neste post, vamos conhecer melhor a ferramenta de inspecionar elementos, seus principais recursos e como acess\u00e1-la. Confira!<\/p>\n<h2>O que \u00e9 a ferramenta de inspecionar elementos?<\/h2>\n<p>Sempre que precisamos fazer alguma altera\u00e7\u00e3o em nosso site, o ideal \u00e9 testarmos antes de fazer a mudan\u00e7a no c\u00f3digo. Nessas horas, a ferramenta de inspecionar elementos se torna um grande aliado do desenvolvedor.<\/p>\n<p>Encontrada nos <a href=\"https:\/\/www.valuehost.com.br\/blog\/navegadores-de-internet\/\" target=\"_blank\" rel=\"noopener\">principais navegadores<\/a>, a ferramenta possibilita ao usu\u00e1rio a visualiza\u00e7\u00e3o do c\u00f3digo fonte da p\u00e1gina e os elementos que est\u00e3o sendo destacados. Dessa forma, \u00e9 poss\u00edvel fazer altera\u00e7\u00f5es e verificar o resultado em tempo real.<\/p>\n<p>Caso a modifica\u00e7\u00e3o n\u00e3o entregue o resultado esperado, n\u00e3o haver\u00e1 altera\u00e7\u00e3o no c\u00f3digo fonte da p\u00e1gina, poupando uma s\u00e9rie de trabalhos e retrabalhos que seriam realizados para reverter as mudan\u00e7as.<\/p>\n<p>Existem duas maneiras de <strong>acessar a ferramenta de inspe\u00e7\u00e3o<\/strong> de elementos em seu navegador preferido.<\/p>\n<p>A primeira e mais simples \u00e9 apertando a tecla F12, que abrir\u00e1 a janela da ferramenta de desenvolvimento do lado direito da tela \u2014 ou embaixo, no caso do Firefox. Tamb\u00e9m \u00e9 poss\u00edvel acessar clicando nos 3 pontinhos no canto superior direito de seu navegador, escolher a op\u00e7\u00e3o \u201cMais Ferramentas\u201d e depois a \u201cFerramentas de Desenvolvimento\u201d.<\/p>\n<h2>Quais s\u00e3o os recursos da ferramenta para inspecionar elementos?<\/h2>\n<p>Agora que j\u00e1 entendemos o que s\u00e3o as ferramentas de inspe\u00e7\u00e3o de elementos, vamos falar sobre suas <strong>principais funcionalidades<\/strong>. quais recursos podem ser inspecionados? Veja nas linhas abaixo.<\/p>\n<h3>Fa\u00e7a testes modificando o CSS<\/h3>\n<p>Um dos recursos mais <strong>utilizados por desenvolvedores e designers<\/strong> \u00e9 a inspe\u00e7\u00e3o de elementos localizando os detalhes de CSS em um site. Essa ferramenta d\u00e1 duas possibilidades, sendo a primeira a realiza\u00e7\u00e3o de testes em sua pr\u00f3pria p\u00e1gina. Outra possibilidade \u00e9 verificar o CSS de p\u00e1ginas que voc\u00ea achar interessante, para utilizar a ideia em seu site.<\/p>\n<p>Voc\u00ea pode verificar os estilos de um site <strong>usando dois m\u00e9todos<\/strong> a partir da ferramenta de inspe\u00e7\u00e3o de elementos. O primeiro m\u00e9todo, \u00e9 a verifica\u00e7\u00e3o r\u00e1pida de um item, passando o mouse sobre ele no painel de visualiza\u00e7\u00e3o e checando suas informa\u00e7\u00f5es mais relevantes.<\/p>\n<p>Dessa forma, voc\u00ea consegue entender o esquema de cores que foi utilizado, as margens, as fontes e o que mais for <strong>relevante para sua estrat\u00e9gia<\/strong>. Al\u00e9m disso, a ferramenta destaca o c\u00f3digo para que voc\u00ea possa saber de fato o que est\u00e1 acontecendo no site.<\/p>\n<p>Sempre que voc\u00ea clicar em um elemento na visualiza\u00e7\u00e3o, acontecer\u00e1 uma <strong>atualiza\u00e7\u00e3o no painel de t\u00edtulos<\/strong>, que exibir\u00e1 o seu CSS. Caso haja algum problema durante o processo, como, por exemplo, falta de respostas quando voc\u00ea interagir com alguns elementos, verifique se o \u00edcone do cursos no painel de inspe\u00e7\u00e3o est\u00e1 na cor azul.<\/p>\n<p>Se voc\u00ea estiver fazendo teste e modifica\u00e7\u00f5es em seu pr\u00f3prio site e quiser buscar uma classe ou estilo CSS espec\u00edfico para ver cada elemento que foi utilizado nele, utilize a fun\u00e7\u00e3o arc. Para acess\u00e1-la, abra a ferramenta de inspe\u00e7\u00e3o de elementos, e pressione o atalho: Ctrl + Shift + F no windows ou Cmd + Shift + F no Mac.<\/p>\n<p>Com a caixa de pesquisa aberta, voc\u00ea poder\u00e1 <strong>pesquisar o c\u00f3digo desejado<\/strong> e os resultados relevantes ficar\u00e3o em destaque.<\/p>\n<h3>Resolva problemas em seu site<\/h3>\n<p>Outra utilidade da ferramenta de inspe\u00e7\u00e3o de elementos \u00e9 a <strong>resolu\u00e7\u00e3o de problemas<\/strong> via teste. Por exemplo, se uma fonte est\u00e1 em um formato ou cor inadequada, ou diferente do que foi planejado, antes de mexer no c\u00f3digo, utilize a inspe\u00e7\u00e3o de CSS para verificar a mudan\u00e7a. H\u00e1, tamb\u00e9m, a possibilidade de <strong>edi\u00e7\u00e3o do c\u00f3digo<\/strong> diretamente no <a href=\"https:\/\/www.valuehost.com.br\/blog\/arquivo-html\/\" target=\"_blank\" rel=\"noopener\">HTML<\/a> na p\u00e1gina de inspe\u00e7\u00e3o, bastando apenas um clique duplo no c\u00f3digo que deseja modificar.<\/p>\n<p>Como falamos no primeiro t\u00f3pico deste artigo, as mudan\u00e7as implementadas no c\u00f3digo n\u00e3o alteram o site e os impactos ser\u00e3o apenas no navegador onde a inspe\u00e7\u00e3o foi realizada, com o site <strong>voltando ao formato original<\/strong> ap\u00f3s a atualiza\u00e7\u00e3o. Dessa forma, \u00e9 poss\u00edvel fazer testes r\u00e1pidos e verificar se as solu\u00e7\u00f5es propostas funcionam da forma como a equipe previu.<\/p>\n<h3>Visualize e altere imagens<\/h3>\n<p>Outro benef\u00edcio da ferramenta de inspe\u00e7\u00e3o \u00e9 a <strong>possibilidade de alterar as imagens<\/strong> do site, o que permite ao desenvolvedor testar formatos e tamanhos diferentes. Para isso, selecione a imagem desejada e d\u00ea um clique duplo em sua URL no painel HTML.<\/p>\n<p>A partir dessa a\u00e7\u00e3o, voc\u00ea pode, por exemplo, colar a URL de outra imagem para fazer seus testes, utilizando quantas imagens desejar.<\/p>\n<h3>Teste seu site em diversos tamanhos de tela<\/h3>\n<p>Com a explos\u00e3o do n\u00famero de smartphones no mundo \u2014 <a href=\"https:\/\/www.cnnbrasil.com.br\/business\/brasil-tem-mais-smartphones-que-habitantes-aponta-fgv\/#:~:text=O%20Brasil%20tem%20atualmente%20mais,levantamento%20anual%20divulgado%20pela%20FGV.\" target=\"_blank\" rel=\"noopener\">no Brasil, a quantidade de smartphones ativos j\u00e1 \u00e9 maior que a popula\u00e7\u00e3o do pa\u00eds<\/a>\u00a0\u2014 \u00e9 natural que as empresas priorizem telas menores ao desenvolver seus sites e aplica\u00e7\u00f5es web, sem abandonar as telas maiores.<\/p>\n<p>A ferramenta de inspe\u00e7\u00e3o de elementos permite a <strong>emula\u00e7\u00e3o de diversos tamanhos de telas<\/strong>, com a possibilidade de escolher at\u00e9 a marca do smartphone ou tablet para testar e simular a <a href=\"https:\/\/www.valuehost.com.br\/blog\/site-responsivo\/\" target=\"_blank\" rel=\"noopener\">responsividade<\/a>.<\/p>\n<p>Para isso, entre em <a href=\"https:\/\/www.valuehost.com.br\/blog\/plataformas-para-criacao-de-sites\/\" target=\"_blank\" rel=\"noopener\">seu site<\/a> no navegador desejado, aperte F12 e, quando abrir o painel de inspe\u00e7\u00e3o de elementos, clique no \u00edcone que parece um <strong>tablet com um celular na frente<\/strong>. A partir da\u00ed, voc\u00ea ter\u00e1 a oportunidade de emular os mais diversos tamanhos de tela, visualizando como seu site se comporta.<\/p>\n<p>Esperamos que, ap\u00f3s a leitura deste post, voc\u00ea tenha entendido o que \u00e9 e como funciona a ferramenta de inspe\u00e7\u00e3o de elementos. \u00c9 uma excelente alternativa para administradores de site que n\u00e3o tem uma equipe robusta e precisam t<strong>estar melhorias sem alterar o c\u00f3digo<\/strong>. O resultado \u00e9 um ganho de tempo e a an\u00e1lise de elementos do site no ambiente em que ele rodar\u00e1, os <a href=\"https:\/\/www.valuehost.com.br\/blog\/melhores-navegadores\/\" target=\"_blank\" rel=\"noopener\">navegadores<\/a>.<\/p>\n<p>Gostou do post? Voc\u00ea utiliza a inspe\u00e7\u00e3o de elementos para fazer testes em seu site? Diga para a gente nos coment\u00e1rios a sua experi\u00eancia com a ferramenta.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Quem administra v\u00e1rios sites, por ter que lidar com muitos c\u00f3digos e recursos, acaba tendo um grande desafio: como testar mudan\u00e7as no site, sem ter que mexer diretamente nos c\u00f3digos? Toda melhoria, antes de ser implementada, precisa ser testada, pois cada altera\u00e7\u00e3o pode trazer impactos em v\u00e1rios par\u00e2metros, desde o design at\u00e9 as funcionalidades \u2014<\/p>\n","protected":false},"author":1,"featured_media":6245,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"amp_status":"","footnotes":""},"categories":[67],"tags":[],"class_list":{"0":"post-6244","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-dicas"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Como usar a ferramenta de inspecionar elemento? Confira!<\/title>\n<meta name=\"description\" content=\"Neste post, vamos conhecer melhor a ferramenta de inspecionar elementos, seus principais recursos e como acess\u00e1-la. Confira!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.valuehost.com.br\/blog\/inspecionar-elemento\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como usar a ferramenta de inspecionar elemento? Confira!\" \/>\n<meta property=\"og:description\" content=\"Neste post, vamos conhecer melhor a ferramenta de inspecionar elementos, seus principais recursos e como acess\u00e1-la. Confira!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.valuehost.com.br\/blog\/inspecionar-elemento\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog da ValueHost\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/valuehostbrasil\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-12T12:00:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.valuehost.com.br\/blog\/wp-content\/uploads\/2022\/12\/post_thumbnail-f2db9745b73b53112cc9eec9a9a91a41.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Administrador\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@valuehostbrasil\" \/>\n<meta name=\"twitter:site\" content=\"@valuehostbrasil\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Administrador\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.valuehost.com.br\\\/blog\\\/inspecionar-elemento\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.valuehost.com.br\\\/blog\\\/inspecionar-elemento\\\/\"},\"author\":{\"name\":\"Administrador\",\"@id\":\"https:\\\/\\\/www.valuehost.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/6c5c2bfdf39886e117506864a00c479d\"},\"headline\":\"Como usar a ferramenta de inspecionar elemento? Confira!\",\"datePublished\":\"2023-01-12T12:00:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.valuehost.com.br\\\/blog\\\/inspecionar-elemento\\\/\"},\"wordCount\":1178,\"publisher\":{\"@id\":\"https:\\\/\\\/www.valuehost.com.br\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.valuehost.com.br\\\/blog\\\/inspecionar-elemento\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.valuehost.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/post_thumbnail-f2db9745b73b53112cc9eec9a9a91a41.jpeg\",\"articleSection\":[\"Dicas\"],\"inLanguage\":\"pt-BR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.valuehost.com.br\\\/blog\\\/inspecionar-elemento\\\/\",\"url\":\"https:\\\/\\\/www.valuehost.com.br\\\/blog\\\/inspecionar-elemento\\\/\",\"name\":\"Como usar a ferramenta de inspecionar elemento? Confira!\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.valuehost.com.br\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.valuehost.com.br\\\/blog\\\/inspecionar-elemento\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.valuehost.com.br\\\/blog\\\/inspecionar-elemento\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.valuehost.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/post_thumbnail-f2db9745b73b53112cc9eec9a9a91a41.jpeg\",\"datePublished\":\"2023-01-12T12:00:56+00:00\",\"description\":\"Neste post, vamos conhecer melhor a ferramenta de inspecionar elementos, seus principais recursos e como acess\u00e1-la. Confira!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.valuehost.com.br\\\/blog\\\/inspecionar-elemento\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.valuehost.com.br\\\/blog\\\/inspecionar-elemento\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.valuehost.com.br\\\/blog\\\/inspecionar-elemento\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.valuehost.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/post_thumbnail-f2db9745b73b53112cc9eec9a9a91a41.jpeg\",\"contentUrl\":\"https:\\\/\\\/www.valuehost.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/post_thumbnail-f2db9745b73b53112cc9eec9a9a91a41.jpeg\",\"width\":2560,\"height\":1600,\"caption\":\"inspecionar elemento\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.valuehost.com.br\\\/blog\\\/inspecionar-elemento\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\\\/\\\/www.valuehost.com.br\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Como usar a ferramenta de inspecionar elemento? Confira!\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.valuehost.com.br\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.valuehost.com.br\\\/blog\\\/\",\"name\":\"Blog da ValueHost\",\"description\":\"Artigos sobre Hospedagem, Revenda, Linux, VPS, Cloud, Dedicado, Dom\u00ednio, Certificado SSL, Backup, WebDesign, SEO,  Shell, etc\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.valuehost.com.br\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.valuehost.com.br\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.valuehost.com.br\\\/blog\\\/#organization\",\"name\":\"ValueHost Hospedagem\",\"url\":\"https:\\\/\\\/www.valuehost.com.br\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.valuehost.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.valuehost.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/05\\\/logo_valuehost_1024x1024.png\",\"contentUrl\":\"https:\\\/\\\/www.valuehost.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/05\\\/logo_valuehost_1024x1024.png\",\"width\":1024,\"height\":1024,\"caption\":\"ValueHost Hospedagem\"},\"image\":{\"@id\":\"https:\\\/\\\/www.valuehost.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/facebook.com\\\/valuehostbrasil\",\"https:\\\/\\\/x.com\\\/valuehostbrasil\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.valuehost.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/6c5c2bfdf39886e117506864a00c479d\",\"name\":\"Administrador\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/47637a7862f0e39b85e0eaec84ccb39582621378c11b72dc4318f9ca26ad4ff0?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/47637a7862f0e39b85e0eaec84ccb39582621378c11b72dc4318f9ca26ad4ff0?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/47637a7862f0e39b85e0eaec84ccb39582621378c11b72dc4318f9ca26ad4ff0?s=96&d=mm&r=g\",\"caption\":\"Administrador\"},\"url\":\"https:\\\/\\\/www.valuehost.com.br\\\/blog\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Como usar a ferramenta de inspecionar elemento? Confira!","description":"Neste post, vamos conhecer melhor a ferramenta de inspecionar elementos, seus principais recursos e como acess\u00e1-la. Confira!","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:\/\/www.valuehost.com.br\/blog\/inspecionar-elemento\/","og_locale":"pt_BR","og_type":"article","og_title":"Como usar a ferramenta de inspecionar elemento? Confira!","og_description":"Neste post, vamos conhecer melhor a ferramenta de inspecionar elementos, seus principais recursos e como acess\u00e1-la. Confira!","og_url":"https:\/\/www.valuehost.com.br\/blog\/inspecionar-elemento\/","og_site_name":"Blog da ValueHost","article_publisher":"https:\/\/facebook.com\/valuehostbrasil","article_published_time":"2023-01-12T12:00:56+00:00","og_image":[{"width":2560,"height":1600,"url":"https:\/\/www.valuehost.com.br\/blog\/wp-content\/uploads\/2022\/12\/post_thumbnail-f2db9745b73b53112cc9eec9a9a91a41.jpeg","type":"image\/jpeg"}],"author":"Administrador","twitter_card":"summary_large_image","twitter_creator":"@valuehostbrasil","twitter_site":"@valuehostbrasil","twitter_misc":{"Escrito por":"Administrador","Est. tempo de leitura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.valuehost.com.br\/blog\/inspecionar-elemento\/#article","isPartOf":{"@id":"https:\/\/www.valuehost.com.br\/blog\/inspecionar-elemento\/"},"author":{"name":"Administrador","@id":"https:\/\/www.valuehost.com.br\/blog\/#\/schema\/person\/6c5c2bfdf39886e117506864a00c479d"},"headline":"Como usar a ferramenta de inspecionar elemento? Confira!","datePublished":"2023-01-12T12:00:56+00:00","mainEntityOfPage":{"@id":"https:\/\/www.valuehost.com.br\/blog\/inspecionar-elemento\/"},"wordCount":1178,"publisher":{"@id":"https:\/\/www.valuehost.com.br\/blog\/#organization"},"image":{"@id":"https:\/\/www.valuehost.com.br\/blog\/inspecionar-elemento\/#primaryimage"},"thumbnailUrl":"https:\/\/www.valuehost.com.br\/blog\/wp-content\/uploads\/2022\/12\/post_thumbnail-f2db9745b73b53112cc9eec9a9a91a41.jpeg","articleSection":["Dicas"],"inLanguage":"pt-BR"},{"@type":"WebPage","@id":"https:\/\/www.valuehost.com.br\/blog\/inspecionar-elemento\/","url":"https:\/\/www.valuehost.com.br\/blog\/inspecionar-elemento\/","name":"Como usar a ferramenta de inspecionar elemento? Confira!","isPartOf":{"@id":"https:\/\/www.valuehost.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.valuehost.com.br\/blog\/inspecionar-elemento\/#primaryimage"},"image":{"@id":"https:\/\/www.valuehost.com.br\/blog\/inspecionar-elemento\/#primaryimage"},"thumbnailUrl":"https:\/\/www.valuehost.com.br\/blog\/wp-content\/uploads\/2022\/12\/post_thumbnail-f2db9745b73b53112cc9eec9a9a91a41.jpeg","datePublished":"2023-01-12T12:00:56+00:00","description":"Neste post, vamos conhecer melhor a ferramenta de inspecionar elementos, seus principais recursos e como acess\u00e1-la. Confira!","breadcrumb":{"@id":"https:\/\/www.valuehost.com.br\/blog\/inspecionar-elemento\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.valuehost.com.br\/blog\/inspecionar-elemento\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.valuehost.com.br\/blog\/inspecionar-elemento\/#primaryimage","url":"https:\/\/www.valuehost.com.br\/blog\/wp-content\/uploads\/2022\/12\/post_thumbnail-f2db9745b73b53112cc9eec9a9a91a41.jpeg","contentUrl":"https:\/\/www.valuehost.com.br\/blog\/wp-content\/uploads\/2022\/12\/post_thumbnail-f2db9745b73b53112cc9eec9a9a91a41.jpeg","width":2560,"height":1600,"caption":"inspecionar elemento"},{"@type":"BreadcrumbList","@id":"https:\/\/www.valuehost.com.br\/blog\/inspecionar-elemento\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.valuehost.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Como usar a ferramenta de inspecionar elemento? Confira!"}]},{"@type":"WebSite","@id":"https:\/\/www.valuehost.com.br\/blog\/#website","url":"https:\/\/www.valuehost.com.br\/blog\/","name":"Blog da ValueHost","description":"Artigos sobre Hospedagem, Revenda, Linux, VPS, Cloud, Dedicado, Dom\u00ednio, Certificado SSL, Backup, WebDesign, SEO, Shell, etc","publisher":{"@id":"https:\/\/www.valuehost.com.br\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.valuehost.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/www.valuehost.com.br\/blog\/#organization","name":"ValueHost Hospedagem","url":"https:\/\/www.valuehost.com.br\/blog\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.valuehost.com.br\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.valuehost.com.br\/blog\/wp-content\/uploads\/2015\/05\/logo_valuehost_1024x1024.png","contentUrl":"https:\/\/www.valuehost.com.br\/blog\/wp-content\/uploads\/2015\/05\/logo_valuehost_1024x1024.png","width":1024,"height":1024,"caption":"ValueHost Hospedagem"},"image":{"@id":"https:\/\/www.valuehost.com.br\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/facebook.com\/valuehostbrasil","https:\/\/x.com\/valuehostbrasil"]},{"@type":"Person","@id":"https:\/\/www.valuehost.com.br\/blog\/#\/schema\/person\/6c5c2bfdf39886e117506864a00c479d","name":"Administrador","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/secure.gravatar.com\/avatar\/47637a7862f0e39b85e0eaec84ccb39582621378c11b72dc4318f9ca26ad4ff0?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/47637a7862f0e39b85e0eaec84ccb39582621378c11b72dc4318f9ca26ad4ff0?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/47637a7862f0e39b85e0eaec84ccb39582621378c11b72dc4318f9ca26ad4ff0?s=96&d=mm&r=g","caption":"Administrador"},"url":"https:\/\/www.valuehost.com.br\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.valuehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/6244","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.valuehost.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.valuehost.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.valuehost.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.valuehost.com.br\/blog\/wp-json\/wp\/v2\/comments?post=6244"}],"version-history":[{"count":0,"href":"https:\/\/www.valuehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/6244\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.valuehost.com.br\/blog\/wp-json\/wp\/v2\/media\/6245"}],"wp:attachment":[{"href":"https:\/\/www.valuehost.com.br\/blog\/wp-json\/wp\/v2\/media?parent=6244"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.valuehost.com.br\/blog\/wp-json\/wp\/v2\/categories?post=6244"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.valuehost.com.br\/blog\/wp-json\/wp\/v2\/tags?post=6244"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}