DevTools del navegador
Qué son las DevTools del navegador, cómo usarlas para capturas y pruebas responsivas, y sus funciones comunes.
Las DevTools del navegador son las herramientas para desarrolladores integradas en los navegadores web: Chrome DevTools, Firefox Developer Tools y Safari Web Inspector. Muestran la estructura y los estilos de la página, registran la salida de JavaScript, graban las solicitudes de red y analizan el rendimiento.
La mayoría de las DevTools incluyen emulación de dispositivos. Ajustan el ancho y la altura de la ventana gráfica, la relación de píxeles del dispositivo y la cadena de user agent, de modo que un navegador de escritorio muestra la página como lo haría un teléfono. La emulación no reproduce el motor de navegador, las fuentes ni el comportamiento táctil de un dispositivo real.
En Chrome en un Mac, Option+Command+I abre DevTools. En Safari, hay que activar el menú Develop en Settings antes de que Web Inspector esté disponible.
Qué pueden hacer las DevTools para las capturas
- Capturar la ventana gráfica visible, la página completa con desplazamiento, un área seleccionada o un solo elemento.
- Definir un tamaño de ventana gráfica exacto y una relación de píxeles del dispositivo antes de capturar.
- Ocultar o editar elementos, como un banner de cookies o un widget de chat, antes de la captura.
- Limitar la red para comprobar el aspecto de una página mientras carga.
Modo responsivo y emulación de dispositivos
El modo responsivo, llamado device toolbar en Chrome, ajusta el área de la página a un ancho y una altura elegidos. Hay preajustes para teléfonos y tabletas comunes, y se permiten tamaños personalizados. El ajuste de relación de píxeles del dispositivo controla cuántos píxeles de imagen produce cada píxel CSS. Por eso, una ventana gráfica de 390 píxeles de ancho con relación 3 genera una captura de 1170 píxeles de ancho.
Cómo hacer capturas con DevTools
- Abre DevTools y activa la device toolbar si necesitas un tamaño concreto.
- Abre el Command Menu con Shift+Command+P.
- Escribe "screenshot" y elige el comando de ventana gráfica, tamaño completo, área o nodo.
- El navegador descarga un PNG.
Errores comunes
- Dejar DevTools acoplado dentro de la ventana, lo que reduce la ventana gráfica en una captura normal.
- Olvidar restablecer la emulación, de modo que las capturas posteriores usan tamaño de teléfono.
- Capturar antes de que aparezcan las imágenes de carga diferida.
- Tomar la emulación como prueba de que una página funciona en un dispositivo real.
¿Tomas las mismas capturas una y otra vez?
Website Capture de Temposhot repite la misma captura para una lista de URL en Desktop 1920×1080, Tablet 768×1024 o Mobile 390×844. Consulta la automatización de capturas de sitios web.
Preguntas frecuentes
¿Las DevTools pueden capturar una página completa en una sola imagen?
El comando "Capture full size screenshot" de Chrome renderiza toda la altura de la página. Las páginas muy largas o con carga diferida pueden salir incompletas.
¿Hay una opción más sencilla para una sola página?
La extensión Temposhot Full Page Screenshot para Chrome 116 o superior desplaza la página activa y descarga un PNG.
Fuentes
Recursos relacionados
- Opciones de Website Capture: ajustes de dispositivo, área y espera.
- Automatizar capturas de sitios web sin código: una guía paso a paso.
- Screenshot Resolution Checker: comprueba el tamaño en píxeles de una captura.
¿Repites las mismas capturas de pantalla una y otra vez?
Temposhot captura una pantalla, una ventana o un área con temporizador y exporta el conjunto como PDF, imágenes, ZIP o MP4. Las herramientas gratuitas para navegador solo sirven para imágenes sueltas.
Recursos relacionados
Términos relacionados
- Navegador headlessQué es un navegador headless, cómo se usa para capturas automáticas y los errores habituales.
- Captura de página completaQué es una captura de página completa, en qué se diferencia de las capturas de ventana gráfica y de desplazamiento, y cuándo usarla.
- Captura de ventana gráficaQué es una captura de ventana gráfica, en qué se diferencia de la captura de página completa y cuándo es la opción adecuada.
- Captura responsivaQué son las capturas responsivas, los tamaños de ventana gráfica habituales y los errores que conviene evitar al capturar en varios dispositivos.