Why Can't I Save CSS Changes in Firebug

Why can't I save CSS changes in Firebug?

I got here looking exactly for this feature, that is, being able to save edited CSS properties back to the original file (on my local development machine). Unfortunately after searching a lot and not finding anything that suits my needs (OK, there's CSS Updater but you have to register and it's a paid extension...) I gave up on Firefox + Firebug and looked for something similar for Google Chrome. Guess what... I just found this great post that shows a nice way of getting this to work ( built into Chrome - there's no need for additional extensions ):

Change CSS and SAVE on local file system using Chrome Developer Tools

I tried it now and it works great highlighting the changed lines. Just click Save and you're done! :)

Here's a video explaining this and much more: Google I/O 2011: Chrome Dev Tools Reloaded

I hope it helps if it doesn't matter to you changing browser while editing your CSS files. I made the change already for now, but I would really love to have this functionality built into Firebug. :)

---

[Update 1]

Today I just saw this video: Firefox CSS live edit in Sublimetext (work in progress) Looks promising indeed.

[Update 2]

If you happen to be using Visual Studio 2013 with Web Essentials you'll be able to sync CSS automagically as shown in this video:

Web Essentials: Browser tools integration

Export CSS changes from inspector (webkit, firebug, etc)

I have found the answer to this, at least as of Chrome v14.

While in the Elements section, just click on the "filename:linenumber" link next to the CSS rules. The CSS file that shows up will contain all of the modifications.

This place exactly:

save CSS - while browsing, how can I save the css files from inside chrome dev or firebug to local directory

In Chrome Dev-tools: Under the Sources tab, right-click the file and click "Save as"

How do I edit CSS in Chrome like in Firebug for Firefox?

Try StyleBot. It can also save edited CSS.

extension like firebug to actually write on the file system

The closest I've found is XRefresh which actively monitors files for changes, then automatically refreshes Firefox. It feels very similar to editing live with FireBug.

I think an extension like this would be possible, but it would be pretty hard to map DOM changes to a specific stylesheet.

How can I edit javascript in my browser like I can use Firebug to edit CSS/HTML?

The problem with editing JavaScript like you can CSS and HTML is that there is no clean way to propagate the changes. JavaScript can modify the DOM, send Ajax requests, and dynamically modify existing objects and functions at runtime. So, once you have loaded a page with JavaScript, it might be completely different after the JavaScript has run. The browser would have to keep track of every modification your JavaScript code performs so that when you edit the JS, it rolls back the changes to a clean page.

But, you can modify JavaScript dynamically in a few other ways:

• JavaScript injections in the URL bar: javascript: alert (1);
• Via a JavaScript console (there's one built into Firefox, Chrome, and newer versions of IE)
• If you want to modify the JavaScript files as they are served to your browser (i.e. grabbing them in transit and modifying them), then I can't offer much help. I would suggest using a debugging proxy like Fiddler

The first two options are great because you can modify any JavaScript variables and functions currently in scope. However, you won't be able to modify the code and run it with a "just-served" page, like you can with the third option.

Other than that, as far as I know, there is no edit-and-run JavaScript editor in the browser. Hope this helps,

---

Related Topics