Guardar el DOM/HTML manipulado después de editarlo con Firebug

Question

Supongamos que he activado Firefox con Firebug habilitado en un sitio aleatorio (por ejemplo, slashdot.org). Después de cargar el sitio, empiezo a editar la página usando el panel Firebug > HTML. Hasta ahora todo bien: mis cambios son visibles inmediatamente en Firefox.

Mis preguntas:

• ¿Cómo puedo guardar el árbol DOM editado (representado como HTML)?
• ¿Cómo cargo un archivo DOM tree/HTML previamente manipulado en el "contexto original" de la página (slashdot.org en el ejemplo)? Quiero el contexto original para que todas las entidades de referencia (CSS, imágenes, etc.) se carguen correctamente.

Answer 1

¿Cómo puedo guardar el árbol DOM editado (representado como HTML)?

Firebug no contiene ningún método que se pueda usar para guardar el DOM actual en el archivo. Sin embargo, puede usar Firebug junto con la extensión Web Developer para guardar el DOM en un archivo (representado como HTML).

Después de terminar la manipulación del DOM en Firebug, elija Web Developer (toolbar at the top) > View Source > View Generated Source > Archive > Save Page As....

¿Cómo cargo un archivo DOM tree/HTML previamente manipulado en el "contexto original" de la página (slashdot.org en el ejemplo)? Quiero el contexto original para que todas las entidades de referencia (CSS, imágenes, etc.) se carguen correctamente.

Firebug no contiene ningún método para volver a leer un árbol DOM previamente guardado en el "contexto actual" de la página. Sin embargo, si usamos Firebug junto con la extensión Web Developer, podemos lograr la funcionalidad solicitada.Simplemente abra el HTML previamente guardado en un editor como el Bloc de notas y copie el HTML al tablero de clip. A continuación, elija Web Developer > Miscellaneous > Edit HTML y pegue el HTML. ¡Hecho!

Answer 2

No puede guardar el árbol per se, solo el HTML. Seleccione la etiqueta raíz, haga clic con el botón derecho y seleccione Copy HTML, luego péguelo en un editor de texto y guárdelo en un archivo HTML.

Answer 3

Archivo → Guardar página como ... salvará su margen de beneficio editado como HTML, pero parece que puede ahorrar algo de contenido generado por Firebu así (supongo que es exactamente lo que depende de su versión de Firebug).

Answer 4

Cuando estás en la sección HTML de firebug, hay un botón "Editar" en la barra justo debajo de la barra de herramientas principal de firebug. Al hacer clic en este botón, obtendrá una vista de texto sin formato del HTML (con las ediciones que haya realizado) que podrá copiar en un editor de texto.

Answer 5

Creo que esta es una buena pregunta, en resumen, firebug no está hecho para "mantener" sus ediciones, por lo que sugeriría encontrar un flujo de trabajo en el que nunca esté demasiado "profundo" en una página. Una cosa es guardar el HTML, pero guardar su CSS editado es aún más difícil. Aquí están mis soluciones a sus preguntas:

1. Haga clic en la etiqueta HTML, haga clic en Editar. Copie y pegue en otro archivo de texto.

2. No se puede 'recargar' el HTML manipulado por firebug. Sin embargo, puede copiar el HTML manipulado una vez que esté satisfecho con sus resultados (o infeliz). O guárdelo en su tablero de clip para copiarlo a un archivo de texto y luego, cuando desee volver a utilizarlo, tendrá que volver a copiarlo en la consola de edición de Firebug.

Answer 6

No estoy seguro de lo que quiere decir con "contexto original", pero podría tratar de agregar lo siguiente al encabezado del HTML guardado.

 
<base href="http://slashdot.org/" /> 

Answer 7

Una cosa que puedes intentar es para seleccionar la página web (click derecho, seleccionar todo en el menú emergente) y luego recoger Vista Selección de la fuente. Esto debería mostrarle el código HTML modificado en una ventana de origen que luego puede copiar y guardar en un editor. Puede obtener algunas cosas adicionales agregadas por Firebug que puede eliminar en su editor de texto.

Answer 8

Pruebe cssUpdater, consiste en un complemento de FireFox que escucha los cambios de FireBug css a través de un servidor de socket y le permite sincronizar sus archivos fuente css originales. También debe instalar la aplicación de escritorio.

lo tanto, un flujo de trabajo sería:

1. Editar en FireBug
2. haga clic en Sincronizar en cssUpdater
3. Actualizar su sitio y ver que sus cambios se guardan

Puede probar y uso aquí, http://www.cssupdater.com

Answer 9

Puede configurar un editor externo. Abre Firebug, a la izquierda tienes el icono de Firebug, presiónalo y haz clic en abrir en el editor y luego configura los editores. Funciona con Gedit y Bluefish.

Para configurar gedit: Editor de configuración de FireBug abierta y haga clic en añadir, nombre que GEdit y luego buscar el ejecutable dentro de 'usr/bin' y seleccione o escriba en gedit. Puede probar la configuración antes de guardar.