--- title: "Capturas de pantalla con la consola de chrome - Carlos Sánchez" description: "Consigue una imagen de tu web sin extensiones" author: "Carlos Sánchez" url: https://carlossanchezdonate.com/curiosidades/screenshots-devtools/ image: https://carlossanchezdonate.com/wp-content/uploads/tb-screenshot-devtools.jpg --- # Tomar capturas de pantalla con Google DevTool Realizar capturas de una web de forma eficiente ![Tomar capturas de pantalla con Google DevTool](https://carlossanchezdonate.com/wp-content/uploads/cover-screenshot-devtools.jpg) **Autor:** : [Carlos Sánchez](https://carlossanchezdonate.com/sobre-mi/) **Fecha de publicación:** : 2024-02-22 **Última revisión:** : 2026-01-30 **Índice** mostrar 1 Abrir la consola de Chrome 1.1 Windows 1.2 Mac 2 Ejecutar un comando 3 La captura de pantalla 3.1 Si lo tenemos en español: 3.2 Si lo tenemos en inglés: 4 Los otros tipos de captura que nadie conoce 5 Capturas en mayor resolución con DPR 6 El problema de los headers sticky 7 Capturas mobile perfectas 8 Resumen de atajos Ya que de momento estoy viendo bastante aceptación en la [encuesta sobre la clase de **DevTools de Chrome**](https://www.linkedin.com/posts/carlos-sanchez-donate_tengo-una-duda-que-me-ha-surgido-hoy-gracias-activity-7166495720617754624--Tvt), antes de plantearla, que creo que tengo algo guay y de valor para daros, vamos a comenzar con pinceladas y atajos. Si aprendéis a [utilizar bien la DevTools o consola de Chrome](https://carlossanchezdonate.com/articulo/devtools-para-seo/), os daréis cuenta que no os hacen falta la mitad de extensiones. Hoy os voy a mostrar un truquito sencillo pero útil, que es a hacer una captura en alta calidad de toda la página. ## Abrir la consola de Chrome ![Inspeccionar elementos en chrome](https://carlossanchezdonate.com/wp-content/uploads/inspeccionar-elemento.jpg) ### Windows Haciendo clic derecho y dándole a la opción de inspeccionar. También puedes hacer el atajo de teclado: `Ctrl+Shift+I` (Control, más la mayúscula más la letra i). ### Mac Si eres una persona especial que usa Mac, recuerda estar en Chrome, el atajo es: `⌘+Option+I` ## Ejecutar un comando ![Ejecutar comando devtools](https://carlossanchezdonate.com/wp-content/uploads/ejecutar-comando-devtools.jpg) Para eso podemos ir a los 3 puntos verticales de arriba a la derecha y darle a ejecutar comando. Si lo quieres con atajo de teclado: `Ctrl+Shift+P` Entiendo que en Mac es: `⌘+Shift+P` ## La captura de pantalla ![capturar pantalla con devtools](https://carlossanchezdonate.com/wp-content/uploads/captura-pantalla-devtools.jpg) ### Si lo tenemos en español: Escribimos captura y le damos a la opción **"Tomar una captura de pantalla de tamaño original"**. ### Si lo tenemos en inglés: **"Capture full size screenshot"** [Se descargará una imagen png de la web en vertical con más calidad que mi contenido](https://drive.google.com/file/d/18RrorFQku1BiHqqdPaETzr0o7We_BVvI/view?usp=sharing). Puedes ajustar el tamaño del dispositivo con la propia consola. ** PD: Si tu web tiene implementado algún tipo de "lazy loading", te recomiendo hacer Scroll y cargar todos los elementos. Pues solo hará una captura de los elementos cargados. ## Los otros tipos de captura que nadie conoce Cuando escribes "screenshot" o "captura" en el menú de comandos, te aparecen más opciones además de la captura completa: - Capture screenshot / Tomar captura de pantalla: Solo captura lo que ves en el viewport en ese momento. Útil para capturas rápidas sin scroll. - Capture node screenshot / Tomar captura de pantalla del nodo: Esta es oro. Seleccionas un elemento en el inspector (un div, una sección, un componente) y te captura solo ese elemento con fondo transparente. Perfecto para documentar componentes o para enviar capturas limpias a clientes. - Capture area screenshot / Tomar captura de pantalla del área: Te deja seleccionar manualmente un área rectangular. Como el recorte de Windows pero integrado. La de "node screenshot" es la que más uso. Cuando un cliente me pide "pásame captura de ese bloque", no tengo que recortar nada. ## Capturas en mayor resolución con DPR Si necesitas capturas más nítidas (para presentaciones, informes o impresión), hay un truco que poca gente conoce: modificar el Device Pixel Ratio antes de capturar. 1. Activa el modo responsive (el icono de móvil/tablet o `Ctrl+Shift+M`). 2. En la barra superior del modo responsive, haz clic en los tres puntos. 3. Selecciona "Add device pixel ratio" o "Añadir proporción de píxeles del dispositivo". 4. Cámbialo a 2 o 3. Ahora cuando hagas la captura, será al doble o triple de resolución. Un DPR de 3 en una pantalla de 1920px te dará una imagen de 5760px de ancho. Eso sí, el archivo pesará bastante más. ## El problema de los headers sticky Si alguna vez has hecho una captura completa de una web con menú fijo (sticky o fixed), habrás visto que el header se repite a lo largo de toda la imagen. Es un poco desastre visual. La solución rápida: antes de hacer la captura, localiza el elemento del header en el inspector, y en los estilos añade temporalmente: `position: relative !important;` O directamente: `display: none !important;` Haces la captura y luego deshaces el cambio (o simplemente recarga la página). También puedes hacer esto con cualquier elemento molesto: popups de cookies, banners, chat widgets... ## Capturas mobile perfectas Para capturas de la versión móvil, no hace falta reducir la ventana del navegador a ojo. Usa el modo responsive: 1. Abre DevTools. 2. Haz clic en el icono de dispositivos (móvil/tablet) o `Ctrl+Shift+M`. 3. Selecciona un dispositivo concreto (iPhone 14, Pixel 7, o el que necesites) o pon dimensiones personalizadas. 4. Ejecuta la captura como hemos visto antes. La captura saldrá exactamente con las dimensiones del dispositivo seleccionado. Muy útil para documentar cómo se ve la web en diferentes dispositivos sin tener que usar el móvil físico. ## Resumen de atajos Para que lo tengas a mano: - Abrir DevTools: `Ctrl+Shift+I` (Win) / `⌘+Option+I` (Mac) - Menú de comandos: `Ctrl+Shift+P` (Win) / `⌘+Shift+P` (Mac) - Modo responsive: `Ctrl+Shift+M` (Win) / `⌘+Shift+M` (Mac) Y ya solo tienes que escribir "screenshot" o "captura" para ver todas las opciones disponibles. 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/curiosidades/screenshots-devtools/) [![Compartir en Twitter](https://carlossanchezdonate.com/wp-content/themes/sanchezdonate/images/rrss/tw.svg)](https://twitter.com/intent/tweet?url=https://carlossanchezdonate.com/curiosidades/screenshots-devtools/) [![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/curiosidades/screenshots-devtools/) [![Compartir en WhatsApp](https://carlossanchezdonate.com/wp-content/themes/sanchezdonate/images/rrss/whatsapp.svg)](whatsapp://send?text=https://carlossanchezdonate.com/curiosidades/screenshots-devtools/) [![Compartir en Telegram](https://carlossanchezdonate.com/wp-content/themes/sanchezdonate/images/rrss/tlg.svg)](https://telegram.me/share/url?url=https://carlossanchezdonate.com/curiosidades/screenshots-devtools/) 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/) [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/) Más curiosidades que te pueden interesar [¿Se debe redirigir al usuario por IP dependiendo del país?](https://carlossanchezdonate.com/curiosidades/se-debe-redirigir-al-usuario-por-ip-dependiendo-del-pais/) [Solucionar hack páginas en chino o japonés](https://carlossanchezdonate.com/curiosidades/desindexar-paginas-chino-japones/) [Cuando debe trabajarse el SEO en un proyecto](https://carlossanchezdonate.com/curiosidades/seo-trabajar-proyecto-momento/)