Although classical web devs have 10 and more years experience in developing Web applications I found that they didn't interact with Browser tools like Firebug or the Chrome Developer tools as much as they probably already should have in the past. Those tools are extremely powerful and can really boost your productivity if used properly.
Although I use Firebug occasionally I have to admit that my main day-to-day tool are the ones provided by Chrome. It is mostly a matter of personal preferences but I find the Chrome Developer tools more appealing for a couple of reasons:
- Chrome's V8 is faster
- Elegant code navigating with the keyboard
- Prettyprint functionality for compressed source code
- Integrated DOM query selectors
- a Chrome extension and
- a local NodeJS server
Starting the server
autosaveon your console should give you this
DevTools Autosave 1.0.0 is running on http://127.0.0.1:9104
file:///urls. This means you have to open your HTML page directly from the file system. Why? Because in this way the url in the browser bar directly maps to the location of the file on the hard disk. Now, that might work in many cases, especially in simple scenarios, but usually you run your app from some webserver that is running locally on your machine, right?
file:///mappings, while the 2nd entry is one I placed there, which basically maps all requests going to the address
http://coding.jmbp.local/(which is my local Apache web server) to the path
/Users/juri/coding/. You need to pay attention to the path endings, however if a save didn't succeed, you'll get a Chrome desktop notification explaining the issue.
Paul Irish - Chrome Developer Evangelist - publishes a lot of great videos about getting more productive with the Devtools.
This article has been re-published by