{"id":368516,"date":"2022-12-17T10:10:00","date_gmt":"2022-12-17T07:10:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=368516"},"modified":"2022-12-29T18:35:22","modified_gmt":"2022-12-29T15:35:22","slug":"como-inspecionar-elementos-do-site-em-seu-navegador","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/como-inspecionar-elementos-do-site-em-seu-navegador\/","title":{"rendered":"Como inspecionar elementos do site em seu navegador"},"content":{"rendered":"\n<p>Se voc\u00ea j\u00e1 ficou curioso para ver como sua p\u00e1gina ficaria com estilos diferentes, mas sem precisar aplicar nenhuma altera\u00e7\u00e3o, ficar\u00e1 feliz em saber que existe uma maneira de fazer isso. Na verdade, seu navegador vem com uma <strong>ferramenta \u00fatil que permitir\u00e1 que voc\u00ea inspecione os elementos do site<\/strong>. Assim, voc\u00ea poder\u00e1 ver as diferentes formas que seu conte\u00fado pode ter.<\/p>\n<p>No texto abaixo, forneceremos todos os fundamentos de como inspecionar os elementos do site enquanto trabalha no WordPress.<\/p>\n<div class=\"sds-iframe-wrapper fitvidsignore\" style=\"position:relative;padding-top:56.25%;max-width:100%;\"><iframe allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" src=\"\/\/www.youtube.com\/embed\/KsV3YdZiwcU\" frameborder=\"0\"><\/iframe><\/div>\n<h2>O que exatamente \u00e9 o elemento de inspe\u00e7\u00e3o?<\/h2>\n<p>Todos os navegadores mais recentes v\u00eam com um conjunto de ferramentas integradas que mostram o c\u00f3digo CSS, JavaScript e HTML de uma p\u00e1gina espec\u00edfica. A ferramenta Inspecionar permite que os desenvolvedores da Web editem o c\u00f3digo em seu navegador da Web, se necess\u00e1rio. Isso lhes d\u00e1 a <strong>possibilidade de pr\u00e9-visualizar quaisquer altera\u00e7\u00f5es sem realmente adulterar qualquer parte do c\u00f3digo<\/strong>. Em outras palavras, eles s\u00e3o os \u00fanicos que podem ver essas altera\u00e7\u00f5es em seu navegador.<\/p>\n<p>Essa op\u00e7\u00e3o pode ser especialmente ben\u00e9fica para quem deseja implementar altera\u00e7\u00f5es em seu site WordPress, mas gostaria de visualiz\u00e1-las primeiro antes de permitir que elas entrem em vigor. Por exemplo, se voc\u00ea \u00e9 propriet\u00e1rio de um blog e deseja ver como o <a href=\"https:\/\/themewp.inform.click\/pt-pt\/trecho-do-wordpress-o-que-e-e-como-usa-lo\/\" title=\"trecho do WordPress de qualquer uma de suas postagens\">trecho do WordPress de qualquer uma de suas postagens<\/a> seria exibido em seu navegador, voc\u00ea pode fazer isso facilmente com a ajuda desta ferramenta.<\/p>\n<p>Isso n\u00e3o \u00e9 \u00fatil apenas para propriet\u00e1rios de sites, mas tamb\u00e9m para qualquer escritor, profissional de marketing, agente de suporte e qualquer outra pessoa que tenha interesse em ver como o conte\u00fado em que trabalham pode ser.<\/p>\n<h2>Como inspecionar o elemento no Google Chrome<\/h2>\n<p>Existem duas maneiras de acessar esta ferramenta. Voc\u00ea pode <strong>clicar com o bot\u00e3o direito do mouse em qualquer \u00e1rea da sua p\u00e1gina da Web e selecionar inspecionar<\/strong> ou clicar em CTRL + Shift + I no teclado.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f3c0ff88.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f3c0ff88.jpg\" alt=\"Como inspecionar elementos do site em seu navegador\"><\/a><\/p>\n<p>Ap\u00f3s realizar esta primeira etapa, seu navegador ser\u00e1 automaticamente dividido em dois e o <strong>c\u00f3digo-fonte de sua p\u00e1gina aparecer\u00e1 na janela menor<\/strong>. Nesta janela, voc\u00ea ver\u00e1 HTML \u00e0 esquerda e CSS \u00e0 direita.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f3d855fd.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f3d855fd.jpg\" alt=\"Como inspecionar elementos do site em seu navegador\"><\/a><\/p>\n<p>Diferentes \u00e1reas da p\u00e1gina da web ser\u00e3o <strong>destacadas conforme voc\u00ea arrasta o mouse sobre a fonte HTML<\/strong>. Se voc\u00ea clicar com o bot\u00e3o direito do mouse em um elemento espec\u00edfico da sua p\u00e1gina da web, esse elemento ser\u00e1 destacado.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f40925fb.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f40925fb.jpg\" alt=\"Como inspecionar elementos do site em seu navegador\"><\/a><\/p>\n<h2>Como editar e depurar o c\u00f3digo<\/h2>\n<p>Com a ferramenta Inspecionar Elemento, voc\u00ea pode editar HTML e CSS. Para editar o HTML, basta clicar duas vezes em qualquer \u00e1rea do c\u00f3digo-fonte HTML e depois editar o c\u00f3digo.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f42ebb27.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f42ebb27.jpg\" alt=\"Como inspecionar elementos do site em seu navegador\"><\/a><\/p>\n<p>Fazer o mesmo tamb\u00e9m \u00e9 poss\u00edvel na \u00e1rea de CSS. Para <strong>adicionar uma nova regra de estilo<\/strong>, basta clicar no \u00edcone + na parte superior.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f461f050.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f461f050.jpg\" alt=\"Como inspecionar elementos do site em seu navegador\"><\/a><\/p>\n<p>Todas as altera\u00e7\u00f5es que voc\u00ea fizer ser\u00e3o exibidas imediatamente em seu navegador.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f49607f3.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f49607f3.jpg\" alt=\"Como inspecionar elementos do site em seu navegador\"><\/a><\/p>\n<p>Mais uma vez, temos que enfatizar que nenhuma dessas altera\u00e7\u00f5es ser\u00e1 salva. Voc\u00ea pode inspecionar qualquer elemento do site que desejar pelo tempo que desejar, mas esta \u00e9 <strong>apenas uma ferramenta de depura\u00e7\u00e3o que n\u00e3o permite que voc\u00ea aplique altera\u00e7\u00f5es reais ao c\u00f3digo<\/strong>. Em outras palavras, todas as suas altera\u00e7\u00f5es desaparecer\u00e3o assim que voc\u00ea recarregar sua p\u00e1gina.<\/p>\n<p>\u00c9 por isso que, se voc\u00ea realmente quiser fazer as altera\u00e7\u00f5es, ter\u00e1 que acessar a folha de estilo do seu tema WordPress e editar o c\u00f3digo l\u00e1. No entanto, devemos observar que <a href=\"https:\/\/themewp.inform.click\/pt-pt\/como-criar-um-tema-filho-da-maneira-correta\/\" title=\"voc\u00ea deve criar um tema filho\">voc\u00ea deve criar um tema filho<\/a> para esses fins.<\/p>\n<h2>\u00c1rea do console para encontrar erros<\/h2>\n<p>Outra fun\u00e7\u00e3o importante da ferramenta Inspecionar Elemento \u00e9 uma \u00e1rea do Console. Esta \u00e1rea espec\u00edfica exibe todos os <strong>erros existentes em seu site<\/strong>. Portanto, se voc\u00ea deseja depurar um erro em sua p\u00e1gina, verificar esta \u00e1rea para inspecionar os erros pode ser \u00fatil para voc\u00ea.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f4cd1321.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f4cd1321.jpg\" alt=\"Como inspecionar elementos do site em seu navegador\"><\/a><\/p>\n<p>Aprender a inspecionar os elementos do site n\u00e3o \u00e9 apenas \u00fatil para o seu trabalho, mas tamb\u00e9m pode economizar tempo da sua equipe de suporte t\u00e9cnico se voc\u00ea j\u00e1 souber qual \u00e9 o seu problema. Como h\u00e1 v\u00e1rios benef\u00edcios nessa poderosa ferramenta, recomendamos que voc\u00ea tente us\u00e1-la seguindo nosso guia.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte de grava\u00e7\u00e3o:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wpklik.com\" class=\"external external_icon\">wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Seu navegador vem com uma ferramenta \u00fatil que permitir\u00e1 que voc\u00ea inspecione os elementos do site e veja as diferentes formas de apar\u00eancia do seu conte\u00fado.<\/p>\n","protected":false},"author":1,"featured_media":364372,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[573],"tags":[848],"class_list":["post-368516","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-nocoes-basicas-do-wordpress","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/368516","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/comments?post=368516"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/368516\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/media\/364372"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/media?parent=368516"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/categories?post=368516"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/tags?post=368516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}