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)??
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”1 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
styleattributes set on elements by JS.1 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.