Modificar pagina web

Editar el acceso directo a la página web

Estoy creando una extensión de Chrome que necesita engancharse a otro script que ya existe en mi página web de destino. Para simplificar, estoy tratando de encontrar el siguiente elemento de la secuencia de comandos existentes en una página y añadir un console.log() a la misma.
He probado varias soluciones pero ninguna parece funcionar. Por ejemplo, he intentado usar un script de contenido para encontrar el script y reemplazar el texto, pero parece ejecutar el script previo al cambio en lugar de mi código modificado.
En primer lugar -espero que alguien con más conocimientos que yo confirme o desacredite esto-, según tengo entendido, el código del script sólo se ejecuta una vez, al cargar la página, a menos que se active por algún evento. Dado que las extensiones de Chrome se activan después de la carga de la página, este script ya se habrá ejecutado, y cualquier cosa que se inserte después no se ejecutará a menos que se active.

Editar página web extensión chrome

La mayoría de los navegadores web vienen con algún tipo de herramienta de desarrollo web incorporada. También puedes añadir extensiones del navegador para inspeccionar el HTML, el CSS y las tecnologías subyacentes de una página web. Consulta la documentación del navegador, así como la documentación de las fuentes de la siguiente lista.
Puedes encontrar más herramientas de desarrollo web “secretas” en un artículo de Andi Smith con consejos sobre cuáles están incorporadas y cómo utilizarlas. Consulta también 15 útiles herramientas de desarrollo web en el navegador de Smashing Magazine.
Para utilizar esta función, puedes copiar el HTML o CSS con el que deseas experimentar y pegarlo en tu página web o en una página de prueba, o puedes guardarlo en tu ordenador junto con la página web para editarlo y experimentar con él allí. O, si se trata de tu propia página web, haz los cambios oportunos y súbela a tu servidor.

Cómo editar un sitio web de forma permanente

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 posibilidad de editar en directo el HTML y el 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 prototipos 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.

Editar la página web en línea

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 los archivos).
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:
Las Herramientas para desarrolladores de Chrome nunca serán un sustituto completo de tu editor favorito, pero pueden ser útiles cuando realices cambios rápidos o trabajes desde otro PC donde tu editor no esté instalado.

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