¿Cómo modificar una página web con F12?

¿Cómo modificar una página web con F12?

Editar el sitio web actual lesezeichen

Este artículo ha sido redactado por Mitch Harris. Mitch Harris es un experto en tecnología de consumo con sede en el área de la bahía de San Francisco. Mitch dirige su propia empresa de consultoría informática llamada Mitch the Geek, que ayuda a particulares y empresas con la tecnología de la oficina en casa, la seguridad de los datos, el soporte remoto y el cumplimiento de la ciberseguridad. Mitch es licenciado en Psicología, Inglés y Física y se graduó con honores en la Universidad del Norte de Arizona.

Cualquier bromista puede ver el potencial de ser capaz de cambiar temporalmente la forma en que un sitio web aparece en su ordenador, y hay un montón de aplicaciones prácticas de ser capaz de ajustar la forma en que un sitio web aparece a usted también[1].

Este artículo ha sido redactado por Mitch Harris. Mitch Harris es un experto en tecnología de consumo con sede en el área de la bahía de San Francisco. Mitch dirige su propia empresa de consultoría informática llamada Mitch the Geek, que ayuda a particulares y empresas con la tecnología de la oficina en casa, la seguridad de los datos, el soporte remoto y el cumplimiento de la ciberseguridad. Mitch es licenciado en Psicología, Inglés y Física y se graduó con honores en la Universidad del Norte de Arizona. Este artículo ha sido visto 321.150 veces.

Editar html en chrome

Sin embargo, es posible abrir y editar los archivos fuente directamente en Chrome. Cualquier cambio que hagas se guarda en el sistema de archivos y se actualiza dentro del editor (suponiendo que se actualiza cuando se producen cambios en el archivo).

Abre Chrome, carga una página desde tu sistema de archivos/servidor local y abre Herramientas de desarrollo desde el menú Más herramientas o pulsa F12 o Ctrl/Cmd + Shift + I dependiendo de tu sistema. Ve a la pestaña Fuentes para examinar el explorador de archivos:

Haz clic en la pestaña Sistema de archivos y, a continuación, haz clic en + Añadir carpeta al espacio de trabajo. Se te pedirá que localices tu carpeta de trabajo y Chrome te pedirá que confirmes que permites el acceso. El explorador muestra los archivos de tu sistema que se pueden abrir con un solo clic:

Manipulador de páginas

¿Existe un plugin para Chrome o alguna otra forma de cambiar el medio de visualización dentro del propio Chrome, para ver una página como lo haría una impresora? Supongo que no tiene que ser una solución específica de Chrome, pero es mi navegador principal, así que sería bueno tener una solución en el navegador.

Ahora mismo estoy centrado sólo en el medio de vista previa de impresión, pero sería ideal poder cambiar a cualquiera de los tipos de medios soportados (es decir, todos/braille/en relieve/manual/impresión/proyección/pantalla/voz/tty/tv).

De acuerdo con las respuestas anteriores, el ajuste podría encontrarse en la pestaña “Emulación”. Como se muestra en las imágenes de abajo, ahora se ha trasladado a la pestaña “Renderización”, que se puede sacar haciendo clic en los tres puntos a la izquierda de la pestaña “Consola”.

En Chrome v51 en un Mac, encontré la configuración de renderizado haciendo clic en la esquina superior derecha, eligiendo Más herramientas > Configuración de renderizado y marcando el botón Emular medios en las opciones ofrecidas en la parte inferior de la ventana.

Editar el sitio web actual

Chrome DevTools es un potente conjunto de herramientas de desarrollo web integradas en el navegador Chrome. Una de las características más útiles de DevTools para los desarrolladores web es la capacidad de editar en vivo el HTML y CSS de una página. Esta funcionalidad permite a cualquier desarrollador, incluso a los que tienen menos conocimientos de HTML y CSS, crear rápidamente un prototipo e iterar sobre posibles cambios en una página web.

Hay dos formas rápidas de abrir el inspector. La primera es abrir DevTools con F12, seleccionar la pestaña “Elementos” y hacer clic en el icono del cursor en la parte superior izquierda. La segunda forma, más rápida, es utilizar el atajo de teclado Ctrl+Mayús+C. Si trabajas habitualmente en un entorno Linux, es muy probable que hayas utilizado este atajo por accidente muchas veces cuando querías copiar un texto.

Una vez seleccionado un elemento, puedes interactuar con él de muchas maneras. Si haces clic con el botón derecho del ratón sobre el HTML en la pestaña “Elementos” y seleccionas “Editar como HTML”, podrás realizar ediciones en vivo en el marcado de una página web que Chrome renderizará inmediatamente una vez que hayas terminado de editar.

Esta web utiliza cookies propias para su correcto funcionamiento. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad