Actualización de archivo con la herramienta de desarrolladores / Firebug

Question

¿Hay alguna forma de guardar los cambios realizados en Chrome Developers Tool o Firebug directamente en el archivo?Suponiendo que tenga acceso de lectura / escritura a ese archivo.

¿O hay alguna herramienta de desarrollo que pueda actualizar los cambios de una manera similar (o una interfaz de usuario similar)?

Answer 1

Sí, en Firefox, si también usa el excelente Web Developer complemento ...

Con ese complemento, seleccione Ver código fuente -> Ver código fuente generado .
Esto abrirá el estado actual del "archivo" HTML ¹ modificado por JS y por las ediciones manuales que haya realizado en Firebug.

Desde la ventana que aparece, puede "guardar como" el archivo o copiar y pegar como desee.

Tenga en cuenta que este archivo generado tendrá una gran cantidad de estilos Firebug (fácilmente identificables) y puede tener atributos style establecidos en elementos por JS.

¹ Lamentablemente, no captura los cambios en los archivos CSS o JS que están vinculados.
Por esta razón, cuando hago ajustes con Firebug, me gusta cambiar CSS y JS agregando reglas de estilo y código al "archivo" HTML.
Una vez que la página se ve / actúa cerca de lo que se desea, los cambios se capturan a través de Ver fuente generada , y luego se combinan en los archivos vinculados según sea necesario.

Answer 2

En Chrome Dev Tools, es posible guardar archivos CSS y JavaScript modificados desde el panel Fuentes y ver qué cambios (diferencias) se han realizado en esos archivos.

Por ejemplo:

1. Abra un archivo JavaScript o CSS en el panel Fuentes.

2. Haga clic en la fuente.

3. Realice cambios.

4. Presione Comando-S o Ctrl-S para guardar los cambios.

5. Haga clic con el botón derecho en el código fuente (o en el árbol de fuentes del panel Fuentes) y seleccione Modificaciones locales para ver el control de versiones.

6. Haga clic con el botón derecho, seleccione Guardar como ... y elija una ubicación en el disco para guardar el archivo.Los guardados posteriores se guardarán en esta ubicación.

Answer 3

Hay un proyecto Java para Eclipse / Chrome:

http://code.google.com/p/chromedevtools/

Es solo un depurador de JavaScript (no ve CSS o red, etc.), pero puede configurar su proyecto Eclipse para depurar y editar los mismos archivos (más edición en vivo). La configuración de los archivos fuente es un poco complicada en la versión actual

http://code.google.com/p/chromedevtools/wiki/FeatureDebugOnRealFiles

(la próxima versión es más fácil con suerte).

Junto con JSDT o Aptana u otro soporte de JavaScript, puede tener un buen depurador IDE + para Chrome.

Answer 4

No.El código que está editando es el código renderizado del lado del cliente.No hay forma de afectar el código del lado del servidor a través del navegador.En cualquier caso, la semántica de dicha operación realmente se rompe si los archivos subyacentes en el lado del servidor no son estáticos.