{"id":42785,"date":"2021-07-29T13:06:55","date_gmt":"2021-07-29T11:06:55","guid":{"rendered":"https:\/\/kinsta.com\/?p=97002"},"modified":"2025-02-11T09:57:49","modified_gmt":"2025-02-11T08:57:49","slug":"inspeccion-elementos","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/inspeccion-elementos\/","title":{"rendered":"C\u00f3mo Utilizar la Herramienta de Inspecci\u00f3n de Elementos del Navegador para Editar P\u00e1ginas Web"},"content":{"rendered":"<p>Existen numerosos y valiosos <a href=\"https:\/\/kinsta.com\/es\/blog\/herramientas-desarrollo-web\/\">recursos de desarrollo web<\/a>, ya sean libros, v\u00eddeos, <a href=\"https:\/\/kinsta.com\/es\/blog\/cursos-diseno-web\/\">cursos en l\u00ednea<\/a>, etc. Aprender a utilizar la herramienta Inspeccionar Elemento (Inspect Element) del navegador es una de esas poderosas habilidades. Es una herramienta de aprendizaje inestimable, que est\u00e1 al alcance de tu mano y siempre accesible.<\/p>\n<p>Con la funci\u00f3n de Inspecci\u00f3n de Elementos, puedes ver el funcionamiento interno del sitio web. Aunque solo se puede ver el marcado del front-end, como HTML, CSS y, a veces, JavaScript, te da una manera de ver precisamente c\u00f3mo los desarrolladores construyeron un sitio web.<\/p>\n<p>En este post, vamos a mostrarte c\u00f3mo utilizar la herramienta Inspeccionar Elemento y algunas de las tecnolog\u00edas, caracter\u00edsticas y funcionalidades relacionadas que puedes encontrar. En primer lugar, vamos a hacer una introducci\u00f3n formal a la herramienta Inspeccionar elemento en s\u00ed.<\/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>Echa un vistazo a nuestro <a href=\"https:\/\/www.youtube.com\/watch?v=TYYB8s4uUI4\">videotutorial sobre c\u00f3mo editar un sitio web con inspeccionar elemento<\/a><\/strong><\/p>\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=TYYB8s4uUI4\"><\/kinsta-video>\n<h2>Presentaci\u00f3n de la herramienta de Inspecci\u00f3n de Elementos<\/h2>\n<p>En los primeros tiempos de la web, solo hab\u00eda una forma de ver el c\u00f3digo de un sitio web: la funci\u00f3n de<strong> ver el c\u00f3digo fuente (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 de Kinsta.com \"Ver fuente\".\" width=\"1000\" height=\"637\"><figcaption class=\"wp-caption-text\">P\u00e1gina de Kinsta.com \u00abView source\u00bb.<\/figcaption><\/figure>\n<p>Esta situaci\u00f3n era frecuente en la \u00e9poca anterior a la abundancia de <a href=\"https:\/\/kinsta.com\/es\/blog\/css-wordpress\/\">hojas de estilo en cascada (CSS)<\/a> y <a href=\"https:\/\/kinsta.com\/es\/blog\/bibliotecas-javascript\/\">JavaScript<\/a>. Los desarrolladores web utilizaban HTML para todos los elementos del sitio, incluyendo el contenido, el dise\u00f1o y&#8230; bueno, todo.<\/p>\n<p>Cuando la web empez\u00f3 a evolucionar y las tecnolog\u00edas subyacentes aumentaron su potencia, fue necesario desarrollar mejores herramientas. <a href=\"http:\/\/firebug.com\">Firebug, de Firefox<\/a>, fue una de las primeras soluciones para averiguar c\u00f3mo funcionaba un sitio web:<\/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=\"Los logotipos de Firefox y Firebug.\" width=\"1000\" height=\"230\"><figcaption class=\"wp-caption-text\">Los logotipos de Firefox y Firebug.<\/figcaption><\/figure>\n<p>Al cabo de un tiempo, esa funcionalidad lleg\u00f3 a casi todos los navegadores. Hoy en d\u00eda, conocemos esa funci\u00f3n como la herramienta Inspeccionar 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=\"La herramienta de inspecci\u00f3n de elementos en el sitio web de Kinsta.\" width=\"1000\" height=\"580\"><figcaption class=\"wp-caption-text\">La herramienta de inspecci\u00f3n de elementos en el sitio web de Kinsta.<\/figcaption><\/figure>\n<p>Es una forma poderosa de ver la tecnolog\u00eda y el c\u00f3digo subyacentes de un sitio web. Como tal, puedes encontrarla en varios lugares: a menudo a trav\u00e9s de un men\u00fa de la barra de herramientas, haciendo clic con el bot\u00f3n derecho en una p\u00e1gina y seleccionando la opci\u00f3n, o con un atajo de teclado.<\/p>\n<p><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">Aunque la herramienta de inspecci\u00f3n de elementos se centra principalmente en el HTML y el CSS de una p\u00e1gina, hay m\u00e1s cosas para las que puedes utilizarlas.<\/span><\/p>\n\n<h3>Recorrido por el panel de elementos de inspecci\u00f3n<\/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 de Brave.\" width=\"1000\" height=\"629\"><figcaption class=\"wp-caption-text\">DevTools de Brave.<\/figcaption><\/figure>\n<p>La herramienta de inspecci\u00f3n de elementos es mucho m\u00e1s que una forma de mostrar el c\u00f3digo. A menudo hay varios paneles a los que acceder:<\/p>\n<ul>\n<li><strong>Inspector &#8211; <\/strong>Se llama <strong>Elementos (Elements) <\/strong>en algunos navegadores. Es la pantalla principal de la herramienta Inspeccionar Elemento y te muestra el c\u00f3digo de la p\u00e1gina, junto con el CSS espec\u00edfico del elemento. Tambi\u00e9n encontrar\u00e1s m\u00e1s detalles sobre el \u00absistema de cuadr\u00edcula\u00bb de un sitio y otros aspectos.<\/li>\n<li><strong>Consola (Console) &#8211; <\/strong>Es el registro de avisos del frontend de un sitio, y es un lugar donde tambi\u00e9n se pueden introducir fragmentos de c\u00f3digo para realizar una prueba r\u00e1pida de una idea.<\/li>\n<li><strong>Red (Network) &#8211; <\/strong>Aqu\u00ed ver\u00e1s las peticiones realizadas hacia y desde un servidor, como todas las peticiones POST y GET.<\/li>\n<li><strong>Rendimiento (Performance) &#8211; <\/strong>Por supuesto, un sitio <a href=\"https:\/\/kinsta.com\/es\/aprender\/acelerar-wordpress\/\">tiene que tener rendimiento<\/a>. Por ello, hay una herramienta dedicada a ayudarte a medir algunas m\u00e9tricas esenciales del sitio. Algunos navegadores lo hacen mejor que otros.<\/li>\n<li><strong>Memoria (Memory) &#8211; <\/strong>Este panel te permite ver c\u00f3mo un sitio utiliza la memoria, y de nuevo, algunos navegadores ofrecen amplias m\u00e9tricas.<\/li>\n<li><strong>Aplicaci\u00f3n (Application) &#8211; <\/strong>Dentro de este panel, puedes ver toda una serie de informaci\u00f3n sobre la cach\u00e9 del sitio, los servicios de fondo, y mucho m\u00e1s<span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">.<\/span><\/li>\n<\/ul>\n<p>Adem\u00e1s de esto, hay m\u00e1s paneles que puedes a\u00f1adir:<\/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=\"Una lista de otros paneles dentro de DevTools de Brave.\" width=\"1000\" height=\"643\"><figcaption class=\"wp-caption-text\">Una lista de otros paneles dentro de DevTools de Brave.<\/figcaption><\/figure>\n<p>Existen paneles simples, como el de <strong>Medios<\/strong>, y otros m\u00e1s complejos como el <strong>Perfilador de JavaScript <\/strong>y el <strong>Monitor de Rendimiento<\/strong>. En pocas palabras, el nombre de la herramienta Inspect Element hace un flaco favor a toda la funcionalidad que hay bajo el cap\u00f3. Tiene un poder inmenso y deber\u00eda ser central en el flujo de trabajo de cualquier desarrollador web.<\/p>\n<h2>Por qu\u00e9 querr\u00e1s utilizar el elemento de inspecci\u00f3n<\/h2>\n<p>La herramienta Inspect Element es casi la \u00fanica soluci\u00f3n \u00abclavada\u00bb que necesitar\u00e1s tener a tu lado durante el desarrollo. Entraremos en los detalles t\u00e9cnicos del por qu\u00e9 a lo largo del resto del art\u00edculo. Sin embargo, primero vale la pena hablar de tu motivaci\u00f3n para usar Inspect Element.<\/p>\n<p>Hay algunas razones por las que querr\u00edas utilizar la herramienta:<\/p>\n<ul>\n<li>Puedes consultar otros sitios web para inspirarse en c\u00f3mo trabajar en el tuyo.<\/li>\n<li>Aprender\u00e1s c\u00f3mo otros sitios o desarrolladores logran t\u00e9cnicas espec\u00edficas.<\/li>\n<li>Te da una licencia para experimentar en tu sitio sin consecuencias.<\/li>\n<li>En la mayor\u00eda de las herramientas de Inspect Element.<\/li>\n<li>Es bueno averiguar m\u00e1s sobre el sitio web en cuesti\u00f3n.<\/li>\n<\/ul>\n<p>En resumen, aprender sobre el desarrollo web implica ver buenos ejemplos de sitios web y descubrir lo que los hace funcionar.<\/p>\n<p><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">La herramienta Inspect Element te permite comprobar el HTML y el CSS exactos que se utilizan en un sitio, lo que te da una gran oportunidad de implementar esos aspectos y t\u00e9cnicas en tu trabajo.<\/span><\/p>\n<h2>C\u00f3mo encontrar tu herramienta de inspecci\u00f3n de elementos de tu navegador<\/h2>\n<p>La buena noticia es que la herramienta de inspecci\u00f3n de elementos es sencillo. En la mayor\u00eda de los casos, se hace clic con el bot\u00f3n derecho del rat\u00f3n en una p\u00e1gina y se selecciona <strong>Inspeccionar <\/strong>o <strong>Inspeccionar 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=\"Eligiendo la herramienta de Inspecci\u00f3n de Elementos.\" width=\"1000\" height=\"516\"><figcaption class=\"wp-caption-text\">Eligiendo la herramienta de Inspecci\u00f3n de Elementos.<\/figcaption><\/figure>\n<p>Por defecto, abrir\u00e1 la herramienta en una ventana dividida. A menudo se sit\u00faa por defecto en el lado derecho. Pero puedes personalizar esto a tu gusto e incluso hacer salir la herramienta en tu ventana:<\/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=\"La herramienta Inspeccionar elemento en su ventana.\" width=\"1000\" height=\"606\"><figcaption class=\"wp-caption-text\">La herramienta Inspeccionar elemento en su ventana.<\/figcaption><\/figure>\n<p>Por supuesto, tambi\u00e9n puedes acceder a Inspeccionar elemento desde la barra de herramientas del navegador o a trav\u00e9s de un atajo de teclado. La ubicaci\u00f3n exacta variar\u00e1 dependiendo del navegador. Por ejemplo, <a href=\"https:\/\/firefox-source-docs.mozilla.org\/devtools-user\/index.html\">en Firefox<\/a>, encontrar\u00e1s las <strong>herramientas de desarrollo web <\/strong>en el men\u00fa<strong> Herramientas &gt; Herramientas del navegador<\/strong>. En cambio, <a href=\"https:\/\/kinsta.com\/es\/blog\/revision-brave-browser\/\">Brave<\/a> (y otros navegadores basados en Chromium) tienen la opci\u00f3n de <strong>Herramientas de desarrollo <\/strong>en el men\u00fa<strong> Ver &gt; Desarrollador<\/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=\"El men\u00fa de la barra de herramientas de Brave, mostrando sus herramientas para desarrolladores.\" width=\"1000\" height=\"607\"><figcaption class=\"wp-caption-text\">El men\u00fa de la barra de herramientas de Brave, mostrando sus herramientas para desarrolladores.<\/figcaption><\/figure>\n<p>Los atajos de teclado suelen ser similares en todos los navegadores: <strong>Comando + May\u00fascula + C <\/strong>(<strong>Control + May\u00fascula + C <\/strong>para Windows). Este atajo hace que aparezcan r\u00e1pidamente las herramientas con las que necesitas trabajar.<\/p>\n<p>Si nunca has abierto la herramienta de Inspecci\u00f3n de Elementos, a menudo se muestra en la parte derecha de su men\u00fa, como hemos mencionado anteriormente. Para cambiar esto, haz clic en el men\u00fa del <a href=\"https:\/\/kinsta.com\/es\/blog\/77-tacticas-probadas-dirigir-trafico\/\">sem\u00e1foro<\/a> en la barra de herramientas del elemento de inspecci\u00f3n. Aqu\u00ed puedes cambiar el lado en el que se muestra el \u00abdock\u00bb:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"The Dock side option in the Inspect Element tool.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/dock-side.png\" alt=\"Las opciones del \"lado del muelle\" en la herramienta Inspeccionar elemento.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">Las opciones del \u00abDock\u00bb en la herramienta Inspeccionar elemento.<\/figcaption><\/figure>\n<p>Ten en cuenta que Firefox tambi\u00e9n utiliza una vista de \u00abtriple panel\u00bb por defecto, que te ayuda a obtener la mayor cantidad de informaci\u00f3n posible en la herramienta Inspeccionar 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=\"La vista de \"triple panel\" de Firefox.\" width=\"1000\" height=\"653\"><figcaption class=\"wp-caption-text\">La vista de \u00abtriple panel\u00bb de Firefox.<\/figcaption><\/figure>\n<p>Ahora que tienes la herramienta abierta, es una buena idea averiguar qu\u00e9 puedes hacer con ella. Hablaremos de esto a continuaci\u00f3n.<\/p>\n<h2>3 situaciones para utilizar la herramienta de inspecci\u00f3n de elementos<\/h2>\n<p>Hemos mencionado algunas formas de utilizar la herramienta Inspeccionar elemento, pero podemos ir m\u00e1s all\u00e1 y ofrecer algunos casos de uso. Vamos a discutirlos brevemente.<\/p>\n<h3>1. B\u00fasqueda de elementos espec\u00edficos en una p\u00e1gina web<\/h3>\n<p>El objetivo principal de la herramienta Inspect Element est\u00e1 en su nombre: inspeccionar los elementos de la p\u00e1gina web. Para ello, te dirigir\u00e1s a la p\u00e1gina web deseada y luego elegir\u00e1s tu m\u00e9todo para abrir las <a href=\"https:\/\/kinsta.com\/es\/blog\/herramientas-de-revision-de-codigo\/\">herramientas de desarrollo<\/a>.<\/p>\n<p>Una vez abierto el panel, har\u00e1s clic en la flecha que act\u00faa como selector del elemento deseado:<\/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=\"El icono de la flecha del inspector.\" width=\"946\" height=\"304\"><figcaption class=\"wp-caption-text\">El icono de la flecha del inspector.<\/figcaption><\/figure>\n<p>Desde aqu\u00ed, puedes pasar el rat\u00f3n por encima de cualquier elemento de la p\u00e1gina, y lo ver\u00e1s resaltado en la ventana del <strong>Inspector\/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=\"Resaltar un elemento en el panel de herramientas de desarrollo.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">Resaltar un elemento en el panel de herramientas de desarrollo.<\/figcaption><\/figure>\n<p>Es un proceso sencillo, una de las razones por las que la herramienta Inspect Element es tan valiosa y popular entre los desarrolladores web.<\/p>\n<h3>2. Emular un dispositivo, una pantalla y un navegador de destino<\/h3>\n<p>El elemento de inspecci\u00f3n tambi\u00e9n funciona como una especie de emulador de dispositivos. En otras palabras, puedes ver c\u00f3mo se ve un sitio web en un dispositivo espec\u00edfico. Las opciones son 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=\"Una lista de dispositivos emulados mostrados en Brave.\" width=\"1000\" height=\"655\"><figcaption class=\"wp-caption-text\">Una lista de dispositivos emulados mostrados en Brave.<\/figcaption><\/figure>\n<p>Este emulador ser\u00e1 estupendo para juzgar si tu estrategia mobile-first o tu <a href=\"https:\/\/kinsta.com\/es\/blog\/diseno-de-paginas-web-sensibles\/\">dise\u00f1o responsivo<\/a>\u00a0son precisos y funcionan. Es inestimable y tambi\u00e9n m\u00e1s rentable que tener 200 dispositivos flotando por tu escritorio.<\/p>\n<p>A menudo se accede a la emulaci\u00f3n de dispositivos desde un peque\u00f1o icono en alg\u00fan lugar del panel de Elementos de Inspecci\u00f3n:<\/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 un dispositivo con la herramienta de inspecci\u00f3n de elementos.\" width=\"942\" height=\"224\"><figcaption class=\"wp-caption-text\">Emulando un dispositivo con la herramienta de inspecci\u00f3n de elementos.<\/figcaption><\/figure>\n<p>Al hacer clic en este icono se mostrar\u00e1 tu sitio tal y como se ve en el dispositivo que ha seleccionado:<\/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=\"Elecci\u00f3n de un dispositivo para emular desde la herramienta Inspeccionar elemento.\" width=\"1000\" height=\"681\"><figcaption class=\"wp-caption-text\">Elecci\u00f3n de un dispositivo para emular desde la herramienta Inspeccionar elemento.<\/figcaption><\/figure>\n<p>M\u00e1s adelante profundizaremos en esto, pero es una forma s\u00f3lida de hacer que tus dise\u00f1os sean consistentes en todos los dispositivos.<\/p>\n<h3>3. Determinaci\u00f3n del rendimiento de la p\u00e1gina web<\/h3>\n<p>La herramienta Inspeccionar elemento tambi\u00e9n puede ayudarte a juzgar la <a href=\"https:\/\/kinsta.com\/es\/blog\/prueba-de-velocidad\/\">velocidad y el rendimiento<\/a> de un sitio web a trav\u00e9s del panel <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=\"El panel de Inspecci\u00f3n del Rendimiento de los Elementos.\" width=\"1000\" height=\"767\"><figcaption class=\"wp-caption-text\">El panel de Inspecci\u00f3n del Performance de los Elementos.<\/figcaption><\/figure>\n<p>Esta caracter\u00edstica funciona \u00abregistrando\u00bb los tiempos de carga de elementos y scripts espec\u00edficos. Los navegadores basados en Chromium ofrecen esta informaci\u00f3n de forma brillante. Grabar\u00e1s la p\u00e1gina mientras se carga y luego ver\u00e1s los resultados en un formato de l\u00ednea de tiempo.<\/p>\n<p>Es una forma excelente de determinar si una p\u00e1gina tiene un buen rendimiento a nivel general. A partir de ah\u00ed, querr\u00e1s utilizar una herramienta como <a href=\"https:\/\/kinsta.com\/es\/blog\/google-pagespeed-insights\/\">Google PageSpeed Insights<\/a> o <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/lighthouse\/blipmdconlkpinefehnmjammfjpmpbjk?hl=en\">Lighthouse<\/a> para trabajar m\u00e1s en el rendimiento de tu sitio. Los navegadores basados en Chromium tienen un generador de informes 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=\"Un informe incorporado de Google Lighthouse.\" width=\"1000\" height=\"663\"><figcaption class=\"wp-caption-text\">Un informe incorporado de Google Lighthouse.<\/figcaption><\/figure>\n<p>Tambi\u00e9n puedes ver un resumen de las pruebas de rendimiento en otras pesta\u00f1as. Por ejemplo, puede ver un <strong>Call Tree<\/strong>, un resumen general y un <strong>Event Log<\/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=\"El registro de eventos del elemento de inspecci\u00f3n.\" width=\"1000\" height=\"663\"><figcaption class=\"wp-caption-text\">El Event Log del elemento de inspecci\u00f3n.<\/figcaption><\/figure>\n<p>Es posible que no necesites ninguna otra herramienta para juzgar el rendimiento o el funcionamiento de tu sitio web. Aprender c\u00f3mo funciona en la pr\u00e1ctica es algo que discutiremos a continuaci\u00f3n.<\/p>\n<h2>Trucos y consejos para utilizar la herramienta de inspecci\u00f3n de elementos<\/h2>\n<p>Ya hemos hablado de que la herramienta Inspect Element es m\u00e1s potente de lo que parece a primera vista. Echemos un vistazo a algunos trucos y consejos para sacar el m\u00e1ximo partido a su conjunto de caracter\u00edsticas, empezando por lo m\u00e1s 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. Modificaci\u00f3n de las propiedades, valores y estados de los elementos<\/h3>\n<p>Hasta ahora, solo hemos tocado el concepto de usar la herramienta Inspeccionar Elemento para hacer cambios temporales en un sitio. Vamos a discutir c\u00f3mo hacer esto con m\u00e1s detalle.<\/p>\n<p>Los pasos son sencillos. En primer lugar, utiliza el icono de la flecha para seleccionar el elemento elegido. Ver\u00e1s una superposici\u00f3n que resalta los distintos componentes cuando pasas el rat\u00f3n por encima de ellos:<\/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=\"Selecci\u00f3n de elementos en la herramienta de inspecci\u00f3n de elementos.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">Selecci\u00f3n de elementos en la herramienta de inspecci\u00f3n de elementos.<\/figcaption><\/figure>\n<p>Una vez que llegues al elemento deseado, puede hacer doble clic en casi cualquier lugar donde vea una etiqueta dentro del panel de <strong>Elements <\/strong>y escribir un cambio. Por ejemplo, queremos cambiar el texto original del h\u00e9roe en la p\u00e1gina de inicio de Kinsta a 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=\"Cambio de texto en la p\u00e1gina de inicio de Kinsta.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">Cambio de texto en la p\u00e1gina de inicio de Kinsta.<\/figcaption><\/figure>\n<p>Tambi\u00e9n puedes <a href=\"https:\/\/kinsta.com\/es\/blog\/css-wordpress\/\">trabajar con CSS<\/a> de la misma manera que con HTML. Por ejemplo, los botones de llamada a la acci\u00f3n (CTA) de la p\u00e1gina de inicio de 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=\"Seleccionar un bot\u00f3n en la p\u00e1gina de inicio de Kinsta.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">Seleccionar un bot\u00f3n en la p\u00e1gina de inicio de Kinsta.<\/figcaption><\/figure>\n<p>Si seleccionas el bot\u00f3n con el puntero, puedes ver su CSS relacionado en el panel de <strong>Styles<\/strong> de la derecha:<\/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=\"El panel Estilo dentro de la herramienta Inspeccionar elemento.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">El panel Styles dentro de la herramienta Inspeccionar elemento.<\/figcaption><\/figure>\n<p>Al igual que con los elementos HTML, puedes cambiar los valores y a\u00f1adir tu CSS tambi\u00e9n:<\/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=\"Cambiar el color del bot\u00f3n en el panel de Estilos.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">Cambiar el color del bot\u00f3n en el panel de Estilos.<\/figcaption><\/figure>\n<p>Por supuesto, para elementos como los botones, es posible que quieras trabajar con sus distintos estados. En este caso, tambi\u00e9n vale la pena cambiar el estado <strong>:hover<\/strong>. Para ello, haz clic en el enlace <strong>:hov <\/strong>del panel Style. Al elegirlo, aparecer\u00e1 una lista de estados de los elementos, y podr\u00e1s seleccionar aquellos para los que quieras ver el CSS del estado hover:<\/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=\"Trayendo las opciones de \"Estados\" en el panel de Estilos.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">Trayendo las opciones de \u00abStyles\u00bb en el panel de Estilos.<\/figcaption><\/figure>\n<p>La p\u00e1gina web mostrar\u00e1 c\u00f3mo es el estado sin que tengas que actuar. Aqu\u00ed, hemos cambiado los colores del hover para diferenciarlo del estado del bot\u00f3n por defecto:<\/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=\"Cambiar los colores del estado hover en el panel de Estilos.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">Cambiar los colores del estado hover en el panel de Styles.<\/figcaption><\/figure>\n<p>Incluso puedes coger las URL de las im\u00e1genes y cambiarlas por otras. En la p\u00e1gina de inicio de Kinsta, mostramos una captura de pantalla del <a href=\"https:\/\/my.kinsta.com\/login?lang=es\">panel de control de 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=\"El tablero de MyKinsta en la p\u00e1gina de inicio de Kinsta.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">El panel de control de MyKinsta en la p\u00e1gina de inicio de Kinsta.<\/figcaption><\/figure>\n<p>Al localizar el elemento y cambiar la URL de origen de la imagen, podr\u00e1s probar otras im\u00e1genes en su 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=\"Changing an image on the Kinsta home page.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">En este caso, el cambio se produjo en cuesti\u00f3n de minutos (Fuente de la imagen: <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 es de esperar, estos cambios no son permanentes, y con una r\u00e1pida actualizaci\u00f3n de la p\u00e1gina, puedes volver a la normalidad. Como alternativa, tambi\u00e9n puedes copiar el HTML y el CSS en <a href=\"https:\/\/kinsta.com\/es\/blog\/editores-html-gratuitos\/\">tu editor<\/a> e incluirlos en tu c\u00f3digo para que los cambios sean permanentes.<\/p>\n<h3>2. B\u00fasqueda de elementos<\/h3>\n<p>Puede ser que antes de poder modificar un elemento, necesites encontrarlo. La herramienta Inspeccionar elemento tiene una funci\u00f3n de b\u00fasqueda directa que puede ayudarte a encontrar cualquier aspecto de una p\u00e1gina web.<\/p>\n<p>Eso s\u00ed, es dif\u00edcil de encontrar si no se sabe d\u00f3nde buscar. La forma \u00aboficial\u00bb en los navegadores basados en Chromium es dirigirse al men\u00fa \u00absem\u00e1foro\u00bb en la parte derecha de la p\u00e1gina y seleccionar la opci\u00f3n <strong>Search<\/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=\"La opci\u00f3n \"Buscar\" en las DevTools de Brave.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">La opci\u00f3n \u00abSearch\u00bb en las DevTools de Brave.<\/figcaption><\/figure>\n<p>Al usar esto se abrir\u00e1 el panel de la <strong>Console<\/strong>, junto con una pesta\u00f1a de <strong>Search<\/strong>. Desde aqu\u00ed, escribe la etiqueta deseada en el cuadro de texto, y ver\u00e1s una lista de elementos asociados en la 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=\"B\u00fasqueda de elementos en las DevTools de Brave.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">B\u00fasqueda de elementos en las DevTools de Brave.<\/figcaption><\/figure>\n<p>Ten en cuenta que en otros navegadores, puedes encontrar la funcionalidad en otro lugar. Por ejemplo, Firefox incluye un cuadro de <a href=\"https:\/\/kinsta.com\/es\/blog\/motores-de-busqueda-alternativos\/\">b\u00fasqueda<\/a> en la parte superior de su panel del <strong>Inspector<\/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=\"B\u00fasqueda de elementos en el panel del Inspector de Firefox.\" width=\"1000\" height=\"653\"><figcaption class=\"wp-caption-text\">B\u00fasqueda de elementos en el panel del Inspector de Firefox.<\/figcaption><\/figure>\n<p>Otro consejo r\u00e1pido: puedes realizar una expansi\u00f3n recursiva de los distintos nodos y elementos haciendo clic con el bot\u00f3n derecho del rat\u00f3n en el panel <strong>Elements <\/strong>y seleccionando <strong>Expand recursively<\/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=\"La opci\u00f3n Expandir recursivamente en el panel Elementos.\" width=\"1000\" height=\"606\"><figcaption class=\"wp-caption-text\">La opci\u00f3n Expand recursively en el panel Elements.<\/figcaption><\/figure>\n<p>Si echas un vistazo al panel de <strong>Styles<\/strong>, tambi\u00e9n ver\u00e1s un cuadro de texto de <strong>Filter<\/strong>. Este campo te permite filtrar por propiedades CSS, lo que lo convierte en un gran compa\u00f1ero de la funci\u00f3n de b\u00fasqueda 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=\"Filtrado por propiedades en el panel de Estilos.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">Filtrado por propiedades en el panel de Estilos.<\/figcaption><\/figure>\n<p>En general, no deber\u00eda ser dif\u00edcil encontrar lo que necesitas con dos herramientas de filtro y b\u00fasqueda dedicadas.<\/p>\n<h3>3. Un r\u00e1pido repaso al Box model<\/h3>\n<p>Una de las mejores maneras en que la herramienta Inspeccionar elemento puede ayudarte a aprender m\u00e1s sobre c\u00f3mo las propiedades CSS act\u00faan sobre los elementos es el panel visual \u00abbox model\u00bb.<\/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=\"El modelo de caja.\" width=\"1000\" height=\"359\"><figcaption class=\"wp-caption-text\">El box model.<\/figcaption><\/figure>\n<p>Esta visi\u00f3n generalte ofrece una representaci\u00f3n de c\u00f3mo una caja espec\u00edfica (como \u00abelemento\u00bb o \u00abdiv\u00bb) aparece en la pantalla. En otras palabras, es una visi\u00f3n general de c\u00f3mo los m\u00e1rgenes, el relleno, el borde y el contenido se combinan para convertirse en la secci\u00f3n que se ve en la pantalla.<\/p>\n<p>Explicar el modelo de caja CSS completo y c\u00f3mo interact\u00faa con el <a href=\"https:\/\/kinsta.com\/es\/blog\/html-vs-html5\/\">HTML de una p\u00e1gina web<\/a> va m\u00e1s all\u00e1 del alcance de este art\u00edculo, aunque <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/CSS\/Building_blocks\/The_box_model\">Mozilla tiene una fant\u00e1stica gu\u00eda sobre<\/a> los entresijos del concepto.<\/p>\n<p>A menudo encontrar\u00e1s el panel <strong>Box model <\/strong>dentro de las secciones <strong>Layout <\/strong>o <b>Computed <\/b>del panel derecho de la herramienta Inspeccionar 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=\"El panel \"Modelo de caja\" dentro de la herramienta Inspeccionar elemento.\" width=\"1000\" height=\"653\"><figcaption class=\"wp-caption-text\">El panel \u00abBox model\u00bb dentro de la herramienta Inspeccionar elemento.<\/figcaption><\/figure>\n<p>Al igual que con cualquier elemento y propiedades, tambi\u00e9n puedes cambiar los valores y la configuraci\u00f3n de una caja en particular. Tambi\u00e9n habr\u00e1 una lista de otras propiedades que te ayudar\u00e1n a posicionar la caja, establecer un \u00edndice z, aplicar ajustes de flotaci\u00f3n y visualizaci\u00f3n, y mucho m\u00e1s.<\/p>\n<p><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">Mientras trabajas con el box model, tambi\u00e9n puedes beneficiarte de ver el sistema de cuadr\u00edcula en juego en la p\u00e1gina. Para ello, eche un vistazo al panel <strong>Layout <\/strong>&#8211; las opciones que necesita estar\u00e1n bajo el men\u00fa <strong>Grid<\/strong>:<\/span><\/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=\"El men\u00fa de configuraci\u00f3n de la parrilla.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">El men\u00fa de configuraci\u00f3n del Grid.<\/figcaption><\/figure>\n<p>Al hacer clic en la configuraci\u00f3n de visualizaci\u00f3n deseada y, a continuaci\u00f3n, elegir una superposici\u00f3n relevante, se mostrar\u00e1 en pantalla, lo que te permitir\u00e1 tomar decisiones m\u00e1s precisas utilizando el modelo de caja para manipular los elementos del sitio.<\/p>\n<h3>4. Emulaci\u00f3n de dispositivos mediante el elemento de inspecci\u00f3n<\/h3>\n<p>Han dejado de ser palabras de moda para convertirse en t\u00e9rminos l\u00e9xicos integrados, pero \u00abresponsive\u00bb y \u00abmobile-friendly\u00bb son factores clave del desarrollo web. Por ello, la herramienta Inspect Element aborda esta faceta mediante un par de funciones.<\/p>\n<p><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">En la mayor\u00eda de los navegadores, la herramienta Inspeccionar elemento tendr\u00e1 un icono de dispositivo m\u00f3vil en la barra de herramientas superior:<\/span><\/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=\"Alternar la visualizaci\u00f3n responsiva m\u00f3vil dentro de Brave.\" width=\"1000\" height=\"378\"><figcaption class=\"wp-caption-text\">Alternar la visualizaci\u00f3n responsiva m\u00f3vil dentro de Brave.<\/figcaption><\/figure>\n<p>Sin embargo, Safari es diferente. En su lugar, hay un interruptor para <b>Enter\/Exit Responsive Design Mode<\/b><strong>\u00a0<\/strong>en el men\u00fa <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=\"La opci\u00f3n \"Salir del modo de dise\u00f1o adaptable\" en Safari.\" width=\"1000\" height=\"402\"><figcaption class=\"wp-caption-text\">La opci\u00f3n \u00abExit Responsive Design Mode\u00bb en Safari.<\/figcaption><\/figure>\n<p>Independientemente de c\u00f3mo llegues, una vez que elijas la opci\u00f3n, la p\u00e1gina web se mostrar\u00e1 como si la estuvieras viendo en un dispositivo m\u00e1s peque\u00f1o:<\/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=\"Una vista del dise\u00f1o de un dispositivo m\u00f3vil en Firefox.\" width=\"1000\" height=\"653\"><figcaption class=\"wp-caption-text\">Una vista del dise\u00f1o de un dispositivo m\u00f3vil en Firefox.<\/figcaption><\/figure>\n<p>Mientras que Safari solo te da la posibilidad de elegir entre los distintos dispositivos de Apple, los dem\u00e1s navegadores profundizan para ofrecerte las herramientas necesarias para dise\u00f1ar con los principios de mobile-first. Por ejemplo, puedes elegir la orientaci\u00f3n de la ventana gr\u00e1fica y el dispositivo que quieres 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=\"La lista de \"Emulaci\u00f3n de dispositivos\" en Brave.\" width=\"1000\" height=\"604\"><figcaption class=\"wp-caption-text\">La lista de \u00abEmulaci\u00f3n de dispositivos\u00bb en Brave.<\/figcaption><\/figure>\n<p>Hay otras dos caracter\u00edsticas interesantes aqu\u00ed. En primer lugar, puedes elegir una velocidad de red emulada. Safari no incluye ninguna opci\u00f3n para esto, y los navegadores basados en Chromium ofrecen una peque\u00f1a opci\u00f3n general de throttling de la red:<\/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=\"Las opciones de aceleraci\u00f3n en Brave.\" width=\"1000\" height=\"335\"><figcaption class=\"wp-caption-text\">Las opciones de throttling en Brave.<\/figcaption><\/figure>\n<p>Firefox es el que mejor lo hace, con una selecci\u00f3n decente de opciones de red entre las que elegir:<\/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=\"Las opciones de estrangulamiento de Firefox.\" width=\"1000\" height=\"366\"><figcaption class=\"wp-caption-text\">Las opciones de throttling de Firefox.<\/figcaption><\/figure>\n<p>Para redondear las cosas, tambi\u00e9n puedes simular la retroalimentaci\u00f3n h\u00e1ptica y el reconocimiento del sensor. En los navegadores basados en Chromium viene por defecto, y en Firefox hay que activarlo:<\/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=\"La opci\u00f3n de retroalimentaci\u00f3n h\u00e1ptica en Firefox.\" width=\"1000\" height=\"312\"><figcaption class=\"wp-caption-text\">La opci\u00f3n de retroalimentaci\u00f3n h\u00e1ptica en Firefox.<\/figcaption><\/figure>\n<p>Firefox se queda atr\u00e1s en este aspecto, ya que Chrome, Brave y otros muestran el cursor como una peque\u00f1a superposici\u00f3n \u00absimilar a la de los dedos\u00bb. La funcionalidad no es perfecta para ning\u00fan navegador, aunque es una forma fiable de determinar <a href=\"https:\/\/kinsta.com\/es\/blog\/prueba-de-velocidad\/\">c\u00f3mo podr\u00eda actuar tu sitio<\/a> en otros dispositivos.<\/p>\n<p><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">Este tipo de pruebas suele quedar en el olvido para muchos desarrolladores web. Sin embargo, ya no hay excusa cuando los navegadores ofrecen soluciones completas como esta.<\/span><\/p>\n<h3>5. Atajos de teclado al utilizar la herramienta de inspecci\u00f3n de elementos<\/h3>\n<p>La mayor\u00eda de los atajos de teclado de los navegadores suelen ser los mismos en todos ellos. Eso es una buena noticia si vas cambiando de herramienta para probar tus sitios.<\/p>\n<p><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">He aqu\u00ed una lista r\u00e1pida de algunos de los atajos m\u00e1s populares (y valiosos):<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td>Abrir la herramienta de inspecci\u00f3n de elementos<\/td>\n<td><strong>Comando + May\u00fasculas + C<\/strong> para Mac, <strong>Control + May\u00fasculas + C<\/strong> para Windows<\/td>\n<\/tr>\n<tr>\n<td>Moverse entre nodos<\/td>\n<td>Flechas <strong>arriba <\/strong>y <strong>abajo<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Expandir el nodo seleccionado<\/td>\n<td>Flecha <strong>derecha<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Contraer el nodo seleccionado<\/td>\n<td>Flecha <strong>izquierda<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Expandir y colapsar nodos de forma recursiva<\/td>\n<td><strong>Opci\u00f3n + clic<\/strong> para Mac, <strong>Alt + clic<\/strong> para Windows<\/td>\n<\/tr>\n<tr>\n<td>Moverse dentro de un nodo para trabajar con los atributos<\/td>\n<td><strong>Entrar<\/strong> o <strong>regresar<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Avanzar a trav\u00e9s de los atributos de un nodo<\/td>\n<td><strong>Tab<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Retroceder en los atributos de un nodo<\/td>\n<td><strong>Shift + Tab<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Ocultar o mostrar el nodo seleccionado<\/td>\n<td><strong>H<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Editar y dejar de editar un nodo como HTML<\/td>\n<td><strong>F2<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Cuando se selecciona una propiedad CSS, se incrementa el valor por uno<\/td>\n<td>Flecha <strong>arriba<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Cuando se selecciona una propiedad CSS, disminuye el valor por uno<\/td>\n<td>Flecha <strong>abajo<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Cuando se selecciona una propiedad CSS, se incrementa el valor por diez<\/td>\n<td><strong>May\u00fasculas<\/strong> + Flecha <strong>arriba<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Cuando se selecciona una propiedad CSS, disminuye el valor por diez<\/td>\n<td><strong>May\u00fasculas<\/strong> + Flecha <strong>abajo<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Cuando se selecciona una propiedad CSS, se incrementa el valor por 0,1<\/td>\n<td><strong>Opci\u00f3n <\/strong>+<strong> flecha arriba<\/strong> para Mac, <strong>Alt<\/strong> + flecha <strong>arriba<\/strong> para Windows<\/td>\n<\/tr>\n<tr>\n<td>Cuando se selecciona una propiedad CSS, disminuye el valor por 0,1<\/td>\n<td><strong>Opci\u00f3n <\/strong>+ <strong>flecha abajo <\/strong>para Mac, <strong>Alt + <\/strong>flecha<strong> abajo<\/strong> para Windows<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Por supuesto, hay muchos m\u00e1s atajos disponibles. Mozilla tiene <a href=\"https:\/\/firefox-source-docs.mozilla.org\/devtools-user\/keyboard_shortcuts\/index.html#page_inspector\">una documentaci\u00f3n excepcional<\/a> para Firefox, mientras que Chrome, Brave, Edge y otros <a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/shortcuts\/\">comparten atajos<\/a>. Apple es menos \u00fatil con los atajos para desarrolladores de Safari, ya que no hay una lista definida en sus p\u00e1ginas de ayuda. En su lugar, sugerimos leer la <a href=\"https:\/\/support.apple.com\/en-us\/guide\/safari-developer\/welcome\/mac\">documentaci\u00f3n oficial<\/a> de las herramientas para desarrolladores de Safari.<\/p>\n\n<h2>Resumen<\/h2>\n<p>El desarrollo web ya no es solo HTML. Hay muchas tecnolog\u00edas implicadas. Incluso si te ci\u00f1es a la sant\u00edsima trinidad de HTML, CSS y JavaScript, tendr\u00e1s que ver c\u00f3mo un sitio web re\u00fane todos estos componentes.<\/p>\n<p>La herramienta de inspecci\u00f3n de elementos del navegador es una de las mejores maneras de mirar bajo el cap\u00f3 de un sitio web y descubrir con detalle expl\u00edcito c\u00f3mo funciona. Aunque es fant\u00e1stica como ayuda para el aprendizaje, tambi\u00e9n puede ayudarte a probar los cambios en tu sitio y descubrir c\u00f3mo funciona en diferentes dispositivos y redes m\u00f3viles.<\/p>\n<p><em>\u00bfUtilizas a menudo el elemento de inspecci\u00f3n? Si es as\u00ed, \u00bfcu\u00e1les son tus caracter\u00edsticas favoritas? Comparte tus opiniones en la secci\u00f3n de comentarios.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Existen numerosos y valiosos recursos de desarrollo web, ya sean libros, v\u00eddeos, cursos en l\u00ednea, etc. Aprender a utilizar la herramienta Inspeccionar Elemento (Inspect Element) del &#8230;<\/p>\n","protected":false},"author":117,"featured_media":42794,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[814,853],"topic":[1312,1337],"class_list":["post-42785","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-browsers","tag-troubleshooting","topic-consejos-marketing-online","topic-herramientas-de-desarrollo-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>Usar la Herramienta de Inspecci\u00f3n para Editar P\u00e1ginas Web<\/title>\n<meta name=\"description\" content=\"Aprende a usar el inspector de elementos del navegador para verificar el c\u00f3digo HTML de una p\u00e1gina. Edita y soluciona problemas de tu web localmente.\" \/>\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\/es\/blog\/inspeccion-elementos\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo Utilizar la Herramienta de Inspecci\u00f3n de Elementos del Navegador para Editar P\u00e1ginas Web\" \/>\n<meta property=\"og:description\" content=\"Aprende a usar el inspector de elementos del navegador para verificar el c\u00f3digo HTML de una p\u00e1gina. Edita y soluciona problemas de tu web localmente.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/inspeccion-elementos\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-29T11:06:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-11T08:57:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/07\/inspeccion-elementos-1.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=\"Aprende a usar el inspector de elementos del navegador para verificar el c\u00f3digo HTML de una p\u00e1gina. Edita y soluciona problemas de tu web localmente.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/07\/inspeccion-elementos-1.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@salmanravoof\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Salman Ravoof\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"26 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/inspeccion-elementos\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/inspeccion-elementos\/\"},\"author\":{\"name\":\"Salman Ravoof\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\"},\"headline\":\"C\u00f3mo Utilizar la Herramienta de Inspecci\u00f3n de Elementos del Navegador para Editar P\u00e1ginas Web\",\"datePublished\":\"2021-07-29T11:06:55+00:00\",\"dateModified\":\"2025-02-11T08:57:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/inspeccion-elementos\/\"},\"wordCount\":4301,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/inspeccion-elementos\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/07\/inspeccion-elementos-1.jpeg\",\"keywords\":[\"browsers\",\"troubleshooting\"],\"articleSection\":[\"Desarrollo de WordPress\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/inspeccion-elementos\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/inspeccion-elementos\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/inspeccion-elementos\/\",\"name\":\"Usar la Herramienta de Inspecci\u00f3n para Editar P\u00e1ginas Web\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/inspeccion-elementos\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/inspeccion-elementos\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/07\/inspeccion-elementos-1.jpeg\",\"datePublished\":\"2021-07-29T11:06:55+00:00\",\"dateModified\":\"2025-02-11T08:57:49+00:00\",\"description\":\"Aprende a usar el inspector de elementos del navegador para verificar el c\u00f3digo HTML de una p\u00e1gina. Edita y soluciona problemas de tu web localmente.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/inspeccion-elementos\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/inspeccion-elementos\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/inspeccion-elementos\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/07\/inspeccion-elementos-1.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/07\/inspeccion-elementos-1.jpeg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/inspeccion-elementos\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Herramientas de Desarrollo Web\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/herramientas-de-desarrollo-web\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"C\u00f3mo Utilizar la Herramienta de Inspecci\u00f3n de Elementos del Navegador para Editar P\u00e1ginas Web\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"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\/es\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\",\"name\":\"Salman Ravoof\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/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\/es\/blog\/author\/salmanravoof\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Usar la Herramienta de Inspecci\u00f3n para Editar P\u00e1ginas Web","description":"Aprende a usar el inspector de elementos del navegador para verificar el c\u00f3digo HTML de una p\u00e1gina. Edita y soluciona problemas de tu web localmente.","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\/es\/blog\/inspeccion-elementos\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo Utilizar la Herramienta de Inspecci\u00f3n de Elementos del Navegador para Editar P\u00e1ginas Web","og_description":"Aprende a usar el inspector de elementos del navegador para verificar el c\u00f3digo HTML de una p\u00e1gina. Edita y soluciona problemas de tu web localmente.","og_url":"https:\/\/kinsta.com\/es\/blog\/inspeccion-elementos\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2021-07-29T11:06:55+00:00","article_modified_time":"2025-02-11T08:57:49+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/07\/inspeccion-elementos-1.jpeg","type":"image\/jpeg"}],"author":"Salman Ravoof","twitter_card":"summary_large_image","twitter_description":"Aprende a usar el inspector de elementos del navegador para verificar el c\u00f3digo HTML de una p\u00e1gina. Edita y soluciona problemas de tu web localmente.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/07\/inspeccion-elementos-1.jpeg","twitter_creator":"@salmanravoof","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Salman Ravoof","Tiempo de lectura":"26 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/inspeccion-elementos\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/inspeccion-elementos\/"},"author":{"name":"Salman Ravoof","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987"},"headline":"C\u00f3mo Utilizar la Herramienta de Inspecci\u00f3n de Elementos del Navegador para Editar P\u00e1ginas Web","datePublished":"2021-07-29T11:06:55+00:00","dateModified":"2025-02-11T08:57:49+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/inspeccion-elementos\/"},"wordCount":4301,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/inspeccion-elementos\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/07\/inspeccion-elementos-1.jpeg","keywords":["browsers","troubleshooting"],"articleSection":["Desarrollo de WordPress"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/inspeccion-elementos\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/inspeccion-elementos\/","url":"https:\/\/kinsta.com\/es\/blog\/inspeccion-elementos\/","name":"Usar la Herramienta de Inspecci\u00f3n para Editar P\u00e1ginas Web","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/inspeccion-elementos\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/inspeccion-elementos\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/07\/inspeccion-elementos-1.jpeg","datePublished":"2021-07-29T11:06:55+00:00","dateModified":"2025-02-11T08:57:49+00:00","description":"Aprende a usar el inspector de elementos del navegador para verificar el c\u00f3digo HTML de una p\u00e1gina. Edita y soluciona problemas de tu web localmente.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/inspeccion-elementos\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/inspeccion-elementos\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/inspeccion-elementos\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/07\/inspeccion-elementos-1.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/07\/inspeccion-elementos-1.jpeg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/inspeccion-elementos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Herramientas de Desarrollo Web","item":"https:\/\/kinsta.com\/es\/secciones\/herramientas-de-desarrollo-web\/"},{"@type":"ListItem","position":3,"name":"C\u00f3mo Utilizar la Herramienta de Inspecci\u00f3n de Elementos del Navegador para Editar P\u00e1ginas Web"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","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\/es\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987","name":"Salman Ravoof","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/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\/es\/blog\/author\/salmanravoof\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/42785","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/117"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=42785"}],"version-history":[{"count":17,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/42785\/revisions"}],"predecessor-version":[{"id":78061,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/42785\/revisions\/78061"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/42785\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/42785\/translations\/it"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/42785\/translations\/de"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/42785\/translations\/es"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/42785\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/42785\/translations\/fr"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/42785\/translations\/nl"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/42785\/translations\/se"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/42785\/translations\/jp"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/42785\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/42794"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=42785"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=42785"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=42785"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}