{"id":368522,"date":"2022-12-17T10:19:00","date_gmt":"2022-12-17T07:19:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=368522"},"modified":"2022-12-29T18:25:47","modified_gmt":"2022-12-29T15:25:47","slug":"como-inspeccionar-los-elementos-del-sitio-web-en-su-navegador","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/como-inspeccionar-los-elementos-del-sitio-web-en-su-navegador\/","title":{"rendered":"C\u00f3mo inspeccionar los elementos del sitio web en su navegador"},"content":{"rendered":"\n<p>Si alguna vez ha tenido curiosidad por ver c\u00f3mo se ver\u00eda su p\u00e1gina con diferentes estilos, pero sin tener que aplicar ning\u00fan cambio, le encantar\u00e1 saber que hay una forma de hacerlo. De hecho, su navegador viene con una <strong>herramienta \u00fatil que le permitir\u00e1 inspeccionar los elementos del sitio web<\/strong>. De esta manera, podr\u00e1 ver las diferentes formas en que se puede ver su contenido.<\/p>\n<p>En el texto a continuaci\u00f3n, le proporcionaremos todos los elementos esenciales sobre c\u00f3mo inspeccionar los elementos del sitio web mientras trabaja en 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>\u00bfQu\u00e9 es exactamente el elemento de inspecci\u00f3n?<\/h2>\n<p>Todos los navegadores web m\u00e1s recientes vienen con un conjunto de herramientas integradas que muestran el c\u00f3digo CSS, JavaScript y HTML para una p\u00e1gina en particular. La herramienta de inspecci\u00f3n permite a los desarrolladores web editar el c\u00f3digo en su navegador web si es necesario. Esto les da la <strong>posibilidad de obtener una vista previa de los cambios sin alterar el c\u00f3digo<\/strong>. En otras palabras, son los \u00fanicos que pueden ver estos cambios en su navegador.<\/p>\n<p>Esta opci\u00f3n puede ser especialmente beneficiosa para aquellos que desean implementar cambios en su sitio web de WordPress pero les gustar\u00eda obtener una vista previa antes de permitir que surtan efecto. Por ejemplo, si es propietario de un blog y desea ver c\u00f3mo se mostrar\u00eda en su navegador un <a href=\"https:\/\/themewp.inform.click\/es\/extracto-de-wordpress-que-es-y-como-usarlo\/\" title=\"extracto de WordPress de cualquiera de sus publicaciones, puede hacerlo f\u00e1cilmente con la ayuda de esta herramienta.\">extracto de WordPress de cualquiera de sus publicaciones, puede hacerlo f\u00e1cilmente con la ayuda de esta herramienta.<\/a><\/p>\n<p>Esto no solo es \u00fatil para los propietarios de sitios web, sino tambi\u00e9n para cualquier escritor, comercializador, agente de soporte y cualquier otra persona que est\u00e9 interesada en ver c\u00f3mo podr\u00eda verse el contenido en el que trabajan.<\/p>\n<h2>C\u00f3mo inspeccionar elementos en Google Chrome<\/h2>\n<p>Hay dos formas de acceder a esta herramienta. Puede hacer <strong>clic derecho en cualquier \u00e1rea de su p\u00e1gina web y seleccionar inspeccionar<\/strong>, o hacer clic en CTRL + Shift + I en su 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=\"C\u00f3mo inspeccionar los elementos del sitio web en su navegador\"><\/a><\/p>\n<p>Despu\u00e9s de realizar este primer paso, su navegador se dividir\u00e1 autom\u00e1ticamente en dos y el <strong>c\u00f3digo fuente de su p\u00e1gina aparecer\u00e1 en la ventana m\u00e1s peque\u00f1a<\/strong>. En esta ventana, ver\u00e1 HTML a la izquierda y CSS a la derecha.<\/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=\"C\u00f3mo inspeccionar los elementos del sitio web en su navegador\"><\/a><\/p>\n<p>Se resaltar\u00e1n diferentes \u00e1reas de la p\u00e1gina web a <strong>medida que arrastre el mouse sobre la fuente HTML<\/strong>. Si termina haciendo clic derecho en un elemento espec\u00edfico de su p\u00e1gina web, ese elemento se resaltar\u00e1.<\/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=\"C\u00f3mo inspeccionar los elementos del sitio web en su navegador\"><\/a><\/p>\n<h2>C\u00f3mo editar y depurar el c\u00f3digo<\/h2>\n<p>Con la herramienta Inspeccionar elemento, puede editar tanto HTML como CSS. Para editar el HTML, simplemente haga doble clic en cualquier \u00e1rea del c\u00f3digo fuente HTML y luego edite el 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=\"C\u00f3mo inspeccionar los elementos del sitio web en su navegador\"><\/a><\/p>\n<p>Hacer lo mismo tambi\u00e9n es posible en el \u00e1rea CSS. Para <strong>agregar una nueva regla de estilo<\/strong>, simplemente haga clic en el \u00edcono + en la 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=\"C\u00f3mo inspeccionar los elementos del sitio web en su navegador\"><\/a><\/p>\n<p>Todos los cambios que realice se mostrar\u00e1n inmediatamente en su 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=\"C\u00f3mo inspeccionar los elementos del sitio web en su navegador\"><\/a><\/p>\n<p>Una vez m\u00e1s, tenemos que recalcar que ninguno de estos cambios se guardar\u00e1. Puede inspeccionar cualquier elemento del sitio web que desee durante el tiempo que desee, pero esta es <strong>solo una herramienta de depuraci\u00f3n que no le permitir\u00e1 aplicar ning\u00fan cambio real al c\u00f3digo<\/strong>. En otras palabras, todos sus cambios desaparecer\u00e1n una vez que vuelva a cargar su p\u00e1gina.<\/p>\n<p>Por eso, si realmente desea realizar los cambios, deber\u00e1 acceder a la hoja de estilo de su tema de WordPress y editar el c\u00f3digo all\u00ed. Sin embargo, debemos tener en cuenta que <a href=\"https:\/\/themewp.inform.click\/es\/como-crear-un-tema-hijo-de-la-manera-adecuada\/\" title=\"debe crear un tema secundario\">debe crear un tema secundario<\/a> para estos fines.<\/p>\n<h2>\u00c1rea de la consola para encontrar errores<\/h2>\n<p>Otra funci\u00f3n importante de la herramienta Inspeccionar elemento es un \u00e1rea de Consola. Esta \u00e1rea en particular muestra todos los <strong>errores existentes en su sitio<\/strong>. Por lo tanto, si desea depurar un error en su p\u00e1gina, consultar esta \u00e1rea para inspeccionar los errores podr\u00eda resultarle \u00fatil.<\/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=\"C\u00f3mo inspeccionar los elementos del sitio web en su navegador\"><\/a><\/p>\n<p>Aprender a inspeccionar los elementos del sitio web no solo es \u00fatil para su trabajo, sino que tambi\u00e9n puede ahorrarle tiempo a su equipo de soporte t\u00e9cnico si ya sabe cu\u00e1l es su problema. Dado que esta poderosa herramienta tiene m\u00faltiples beneficios, le recomendamos que intente usarla siguiendo nuestra gu\u00eda.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wpklik.com\" class=\"external external_icon\">wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Su navegador viene con una herramienta \u00fatil que le permitir\u00e1 inspeccionar los elementos del sitio web y ver las diferentes formas en que puede verse su contenido.<\/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":[566],"tags":[849],"class_list":["post-368522","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-conceptos-basicos-de-wordpress","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/368522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/comments?post=368522"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/368522\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media\/364372"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media?parent=368522"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/categories?post=368522"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/tags?post=368522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}