April 29, 2020

Capturando pantalla desde el inspector

En Safari

Una vez activado el menú de desarrollo y ya tienes la página web que quieres capturar sólo necesitas abrir el inspector de Safari, esto lo puedes hacer de dos formas:

  1. Desde el menú: Desarrollo → Mostrar inspector web
  2. Con atajo de teclado: ⌥⌘I

Cuando el inspector se abre verás las tripas de la web, selecciona la etiqueta que quieres capturar, si quieres hacer la página entera selecciona <html> y luego haz clic derecho sobre ella y verás la opción Capturar pantalla, se verá así:

Esto abrirá la ventana para guardar la captura de pantalla donde quieras.

En Google Chrome

En Chrome funciona muy similar pero con algo extra.

Si ya tienes la página web que quieres capturar, abre el inspector de Chrome de cualquiera de la siguientes dos formas:

  1. Desde el menú: Ver → Opciones para desarrolladores → Inspeccionar elementos
  2. Con atajo de teclado: ⌥⌘C

Cuando el inspector se abre, presiona el atajo de teclado en macOS ⌘⇪P esto te abre una especie de «Spotlight» y ahí escribe Screenshot.

Ahora veras 4 opciones para capturar la pantalla:

  1. Capture area screenshot: Te activa el ratón para que selecciones un área específica dentro del viewport.
  2. Capture full size screenshot: Crea una captura de toda la página.
  3. Capture node screenshot: Crea una captura del elemento/etiqueta que tengas seleccionado.
  4. Capture screenshot: Te captura lo que hay dentro del viewport.