7 ms·

One of the most powerful tools in my chest is Firefile (https://addons.mozilla.org/en-US/firefox/addon/firefile/ https://addons.mozilla.org/en-US/firefox/addon/

by tumblen 12y ago

One of the most powerful tools in my chest is Firefile (https://addons.mozilla.org/en-US/firefox/addon/firefile/ https://addons.mozilla.org/en-US/firefox/addon/firefile/). Firefile allows you to edit CSS in firebug and save to your stylsheet right from there. It's incredible how this smooths out my workflow and I can't work without it. Firefile, though, doesn't appear to be in development anymore and it's latest release is broken. (I had to make some manual edits to get it working). Any chance we'll see Firefile's functionality coming to FF Dev Edition?

atom-morgan 12y ago
Would you be able to share your edits?
- deleted 12y ago
  [deleted]
  - kibwen 12y ago
    I think they meant the edits to Firefile itself that got it working with the most recent Firebug.
nnq 12y ago
You know you can do this with the CSS inspector in Chrome, without any extension, right?
- maratd 12y ago
  How?
  - alxndr 12y ago
    Haven't used it in a while, but IIRC in the Sources tab of Chrome's Dev Tools, right-clicking a directory brings up a context menu with an "Add folder to workspace" option, which has you pick a local directory to map to the source directory. Then if you edit a file in the dev tools and command-S, it'll save that file where it appears in the local directory you picked.
    - SchizoDuckie 12y ago
      Not just that, I recently found out that it also auto-saves changes that you make right in the css panel of the DOM inspector. It backs up your original value by commenting it out, but be aware of this when you experiment with this! Fiddling in with css in the inspector will make it persistent!
    - cturhan 12y ago
      And also, it creates a history so you can revert to any version whenever you want.
jimmyhmiller 12y ago
If I'm understanding what you want, this is built in already. https://developer.mozilla.org/en-US/docs/Tools/Style_Editor https://developer.mozilla.org/en-US/docs/Tools/Style_Editor
- Brakenshire 12y ago
  Pretty sure you can. What would be nice would be if the same functionality worked with SASS (and LESS), so you could not only trace back to the original sources using source-map, but also edit the SASS, see the results in the browser, then save the SCSS files. It would require a SASS interpreter built into the browser, not sure if that's practical or realistic. But it would help a lot for when you need to make edits locally and see the results on a remote server.
  - willlma 12y ago
    I use compass to watch the folder where my SCSS files are stored and compile automatically on save. That way I can use mapping to find the relevant SCSS, edit it in the browser, and save it to view the changes. It isn't as convenient as seeing the changes before save, but it's pretty close.
    - sebasmagri 12y ago
      There is even a Hacks article about that https://hacks.mozilla.org/2014/02/live-editing-sass-and-less-in-the-firefox-developer-tools/ https://hacks.mozilla.org/2014/02/live-editing-sass-and-less...

by tumblen 12y ago

atom-morgan 12y ago

Would you be able to share your edits?

deleted 12y ago
[deleted]
- kibwen 12y ago
  I think they meant the edits to Firefile itself that got it working with the most recent Firebug.

nnq 12y ago

You know you can do this with the CSS inspector in Chrome, without any extension, right?

maratd 12y ago
How?
- alxndr 12y ago
  Haven't used it in a while, but IIRC in the Sources tab of Chrome's Dev Tools, right-clicking a directory brings up a context menu with an "Add folder to workspace" option, which has you pick a local directory to map to the source directory. Then if you edit a file in the dev tools and command-S, it'll save that file where it appears in the local directory you picked.
  - SchizoDuckie 12y ago
    Not just that, I recently found out that it also auto-saves changes that you make right in the css panel of the DOM inspector. It backs up your original value by commenting it out, but be aware of this when you experiment with this! Fiddling in with css in the inspector will make it persistent!
  - cturhan 12y ago
    And also, it creates a history so you can revert to any version whenever you want.

jimmyhmiller 12y ago

If I'm understanding what you want, this is built in already. https://developer.mozilla.org/en-US/docs/Tools/Style_Editor https://developer.mozilla.org/en-US/docs/Tools/Style_Editor

Brakenshire 12y ago
Pretty sure you can. What would be nice would be if the same functionality worked with SASS (and LESS), so you could not only trace back to the original sources using source-map, but also edit the SASS, see the results in the browser, then save the SCSS files. It would require a SASS interpreter built into the browser, not sure if that's practical or realistic. But it would help a lot for when you need to make edits locally and see the results on a remote server.
- willlma 12y ago
  I use compass to watch the folder where my SCSS files are stored and compile automatically on save. That way I can use mapping to find the relevant SCSS, edit it in the browser, and save it to view the changes. It isn't as convenient as seeing the changes before save, but it's pretty close.
  - sebasmagri 12y ago
    There is even a Hacks article about that https://hacks.mozilla.org/2014/02/live-editing-sass-and-less-in-the-firefox-developer-tools/ https://hacks.mozilla.org/2014/02/live-editing-sass-and-less...