Developing right from the browser Isn't a new idea. There were a lot of third party tools for this work. Well, things change, our browsers changed too. It's not just your regular web browsing tool now, It's a web making too as well. If you are reading this, then you're probably familiar with Firebug, The tool that changed our workflow dramatically. Well, firbug is already full with a lot of praises for sure, let's talk about something else. Most of you may also be familiar with Chrome Dev toos that comes by default with Google Chrome, or Opera Dragn fly, even maybe IE Developer tools (lol). Mozilla's integrated developer tool, another name in the list had been one of my favourites since long. And finally I've successfully transferred the whole CSS and JavaScript development in the developer tool itself. Keep reading, you may be able to do the same, or if you chose not to, It may improve your workflow a bit.
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 :
JavaScript Scratchpad
JavaScript development is associated with a lot of other things, therefore, it's really tough to develop it off the browser, you probably have used the JavaScript console from the browser, but with scratchpad, save your JavaScript codes as well. Press Shift+F4 to open it.
write a piece of JavaScript and click run, the script will run as if it's at the bottom of you current page. You can debug the code as well.
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.
Workflow tips
As I'm at the end of this post, let's share sometips from my workflow, I generally create a html file with my favourite text editor, then edit CSS styles and JavaScripts with these tools.
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.
