--- title: "La consola de Chrome y sus usos en posicionamiento web - Carlos Sánchez" description: "Guía explicativa de los usos más útiles de cara al SEO Técnico." author: "Carlos Sánchez" url: https://carlossanchezdonate.com/articulo/devtools-para-seo/ image: https://carlossanchezdonate.com/wp-content/uploads/tb-devtools-guia.jpg --- # Manejar la Devtools para SEO Guía avanzada de la Devtools (Consola de Chrome para los amigos) para SEO ![Manejar la Devtools para SEO](https://carlossanchezdonate.com/wp-content/uploads/cover-devtools-guia.jpg) **Autor:** : [Carlos Sánchez](https://carlossanchezdonate.com/sobre-mi/) **Temática: ** : [Tecnologías](https://carlossanchezdonate.com/seo-avanzado/tecnologias/) , : [WPO](https://carlossanchezdonate.com/seo-avanzado/rendimiento-velocidad/) **Fecha de publicación:** : 2024-03-08 **Última revisión:** : 2026-03-02 **Índice** mostrar 1 Interpretación del Navegador 2 Abrir la consola de Chrome 2.1 Atajos de teclado: 3 Elementos 3.1 Dimensiones 4 Red 4.1 Limitar la conexión 4.2 Inhabilitar caché 4.3 Código de respuesta y protocolo 4.4 Analizar el x-robots 5 Panel de la consola 5.1 Consola 5.2 Condiciones de Red 5.3 Renderizado 5.4 Sensores 6 Fuentes 7 Aplicaciones 7.1 Tokens 7.2 Cookies 8 memoria y grabadora 9 Lighthouse 10 Otras funciones interesantes 10.1 Deshabilitar JavaScript 10.2 Capturas de pantalla 11 Bibliografía He creado esta publicación para remarcar los puntos más importantes de la primera [SEOminada](https://carlossanchezdonate.com/servicios/seominadas/) que celebramos. Para enterarte bien de **cómo usar la DevTools** puede ser muy relevante que entiendas [cómo funciona una web](https://carlossanchezdonate.com/articulo/como-funciona-una-web/#webs-20), incluso conocimientos básicos de HTML, [CSS](https://carlossanchezdonate.com/articulo/css-posicionamiento-web/) y JavaScript, de esta forma te será mucho más sencillo entender la utilidad de la consola. ## Interpretación del Navegador Cuando el [Servidor](https://carlossanchezdonate.com/seo-avanzado/servidores/#informacion) ha procesado toda la información posible, este le devuelve al navegador archivos en formatos que pueda entender, como HTML, CSS, JavaScript, [XML](https://carlossanchezdonate.com/articulo/sitemaps/#sitemap-xml) o demás [multimedia](https://carlossanchezdonate.com/seo-avanzado/multimedia/#informacion). Una vez llegan esos archivos al navegador desde el que estamos queriendo ver la web, [se procesa el JavaScript y se renderiza](https://carlossanchezdonate.com/articulo/renderizado-en-el-seo/), haciendo que sea un código distinto el código que llega originalmente a nuestro navegador, del [DOM](https://carlossanchezdonate.com/recursos/conversor-a-dom/) resultante. [Las webs modernas están vivas y suelen cambiar el contenido](https://carlossanchezdonate.com/articulo/renderizacion-de-javascript-en-el-seo/) en tiempo real de forma dinámica. Recordemos que: - El HTML marca la estructura de la web. - EL CSS modifica y configura el aspecto visual de los elementos HTML. - El JavaScript es el lenguaje de programación que es capaz de procesar un navegador, y por tanto es el que automatiza y realiza cambios y configuraciones en tiempo real durante la navegación del usuario. ![](https://carlossanchezdonate.com/wp-content/uploads/devtools-fuentes-sm-1.jpg) Podríamos decir que la Devtools es una lupa que nos permite observar que está ocurriendo en nuestro navegador cuando le llega la información de la web. Incluso nos permite enviar peticiones con **información falsa al servidor**, o **cambiar el contenido de la web en vivo** (solo visible por nosotros en nuestro navegador). Cuestión que ayuda mucho a la programación o a **saber como quedaría cualquier cambio en nuestra web**. ![](https://carlossanchezdonate.com/wp-content/uploads/devtools-modificaciones.jpg) ## Abrir la consola de Chrome Como he comentado, la consola visualiza que está ocurriendo en tu navegador para que se acaba visualizando lo que ves. Por tanto, las extensiones, que suelen ser bloques de JS pueden afectar en tu resultado final. Así que te recomiendo que siempre que quieras auditar cualquier proyecto con la DevTools, lo hagas desde modo incógnito. Puedes hacer click derecho en cualquier punto de la web y darle a inspeccionar elementos. ### Atajos de teclado: **Abrir la consola de Chrome:** `CTRL + Shift + i` **Abrir el inspector de elementos directamente**, para seleccionar un elemento de la web. Con el hacha levantada. `CRTL + Shift + c` Ejecutar cualquier función dentro de la consola. Algo bastante útil si no quieres estar navegando por toda la interfaz para encontrar algo: `CRTL + Shift + p` Si no escribes ninguna función en concreto, te saldrán todas las opciones que puedes tener dentro de la consola. ![teclado crtl + shift](https://carlossanchezdonate.com/wp-content/uploads/teclado-ctrl-shift.jpg) Adjunto esta imagen para torpes, casi siempre serán esas dos teclas y pulsar una letra. **Para los especiales que usan Mac y les asusta la tecla CTRL, es lo mismo pero usando la tecla Cmd, el bicho este --> ⌘ Como ejemplo y como prueba, te recomiendo abrir la consola (ctrl + shift + i) y abrir en panel de ejecutar (ctrl + shift + p) y escribir "español", de esta forma puedes cambiar la Devtools para que esté en tu idioma (que entiendo que si estás aventurándote a leer este post, es porque algo de español sabes). ## Elementos El código que se muestra en Elementos es el resultante cuando actúa JavaScript, te permite seleccionar los elementos y modificarlos. Con esta opción se pueden añadir elementos de CSS, eliminar o modificar cualquier etiqueta de HTML, ver los márgenes y la disposición del código. > Puedes hacer trucos como modificar el valor del atributo type para que no sea password y ver la contraseña. ![Ver contraseña](https://carlossanchezdonate.com/wp-content/uploads/ver-pass-devtools.jpg) Un uso útil de esto para auditar el SEO podría ser por ejemplo detectar [data-nosnippet](https://carlossanchezdonate.com/articulo/data-nosnippet/) en ciertos elementos. ### Dimensiones Puedes darle al botón de dimensiones (arriba a la izquierda) para emular como funciona un dispositivo móvil. Recuerda recargar la web por si está configurada como *Adaptive*. ![Consola Chorme telefono](https://carlossanchezdonate.com/wp-content/uploads/phone-devtools.jpg) ## Red Es una de las funciones más interesantes dentro de la consola. Permite ver el orden de los archivos que se han descargado cuando se accede a una URL, comprobar si se tiene en caché, el tiempo que ha tardado, los encabezados http, su protocolo y básicamente todo. ![red devtools](https://carlossanchezdonate.com/wp-content/uploads/red-devtools-network.jpg) Desde red, gracias a la muestra de cascada, permite comprobar la efectividad de técnicas de [WPO](https://carlossanchezdonate.com/seo-avanzado/rendimiento-velocidad/#informacion) como las [precargas](https://carlossanchezdonate.com/articulo/precarga-de-recursos/) o las [cargas diferidas](https://carlossanchezdonate.com/articulo/cargas-diferidas-seo/). La Tabla consiste en: - Cascada: Orden en el que se descargan los archivos. - Tamaño: (caché de disco) ya está en caché para refrescar Control + F5 (caché: memoria especial almacenada en el navegador para que no se descargue todo cada vez. Se va renovando). - Protocolo: Clic derecho opciones de encabezado ->protocolo . h2 es http2 y h3 es http3 - Tipo: que tipo de archivo (extensión) es. - Iniciador: En que línea se esta utilizando este archivo. Si le haces clic te dice más o menos en qué línea está. (Los archivos que apuntan hacia él) - Tamaño: Lo que pesa dicho elemento. - Hora: El tiempo que ha tardado en descargarse el archivo. - Cascada: El orden en el que se han descargado y procesado los archivos, y en cuanto tiempo. Cuando haces click en uno de los archivos: - Encabezados: Permite visualizar los distintos encabezados HTTP. - Vista previa: Permite saber como se visualiza dicho archivo (por sí mismo, sin la combinación con el resto de archivos) - Respuesta: El código del archivo, los paréntesis de abajo te permite desminificar el código. - Iniciador: Te permite saber que archivos inicia dicho elemento (apuntando hacia otros) - Tiempos: Permite examinar mejor el tiempo que tardó dicho archivo. Desarrollo más distintas opciones dentro de red: ### Limitar la conexión Limitar la conexión te permite emular ser un usuario con peor conexión a internet. Esto te puede ayudar a ver la [experiencia del usuario](https://carlossanchezdonate.com/articulo/sxo-especialidad-seo/) y a ver como funciona una web a cámara lenta. ### Inhabilitar caché Desde red o desde el panel de condiciones de red se puede inhabilitar el [caché](https://carlossanchezdonate.com/articulo/cache-en-el-seo/) para que se refresquen todos los archivos de nuevo y ver cambios. Cuando el caché está habilitado y está bien configurado en la web se vería así. ![](https://carlossanchezdonate.com/wp-content/uploads/archivos-cache-usuario.jpg) ### Código de respuesta y protocolo Desde el listado en cascada se pueden analizar los [códigos de respuesta](https://carlossanchezdonate.com/articulo/codigos-de-respuesta/) de cada archivo y la [versión de HTTP](https://carlossanchezdonate.com/curiosidades/version-protocolo-http/). > Importante: La versión de HTTP no aparece por defecto. (Click derecho > Opciones de encabezado > Protocolo) ![](https://carlossanchezdonate.com/wp-content/uploads/protocolo-devtools-http.jpg) ### Analizar el x-robots Si haces Click en cualquiera de los archivos que se descargan en tu ordenador, tienes la opción de examinar los encabezados, incluyendo si tienen la [x-robots](https://carlossanchezdonate.com/articulo/x-robots-tag/): ![](https://carlossanchezdonate.com/wp-content/uploads/x-robots-imagen.jpg) Se puede poner noindex desde el x-robots para [evitar la indexación de una imagen](https://carlossanchezdonate.com/articulo/evitar-indexado-imagen/#http-header) o un pdf por ejemplo. ## Panel de la consola El panel de la consola se puede mostrar desde los 3 puntos de arriba a la derecha o con el ctrl + Shift + P (consola), este muestra opciones de lo más interesante. ### Consola Te permite leer los mensajes y alertas de JavaScript e incluso insertarlo para ver que efectos se producen. ### Condiciones de Red Te permite limitar la conexión de red o inhabilitar el caché (al igual que en el panel de red), pero además te permite modificar o "simular" un [user-agent](https://carlossanchezdonate.com/articulo/bloquear-user-agents/) alternativo e incluso aceptar o rechazar distintos *métodos de compresión web como deflate, gzip o brotli* para hacer pruebas del content-encoding. ### Renderizado Te permite visualizar de color verde los cambios que se van produciendo en el DOM durante el visualizado de la web. ### Sensores Te permite cambiar geográficamente el lugar de origen que se manda en las peticiones. Ojo que esto no es lo mismo que un VPN. ## Fuentes Nos permite ver desde qué dominios se carga cada archivo y qué archivos se están utilizando en nuestra web. ![](https://carlossanchezdonate.com/wp-content/uploads/fuentes-url.jpg) Desde ahí podemos obtener todos y cada uno de los recursos que visualizamos en la web, con el orden y URL correspondiente. ## Aplicaciones Principalmente es para cuestiones de la memoria como Cookies o Tokens (para contraseñas) ### Tokens Los tokens es lo que nos permite tener acceso a una cuenta dentro de una web sin necesidad de iniciar sesión por medio de usuario y contraseña. Se guarda ese token en tu navegador, y es lo que te permite acceder haciendo que la web sepa que tú eres tú. ![](https://carlossanchezdonate.com/wp-content/uploads/tokens-linkedin-devtools.jpg) A día de hoy, la forma más habitual de robo de cuentas es por medio del robo de tokens ### Cookies Desde el panel de Cookies se permite [revisar las Cookies](https://carlossanchezdonate.com/articulo/pop-up-cookies/) que te introduce la web y si estas cumplen con la normativa. ![](https://carlossanchezdonate.com/wp-content/uploads/cookies-policy-devtools.jpg) ## memoria y grabadora Aunque Memoria tiene tiempo, aconsejo combinarla con la función nueva de grabación. Esto nos permite realizar una emulación del Customer Journey y repetirla exactamente igual para hacer distintas pruebas de rendimiento, y comprobar si las implementaciones que hacemos de WPO como caché, precargas y cargas diferidas son realmente efectivas. Esta sería la única forma efectiva de comprobar si esto mejora la experiencia "en laboratorio". ![](https://carlossanchezdonate.com/wp-content/uploads/grabadora-rendimiento.jpg) > Estas funciones para entenderlo son más complejas de explicar en un simple post. Solicítalo para las próximas SEOminadas, pide información para formación SEO en tu empresa, o accede a nuestro máster de SEO para saber más. ## Lighthouse Esta herramienta te permite encontrar formas de mejorar la velocidad en tu web. Es más completa que la de Google Insights y además te permite hacerlo en proyectos en desarrollo o la versión local. ![Lighthouse en una web en desarrollo](https://carlossanchezdonate.com/wp-content/uploads/test-devtools-lighthouse.jpg) ## Otras funciones interesantes Hay funciones que están menos a la vista, pero que nos pueden ayudar en nuestro trabajo. ### Deshabilitar JavaScript Si hacemos ctrl + Shift + p y ponemos JavaScript, podemos deshabilitarlo y comprobar como se comporta la página sin cargar el js de la web. ### Capturas de pantalla Puedes hacer una [captura de pantalla](https://carlossanchezdonate.com/curiosidades/screenshots-devtools/) de toda la página sin necesidad de usar ninguna extensión. ## Bibliografía - También conocida por mi como "la infumable", la [documentación oficial de Chrome](https://developer.chrome.com/docs/devtools/overview). - Las valiosísimas publicaciones de [Addy Osmani](https://addyosmani.com/) , líder del equipo de ingenieros de Chrome, a quien te recomiendo seguir. Si te gusta este artículo, me ayudarías un montón compartiendo mi contenido: Compartir: [![Compartir en LinkedIn](https://carlossanchezdonate.com/wp-content/themes/sanchezdonate/images/rrss/linkedin.svg)](https://www.linkedin.com/cws/share/?url=https://carlossanchezdonate.com/articulo/devtools-para-seo/) [![Compartir en Twitter](https://carlossanchezdonate.com/wp-content/themes/sanchezdonate/images/rrss/tw.svg)](https://twitter.com/intent/tweet?url=https://carlossanchezdonate.com/articulo/devtools-para-seo/) [![Compartir en Facebook](https://carlossanchezdonate.com/wp-content/themes/sanchezdonate/images/rrss/facebook.svg)](https://www.facebook.com/sharer/sharer.php?u=https://carlossanchezdonate.com/articulo/devtools-para-seo/) [![Compartir en WhatsApp](https://carlossanchezdonate.com/wp-content/themes/sanchezdonate/images/rrss/whatsapp.svg)](whatsapp://send?text=https://carlossanchezdonate.com/articulo/devtools-para-seo/) [![Compartir en Telegram](https://carlossanchezdonate.com/wp-content/themes/sanchezdonate/images/rrss/tlg.svg)](https://telegram.me/share/url?url=https://carlossanchezdonate.com/articulo/devtools-para-seo/) No se te da mal el SEO Técnico Te falta mi máster**. Accede a una formación avanzada que te permitirá aplicar e implementar SEO en cualquier tipo de WEB [¡Accede al Máster de SEO Técnico!](/master-seo-tecnico/) Tal vez te interesen otros artículos: [Artículos de SEO](/seo-avanzado/) [CDN – Content Delivery Network para SEO](https://carlossanchezdonate.com/articulo/cdn/) [Sitemaps](https://carlossanchezdonate.com/articulo/sitemaps/) [Curación de enlaces en el SEO](https://carlossanchezdonate.com/articulo/curacion-de-enlaces-en-el-seo/) [Texto alternativo para imágenes](https://carlossanchezdonate.com/articulo/alt-imagenes/) [Rich Snippets con HTML](https://carlossanchezdonate.com/articulo/rich-snippets-sin-datos-estructurados/)