Updating file using Developers tool/Firebug

Question

Is there a way through which I can save the changes made in the Chrome Developers Tool or Firebug directly to the file?? Assuming I've read/write access to that file.

Or, is there any development tool(s) which can update the changes in a similar way (or similar UI)??

Answer 1

Yes, in Firefox, if you also use the excellent Web Developer add-on...

Using that add-on, select View Source -> View Generated Source.
This will open the current state of the HTML "file"¹ as modified by JS and by any hand edits you made in Firebug.

From the window that pops up, you can "save-as" the file, or copy-and-paste as desired.

Note that this generated file will have a slew of Firebug styles (easily identified) and may have style attributes set on elements by JS.

¹ Unfortunately, it doesn't capture changes to CSS or JS files that are linked in.
For this reason when tweaking with Firebug, I like to change CSS and JS by appending style rules and code to the HTML "file".
Once the page looks/acts close to what is desired, the changes are snapshotted via View Generated Source, and then merged into the linked-in files as necessary.

Answer 2

In the Chrome Dev Tools, it's possible to save changed CSS and JavaScript files from the Sources panel, and see what changes (diffs) have been made to those files.

For example:

1. Open a JavaScript or CSS file in the Sources panel.

2. Click in the source.

3. Make changes.

4. Press Command-S or Ctrl-S to save changes.

5. Right click on the source code (or in the Sources panel sources tree) and select Local modifications to view versioning.

6. Right-click, select Save As..., and choose a location on disk to save the file. Subsequent saves will save to this location.

Answer 3

There's a Java project for Eclipse/Chrome:

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

It is a JavaScript debugger only (you do not see CSS or network etc), but you can set up your Eclipse project so that debug and edit the same files, (plus live editing). Setting up source files are a bit tricky in the current version

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

(next version hopefully is easier).

Together with JSDT or Aptana or other JavaScript support you can have a nice IDE+debugger for Chrome.

Answer 4

No. The code you're editing is the rendered client side code. There is no way to impact the server side code through the browser. In any case, the semantics of such an operation really break down if the underlying file(s) on the server side is/are non-static.