Cómo tomar capturas de pantalla en Google Chrome
En este artículo, le mostraremos cómo tomar capturas de pantalla de elementos específicos de la página web o toda la página web utilizando las herramientas de desarrollador de Google Chrome.
Tema de contenido:
- Abrir las herramientas de desarrollador de Google Chrome
- Seleccionar un elemento específico de la página web utilizando las herramientas de desarrollador de Google Chrome
- Tomar capturas de pantalla de los elementos de la página web utilizando las herramientas de desarrollador de Google Chrome
- Tomar capturas de pantalla de la página web completa utilizando las herramientas de desarrollador de Google Chrome
- Conclusión
- Referencias
Abrir las herramientas de desarrollador de Google Chrome
Para abrir las herramientas de desarrollador de Google Chrome, ejecute Google Chrome, visite la página web de la que desea tomar capturas de pantalla y presione + + I.
Si necesita ayuda para abrir las herramientas de desarrollador de Google Chrome, lea el artículo sobre cómo abrir las herramientas de desarrollador de Google Chrome.
Seleccionar un elemento específico de la página web utilizando las herramientas de desarrollador de Google Chrome
Si desea tomar capturas de pantalla de un elemento específico desde la página web utilizando las herramientas de desarrollador de Google Chrome, debe poder seleccionar el elemento del que desea tomar capturas de pantalla desde la página web.
Puede seleccionar un elemento en la página web de la pestaña "Elementos" de las herramientas de desarrollador de Google Chrome.
También puede usar la herramienta "Inspeccionar" de las herramientas de desarrollador de Google Chrome para seleccionar un elemento en la página web.
Para usar la herramienta Inspect, haga clic en
Desde la esquina superior izquierda de las herramientas de desarrollador de Google Chrome.
Seleccione el elemento del que desea tomar una captura de pantalla de la página web. Una vez que se selecciona el elemento, la sección del código HTML también debe seleccionarse automáticamente en la pestaña "Elementos".
Tomar capturas de pantalla de los elementos de la página web utilizando las herramientas de desarrollador de Google Chrome
Para tomar una captura de pantalla del elemento de página web seleccionado, haga clic con el botón derecho (RMB) en el elemento principal HTML seleccionado en la pestaña "Elementos" y haga clic en "Captura de captura de pantalla de nodo".
Se debe tomar y guardar una captura de pantalla del elemento de página web seleccionado en su computadora.
Como puede ver, una captura de pantalla del elemento de página web seleccionado se toma correctamente.
Intentemos tomar una captura de pantalla de otro elemento de página web utilizando las herramientas de desarrollador de Google Chrome.
Seleccione la tabla de contenido en uno de los artículos de Linuxhint, haga clic con el botón derecho (RMB) y haga clic en la "Captura de captura de pantalla del nodo" para tomar una captura de pantalla tal como lo hicimos recientemente.
Ahora se toma y salva una captura de pantalla.
Como puede ver, se toma una captura de pantalla de solo la tabla de contenido.
Tomar capturas de pantalla de la página web completa utilizando las herramientas de desarrollador de Google Chrome
Para tomar una captura de pantalla de la página web completa, navegue hasta la pestaña "Elementos" de las herramientas de desarrollador de Google Chrome. Desplácese hasta el final y seleccione la etiqueta HTML. Esto selecciona toda la página web.
Ahora, haga clic con el botón derecho (RMB) en la etiqueta HTML y haga clic en "Captura de captura de pantalla de nodo".
Se debe tomar y guardar una captura de pantalla de toda la página web en su computadora.
Como puede ver, la captura de pantalla de la página web completa se toma con éxito.
Conclusión
Te mostramos cómo abrir las herramientas de desarrollador de Google Chrome. También le mostramos cómo seleccionar elementos específicos de la página web utilizando la herramienta Inspect de las herramientas de desarrollador de Google Chrome y cómo tomar capturas de pantalla de elementos de página web específicos y la página web completa utilizando las herramientas de desarrollador de Google Chrome.
Referencias:
- https: // desarrollador.cromo.com/blog/new-en-devtools-62/#nodo-screenshots