before beginning, let's make something clear, most of these features are also available in Chrome Developer tools and firebug as well, but I like fiefox devtool for some reasons, one of them is, user Interface, and it comes with a dark color scheme :D (yay!) .
I'll be talking from my perspective, and the way I work, your workflow may be even more efficient, please do share comments to let me and the readers know.
The Style Editor
There used to be a third party CSS editor with live CSS updates.It's not a new term now a days, many modern editors support live update and you can also have this feature from the browser side or even using tools like Grunt or Gulp whatever way you do it, the feature is pretty cool, and saves a lot of development time, but what if, you could get the same flexibility right in your browser? yes possible,with the style editor, integrated with firefox. press Ctrl+j and then click style editor from the tabs.
The screenshot says it all. the style editor is rich with features like, live editing, syntax highlighting, code hints and many more, the better news is, you won't write a wrong CSS selector again ;)
oh, you can of course save your changes. The trick is to overwrite the original CSS file while saving (you'll have to do it once per session). take a look at the screenshots :
Responsive design view
press Ctrl+M to open up the responsive design view. You can actually see how your website is going to look on mobile devices with smaller screens. you can change the screen size manually, use the presets and even emulate touch gestures.
I also use firebug when I need DOM inspector and style editor side by side.
And for the conclusion:
if you love Chrome or Opera, feel free to use their own Developer tools. You'll find most of these features in it as well. This may not the the best workflow, and your comments can surely help me and the other readers to improve.