{"id":4854,"date":"2021-06-08T13:00:00","date_gmt":"2021-06-08T11:00:00","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=4854"},"modified":"2023-10-30T10:53:11","modified_gmt":"2023-10-30T09:53:11","slug":"que-es-el-inspector-de-elementos-y-como-se-utiliza","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/que-es-el-inspector-de-elementos-y-como-se-utiliza\/","title":{"rendered":"Qu\u00e9 es el inspector de elementos y c\u00f3mo se utiliza"},"content":{"rendered":"\n<p><strong>En este art\u00edculo te ense\u00f1amos qu\u00e9 es el inspector de elementos y c\u00f3mo se utiliza<\/strong>. Con esta potente herramienta que ponen a tu disposici\u00f3n los navegadores web m\u00e1s famosos, podr\u00e1s analizar el c\u00f3digo fuente de cualquier p\u00e1gina web, descubrir c\u00f3mo est\u00e1n hechos los elementos que la conforman y realizar las modificaciones que tu quieras, para saber c\u00f3mo afectan a la web. Por todo ello, el inspector <strong>es una herramienta imprescindible para cualquier desarrollador web<\/strong>. <\/p>\n\n\n\n<p>En este caso, emplearemos el inspector de elementos de Google Chrome, ya que se trata del navegador m\u00e1s utilizado. Sin embargo, <strong>los inspectores de elementos de navegadores como Mozilla Firefox, Opera o Microsoft Edge son muy similares<\/strong> y su uso es pr\u00e1cticamente igual. Es por ello que en este art\u00edculo aprender\u00e1s a utilizar cualquiera de ellos. <\/p>\n\n\n\n<p>\u00a1Empecemos!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfQu\u00e9 es el inspector de elementos de Google Chrome?<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>El inspector de elementos de Google Chrome <strong>es una herramienta que permite analizar el c\u00f3digo fuente de una web e interactuar con \u00e9l<\/strong>. Sus funcionalidades principales son las siguientes:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Muestra el c\u00f3digo fuente de la web de forma interactiva<\/strong>. Al seleccionar una parte de c\u00f3digo, muestra la parte de la web que est\u00e1 creando, y viceversa. <\/li><li>Permite <strong>realizar modificaciones sobre el c\u00f3digo fuente<\/strong>, reflejando los cambios que se producir\u00edan en la web. Estos cambios \u00fanicamente son visibles en nuestro navegador. <\/li><li>Facilita la <strong>visualizaci\u00f3n de la web en distintas resoluciones<\/strong>. <\/li><\/ul>\n\n\n\n<p>Para abrir el inspector de Chrome en una determinada web, podemos pulsar la tecla <strong>F12 o hacer clic derecho y seleccionar \u00abInspeccionar\u00bb<\/strong>. <\/p>\n\n\n\n<p>A continuaci\u00f3n profundizamos en las funcionalidades del inspector de Chrome, analizando las distintas pesta\u00f1as que lo conforman. <\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/carontestudio.com\/\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"400\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/05\/que-es-el-inspector-de-elementos-de-chrome-y-como-se-utiliza.jpg\" alt=\"Qu\u00e9 es el inspector de elementos de Google Chrome\" class=\"wp-image-4861\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/05\/que-es-el-inspector-de-elementos-de-chrome-y-como-se-utiliza.jpg 600w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/05\/que-es-el-inspector-de-elementos-de-chrome-y-como-se-utiliza-300x200.jpg 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Pesta\u00f1as del inspector de elementos de Google Chrome<\/h2>\n\n\n\n<p>Las pesta\u00f1as del inspector de elementos de Google Chrome se muestran en la parte superior de la ventana. La m\u00e1s importante de todas ellas y la que se abre por defecto es <strong>\u00abElements\u00bb<\/strong>, aunque, como veremos a continuaci\u00f3n, existen otras pesta\u00f1as que proporcionan informaci\u00f3n de inter\u00e9s. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"638\" height=\"24\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/05\/pestanas-inspector-elementos-chrome.jpg\" alt=\"Pesta\u00f1as inspector de elementos de Chrome\" class=\"wp-image-4868\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/05\/pestanas-inspector-elementos-chrome.jpg 638w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/05\/pestanas-inspector-elementos-chrome-300x11.jpg 300w\" sizes=\"auto, (max-width: 638px) 100vw, 638px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Pesta\u00f1a Elements<\/h3>\n\n\n\n<p>Cuando abrimos el inspector en una determinada web, se nos mostrar\u00e1 por defecto en la pesta\u00f1a \u00abElements\u00bb, la m\u00e1s utilizada de todas. En ella se puede <strong>ver todo el c\u00f3digo fuente de la web.<\/strong> Adem\u00e1s, cuando selecciones un determinado fragmento o bloque de c\u00f3digo, se mostrar\u00e1 en pantalla. Por ejemplo, en el caso de la p\u00e1gina principal de Caronte Web Studio, al seleccionar el contenedor que se muestra en la imagen, queda reflejado el fragmento de la web que es creado por dicho c\u00f3digo. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"400\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/05\/que-es-el-inspector-de-elementos-de-chrome-y-como-se-utiliza-1.jpg\" alt=\"Pesta\u00f1a elements del inspector de Chrome\" class=\"wp-image-4871\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/05\/que-es-el-inspector-de-elementos-de-chrome-y-como-se-utiliza-1.jpg 800w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/05\/que-es-el-inspector-de-elementos-de-chrome-y-como-se-utiliza-1-300x150.jpg 300w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/05\/que-es-el-inspector-de-elementos-de-chrome-y-como-se-utiliza-1-768x384.jpg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Pesta\u00f1a Console<\/h3>\n\n\n\n<p>Este apartado sirve <strong>para identificar errores en la web<\/strong> que estamos inspeccionando. Estos errores pueden ser de diferente tipo. Si te encuentras con uno, te recomiendo que busques informaci\u00f3n sobre la referencia de error que se muestra en la consola, ya que cada error es un mundo diferente. <\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"349\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/05\/pestana-console-del-inspector-de-elementos-de-google-chrome-1024x349.jpg\" alt=\"Pesta\u00f1a console del inspector de elementos de Google Chrome\" class=\"wp-image-4938\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/05\/pestana-console-del-inspector-de-elementos-de-google-chrome-1024x349.jpg 1024w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/05\/pestana-console-del-inspector-de-elementos-de-google-chrome-300x102.jpg 300w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/05\/pestana-console-del-inspector-de-elementos-de-google-chrome-768x262.jpg 768w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/05\/pestana-console-del-inspector-de-elementos-de-google-chrome.jpg 1342w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Pesta\u00f1a Network <\/h3>\n\n\n\n<p>Esta pesta\u00f1a nos <strong>muestra todas las peticiones HTTP que realiza el sitio web que estamos inspeccionando<\/strong>. Las peticiones HTTP son solicitudes que realiza la p\u00e1gina al servidor para que \u00e9ste le env\u00ede los recursos que necesita para visualizarse y funcionar correctamente. <\/p>\n\n\n\n<p>En caso de que abras esta pesta\u00f1a cuando la p\u00e1gina ya est\u00e1 cargada, es muy probable que aparezca vac\u00eda. En ese caso, al recargar la p\u00e1gina se listar\u00e1n todas las peticiones HTTP que se llevan a cabo. Un ejemplo de la pesta\u00f1a network es el siguiente: <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"427\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/05\/pestana-network-inspector-de-elementos-google-chrome-1024x427.jpg\" alt=\"Pesta\u00f1a network del inspector de chrome\" class=\"wp-image-4944\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/05\/pestana-network-inspector-de-elementos-google-chrome-1024x427.jpg 1024w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/05\/pestana-network-inspector-de-elementos-google-chrome-300x125.jpg 300w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/05\/pestana-network-inspector-de-elementos-google-chrome-768x320.jpg 768w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/05\/pestana-network-inspector-de-elementos-google-chrome.jpg 1163w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Esta pesta\u00f1a muestra informaci\u00f3n interesante para optimizar el funcionamiento de una web, ya que nos puede dar pistas de los recursos que ralentizan la p\u00e1gina o aquellos que no se cargan correctamente. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Otras pesta\u00f1as<\/h3>\n\n\n\n<p>Adem\u00e1s de las pesta\u00f1as expuestas, el inspector de elementos de Google Chrome cuenta tambi\u00e9n con otras pesta\u00f1as cuyo uso es menos habitual, pero que conviene conocer: <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Sources<\/strong>: nos muestra los dominios desde los que la web est\u00e1 obteniendo contenidos para construir la p\u00e1gina. <\/li><li><strong>Performance<\/strong>: muestra determinadas m\u00e9tricas para conocer el rendimiento de la p\u00e1gina. <\/li><li><strong>Memory<\/strong>: indica la memoria que consume la p\u00e1gina al ser cargada. <\/li><li><strong>Application<\/strong>: muestra informaci\u00f3n sobre los recursos que utiliza la web. Se utiliza habitualmente para ver las cookies que est\u00e1 cargando la p\u00e1gina. <\/li><li><strong>Security<\/strong>: indica si la p\u00e1gina es segura, as\u00ed como los diferentes sitios a los que se accede desde la misma. <\/li><\/ul>\n\n\n\n<p>Adem\u00e1s, puede que nuestro inspector de elementos tenga algunas pesta\u00f1as adicionales. Eso es debido a que algunas extensiones de Google Chrome a\u00f1aden una pesta\u00f1a al inspector de elementos. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Uso de la pesta\u00f1a Elements del inspector de Chrome<\/h2>\n\n\n\n<p>A pesar de que todas las pesta\u00f1as del inspector de elementos muestran informaci\u00f3n de inter\u00e9s, <strong>la pesta\u00f1a Elements es la m\u00e1s importante<\/strong> y la que m\u00e1s se utiliza. Es por ello que vamos a detenernos en su funcionamiento, ya que merece la pena que conozcas todo su potencial. <\/p>\n\n\n\n<p>En primer lugar, debes saber que <strong>al pasar el rat\u00f3n por los elementos HTML del c\u00f3digo fuente, \u00e9stos se ven reflejados en los elementos de la p\u00e1gina<\/strong> que le corresponden. Tambi\u00e9n se puede realizar la acci\u00f3n inversa. Es decir, seleccionando el icono del cursor en la parte superior izquierda de la web, podemos seleccionar los elementos de la p\u00e1gina cuyo c\u00f3digo queremos conocer. En este caso, hemos seleccionado el p\u00e1rrafo que se ve en pantalla, de forma que el inspector nos muestra las etiquetas &lt;p&gt;&lt;\/p&gt; que lo est\u00e1n creando. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"831\" height=\"389\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/06\/image-3.png\" alt=\"C\u00f3mo usar el inspector de elementos de Google Chrome\" class=\"wp-image-5204\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/06\/image-3.png 831w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/06\/image-3-300x140.png 300w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/06\/image-3-768x360.png 768w\" sizes=\"auto, (max-width: 831px) 100vw, 831px\" \/><\/figure><\/div>\n\n\n\n<p>En segundo lugar, ten en cuenta que cuando seleccionas un elemento del c\u00f3digo fuente, <strong>en la parte \u00abStyles\u00bb aparecer\u00e1n todas las reglas CSS que est\u00e1n dando estilo a ese elemento<\/strong>, junto con el archivo .css donde se encuentra cada regla. <\/p>\n\n\n\n<p>En esta secci\u00f3n, <strong>podr\u00e1s cambiar los valores de dichas reglas CSS, anularlas o a\u00f1adir nuevas, comprobando como afectan los cambios a la visualizaci\u00f3n de la web<\/strong>. De esta manera, si quieres modificar los estilos de la web, podr\u00e1s realizar todas las pruebas necesarias en el inspector. <\/p>\n\n\n\n<p>En tercer lugar, te ser\u00e1 de gran ayuda hacer uso de todas las funcionalidades para copiar elementos que implementa el inspector. Haciendo <strong>clic derecho sobre el c\u00f3digo HTML o CSS de la web, el inspector nos mostrar\u00e1 diferentes opciones para copiar<\/strong> diferentes elementos. Las m\u00e1s importantes son las siguientes: <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Copy element<\/strong>: sirve para copiar todo el c\u00f3digo de un bloque HTML. <\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"489\" height=\"157\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/06\/image.png\" alt=\"Utilizar el inspector de elementos\" class=\"wp-image-5200\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/06\/image.png 489w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/06\/image-300x96.png 300w\" sizes=\"auto, (max-width: 489px) 100vw, 489px\" \/><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Copy selector<\/strong>: permite copiar el selector CSS necesario para apuntar a un elemento HTML concreto. <\/li><li><strong>Copy styles<\/strong>: copia todas las reglas de estilo que est\u00e1n afectando a un elemento HTML. <\/li><li><strong>Copy rule<\/strong>: permite copiar una regla CSS entera, con su selector y declaraciones. <\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"504\" height=\"96\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/06\/image-1.png\" alt=\"C\u00f3mo se utiliza el inspector de elementos \" class=\"wp-image-5201\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/06\/image-1.png 504w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/06\/image-1-300x57.png 300w\" sizes=\"auto, (max-width: 504px) 100vw, 504px\" \/><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Copy all declarations<\/strong>: permite copiar todas las declaraciones de una regla CSS. <\/li><li><strong>Copy declaration<\/strong>: copia una declaraci\u00f3n CSS. <\/li><\/ul>\n\n\n\n<p>Por \u00faltimo, ten en cuenta que el icono de dispositivos ubicado en la parte superior izquierda de la p\u00e1gina (junto al cursor), <strong>permite visualizar la web en diferentes resoluciones<\/strong>. De esta manera, podr\u00e1s saber como se ve la web en dispositivos m\u00f3viles de diferente pantalla, tablets, ordenadores, etc. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusiones<\/h2>\n\n\n\n<p>El inspector de elementos es una aplicaci\u00f3n que implementa una gran cantidad de funcionalidades para analizar, optimizar o desarrollar una web. Es una herramienta esencial para trabajar con sitios web. Una vez que ya sabes <strong>qu\u00e9 es y como se utiliza el inspector de elementos,<\/strong> ya puedes empezar a usarlo y a familiarizarte con \u00e9l.<\/p>\n\n\n\n<p>En caso de que utilices un navegador diferente a Google Chrome, como es el caso de <a href=\"https:\/\/www.mozilla.org\/es-ES\/firefox\/new\/\">Mozilla Firefox<\/a>, no tendr\u00e1s problema ya que su inspector de elementos funciona de forma muy similar.  <\/p>\n\n\n\n<p>Espero que este art\u00edculo te haya servido de ayuda. Si quieres aportar algo o conoces alg\u00fan atajo interesante, por favor, no dudes en dejarme un comentario en esta publicaci\u00f3n.<\/p>\n\n\n\n<p>\u00a1Te espero en el siguiente art\u00edculo!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En este art\u00edculo te ense\u00f1amos a utilizar esta potente herramienta que ponen a tu disposici\u00f3n los navegadores web, con la que podr\u00e1s analizar el c\u00f3digo fuente de una web y realizar pruebas para modificarlo, entre otras funcionalidades de inter\u00e9s. <\/p>\n","protected":false},"author":21,"featured_media":5219,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[50],"tags":[],"class_list":["post-4854","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programacion-web"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Qu\u00e9 es el inspector de elementos y c\u00f3mo se utiliza - Blog<\/title>\n<meta name=\"description\" content=\"\u00bfQuieres saber qu\u00e9 es el inspector de elementos y c\u00f3mo se utiliza? Entra y descubre el inspector de Google Chrome. \u00a1No te lo puedes perder!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/carontestudio.com\/blog\/que-es-el-inspector-de-elementos-y-como-se-utiliza\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Qu\u00e9 es el inspector de elementos y c\u00f3mo se utiliza - Blog\" \/>\n<meta property=\"og:description\" content=\"\u00bfQuieres saber qu\u00e9 es el inspector de elementos y c\u00f3mo se utiliza? Entra y descubre el inspector de Google Chrome. \u00a1No te lo puedes perder!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/carontestudio.com\/blog\/que-es-el-inspector-de-elementos-y-como-se-utiliza\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog de maketing | Caronte\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/carontewebstudio\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-08T11:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-30T09:53:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/06\/que-es-y-como-utilizar-el-inspector-de-chrome.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1250\" \/>\n\t<meta property=\"og:image:height\" content=\"737\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Caronte Studio\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Caronte Studio\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/que-es-el-inspector-de-elementos-y-como-se-utiliza\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/que-es-el-inspector-de-elementos-y-como-se-utiliza\\\/\"},\"author\":{\"name\":\"Caronte Studio\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/person\\\/af53223b68efd2be07f600dfc0506979\"},\"headline\":\"Qu\u00e9 es el inspector de elementos y c\u00f3mo se utiliza\",\"datePublished\":\"2021-06-08T11:00:00+00:00\",\"dateModified\":\"2023-10-30T09:53:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/que-es-el-inspector-de-elementos-y-como-se-utiliza\\\/\"},\"wordCount\":1364,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/que-es-el-inspector-de-elementos-y-como-se-utiliza\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/que-es-y-como-utilizar-el-inspector-de-chrome.jpg\",\"articleSection\":[\"Programaci\u00f3n\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/carontestudio.com\\\/blog\\\/que-es-el-inspector-de-elementos-y-como-se-utiliza\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/que-es-el-inspector-de-elementos-y-como-se-utiliza\\\/\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/que-es-el-inspector-de-elementos-y-como-se-utiliza\\\/\",\"name\":\"Qu\u00e9 es el inspector de elementos y c\u00f3mo se utiliza - Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/que-es-el-inspector-de-elementos-y-como-se-utiliza\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/que-es-el-inspector-de-elementos-y-como-se-utiliza\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/que-es-y-como-utilizar-el-inspector-de-chrome.jpg\",\"datePublished\":\"2021-06-08T11:00:00+00:00\",\"dateModified\":\"2023-10-30T09:53:11+00:00\",\"description\":\"\u00bfQuieres saber qu\u00e9 es el inspector de elementos y c\u00f3mo se utiliza? Entra y descubre el inspector de Google Chrome. \u00a1No te lo puedes perder!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/que-es-el-inspector-de-elementos-y-como-se-utiliza\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/carontestudio.com\\\/blog\\\/que-es-el-inspector-de-elementos-y-como-se-utiliza\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/que-es-el-inspector-de-elementos-y-como-se-utiliza\\\/#primaryimage\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/que-es-y-como-utilizar-el-inspector-de-chrome.jpg\",\"contentUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/que-es-y-como-utilizar-el-inspector-de-chrome.jpg\",\"width\":1250,\"height\":737,\"caption\":\"Qu\u00e9 es el inspector de elementos de Google Chrome y c\u00f3mo se utiliza\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/que-es-el-inspector-de-elementos-y-como-se-utiliza\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Qu\u00e9 es el inspector de elementos y c\u00f3mo se utiliza\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\",\"name\":\"Blog de marketing | Caronte\",\"description\":\"En nuestro blog encontrar\u00e1s art\u00edculos semanales sobre SEO, marketing online, programaci\u00f3n web y mucho m\u00e1s.\",\"publisher\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\",\"name\":\"Caronte - Agencia de marketing\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/caronte-agencia-de-marketing-logo.png\",\"contentUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/caronte-agencia-de-marketing-logo.png\",\"width\":1090,\"height\":155,\"caption\":\"Caronte - Agencia de marketing\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/carontewebstudio\\\/\",\"https:\\\/\\\/www.instagram.com\\\/caronte_studio\\\/\",\"https:\\\/\\\/www.tiktok.com\\\/@carontewebstudio\",\"https:\\\/\\\/www.youtube.com\\\/@carontewebstudio\",\"https:\\\/\\\/es.linkedin.com\\\/company\\\/carontewebstudio\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/person\\\/af53223b68efd2be07f600dfc0506979\",\"name\":\"Caronte Studio\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4156e97024f8a40a8bcef2b24c0de8c6cfdd6857e2bc92e993c1a04b255e2e98?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4156e97024f8a40a8bcef2b24c0de8c6cfdd6857e2bc92e993c1a04b255e2e98?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4156e97024f8a40a8bcef2b24c0de8c6cfdd6857e2bc92e993c1a04b255e2e98?s=96&d=mm&r=g\",\"caption\":\"Caronte Studio\"},\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/author\\\/caronte-studio\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Qu\u00e9 es el inspector de elementos y c\u00f3mo se utiliza - Blog","description":"\u00bfQuieres saber qu\u00e9 es el inspector de elementos y c\u00f3mo se utiliza? Entra y descubre el inspector de Google Chrome. \u00a1No te lo puedes perder!","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:\/\/carontestudio.com\/blog\/que-es-el-inspector-de-elementos-y-como-se-utiliza\/","og_locale":"es_ES","og_type":"article","og_title":"Qu\u00e9 es el inspector de elementos y c\u00f3mo se utiliza - Blog","og_description":"\u00bfQuieres saber qu\u00e9 es el inspector de elementos y c\u00f3mo se utiliza? Entra y descubre el inspector de Google Chrome. \u00a1No te lo puedes perder!","og_url":"https:\/\/carontestudio.com\/blog\/que-es-el-inspector-de-elementos-y-como-se-utiliza\/","og_site_name":"Blog de maketing | Caronte","article_publisher":"https:\/\/www.facebook.com\/carontewebstudio\/","article_published_time":"2021-06-08T11:00:00+00:00","article_modified_time":"2023-10-30T09:53:11+00:00","og_image":[{"width":1250,"height":737,"url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/06\/que-es-y-como-utilizar-el-inspector-de-chrome.jpg","type":"image\/jpeg"}],"author":"Caronte Studio","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Caronte Studio","Tiempo de lectura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/carontestudio.com\/blog\/que-es-el-inspector-de-elementos-y-como-se-utiliza\/#article","isPartOf":{"@id":"https:\/\/carontestudio.com\/blog\/que-es-el-inspector-de-elementos-y-como-se-utiliza\/"},"author":{"name":"Caronte Studio","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/person\/af53223b68efd2be07f600dfc0506979"},"headline":"Qu\u00e9 es el inspector de elementos y c\u00f3mo se utiliza","datePublished":"2021-06-08T11:00:00+00:00","dateModified":"2023-10-30T09:53:11+00:00","mainEntityOfPage":{"@id":"https:\/\/carontestudio.com\/blog\/que-es-el-inspector-de-elementos-y-como-se-utiliza\/"},"wordCount":1364,"commentCount":0,"publisher":{"@id":"https:\/\/carontestudio.com\/blog\/#organization"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/que-es-el-inspector-de-elementos-y-como-se-utiliza\/#primaryimage"},"thumbnailUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/06\/que-es-y-como-utilizar-el-inspector-de-chrome.jpg","articleSection":["Programaci\u00f3n"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/carontestudio.com\/blog\/que-es-el-inspector-de-elementos-y-como-se-utiliza\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/carontestudio.com\/blog\/que-es-el-inspector-de-elementos-y-como-se-utiliza\/","url":"https:\/\/carontestudio.com\/blog\/que-es-el-inspector-de-elementos-y-como-se-utiliza\/","name":"Qu\u00e9 es el inspector de elementos y c\u00f3mo se utiliza - Blog","isPartOf":{"@id":"https:\/\/carontestudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/carontestudio.com\/blog\/que-es-el-inspector-de-elementos-y-como-se-utiliza\/#primaryimage"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/que-es-el-inspector-de-elementos-y-como-se-utiliza\/#primaryimage"},"thumbnailUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/06\/que-es-y-como-utilizar-el-inspector-de-chrome.jpg","datePublished":"2021-06-08T11:00:00+00:00","dateModified":"2023-10-30T09:53:11+00:00","description":"\u00bfQuieres saber qu\u00e9 es el inspector de elementos y c\u00f3mo se utiliza? Entra y descubre el inspector de Google Chrome. \u00a1No te lo puedes perder!","breadcrumb":{"@id":"https:\/\/carontestudio.com\/blog\/que-es-el-inspector-de-elementos-y-como-se-utiliza\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/carontestudio.com\/blog\/que-es-el-inspector-de-elementos-y-como-se-utiliza\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/carontestudio.com\/blog\/que-es-el-inspector-de-elementos-y-como-se-utiliza\/#primaryimage","url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/06\/que-es-y-como-utilizar-el-inspector-de-chrome.jpg","contentUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/06\/que-es-y-como-utilizar-el-inspector-de-chrome.jpg","width":1250,"height":737,"caption":"Qu\u00e9 es el inspector de elementos de Google Chrome y c\u00f3mo se utiliza"},{"@type":"BreadcrumbList","@id":"https:\/\/carontestudio.com\/blog\/que-es-el-inspector-de-elementos-y-como-se-utiliza\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/carontestudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Qu\u00e9 es el inspector de elementos y c\u00f3mo se utiliza"}]},{"@type":"WebSite","@id":"https:\/\/carontestudio.com\/blog\/#website","url":"https:\/\/carontestudio.com\/blog\/","name":"Blog de marketing | Caronte","description":"En nuestro blog encontrar\u00e1s art\u00edculos semanales sobre SEO, marketing online, programaci\u00f3n web y mucho m\u00e1s.","publisher":{"@id":"https:\/\/carontestudio.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/carontestudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/carontestudio.com\/blog\/#organization","name":"Caronte - Agencia de marketing","url":"https:\/\/carontestudio.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/06\/caronte-agencia-de-marketing-logo.png","contentUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/06\/caronte-agencia-de-marketing-logo.png","width":1090,"height":155,"caption":"Caronte - Agencia de marketing"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/carontewebstudio\/","https:\/\/www.instagram.com\/caronte_studio\/","https:\/\/www.tiktok.com\/@carontewebstudio","https:\/\/www.youtube.com\/@carontewebstudio","https:\/\/es.linkedin.com\/company\/carontewebstudio"]},{"@type":"Person","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/person\/af53223b68efd2be07f600dfc0506979","name":"Caronte Studio","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/4156e97024f8a40a8bcef2b24c0de8c6cfdd6857e2bc92e993c1a04b255e2e98?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4156e97024f8a40a8bcef2b24c0de8c6cfdd6857e2bc92e993c1a04b255e2e98?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4156e97024f8a40a8bcef2b24c0de8c6cfdd6857e2bc92e993c1a04b255e2e98?s=96&d=mm&r=g","caption":"Caronte Studio"},"url":"https:\/\/carontestudio.com\/blog\/author\/caronte-studio\/"}]}},"_links":{"self":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/4854","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/comments?post=4854"}],"version-history":[{"count":49,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/4854\/revisions"}],"predecessor-version":[{"id":5216,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/4854\/revisions\/5216"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/media\/5219"}],"wp:attachment":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/media?parent=4854"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/categories?post=4854"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/tags?post=4854"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}