There are thousands of plugins out there for web explorers such as Firefox, Chrome etc. These plugins stretch the definitions of a web browser from a simple web-surfing to a powerful multi-functional software that offers more than just browsing. The browser is the home of a web developer. Or rather, his office. It is where he works. Now who wouldn’t like to tweak his office for his comfort and to do other useful stuff? Browser plugins let you do just that. Here is a collection of the most popular browser extensions used by web developers. So if you are a relatively new web developer, you might want to try these out.
Firebug
Firebug, quite simply, is the best plugin ever made. Basically, it lets you edit your webpages right from your browser. It inspects code and looks for errors, and gives you an insight on what’s actually going on under the hood. It inspects the code by presenting HTML and CSS codes in two side-by-side windows. You can make live changes to that code to edit your webpage. You can turn off certain styles, turn them back on, and add more styles.
The great thing about editing is, you can do it live on the page, and see the effects take place. No need to save and reload files. Not only that, Firebug also helps with debugging. For example, if you are writing a JavaScript code for changing background colors, it will show you what’s happening to the CSS code in real time. It will also show you JavaScript errors. When you click on an Ajax link, it reads out what the action is and gives you the response in an HTTP format so you can see what the headers were and what’s happening behind the scenes.
This is a pretty amazing tool, and every web-developer must have it. It is available for almost all the popular browsers. And it’s totally free!
Google Chrome Developer Tools
This is Google’s answer to Firebug. Firebug was originally designed for Firefox. So Google came up with this for Chrome. The good part is, you don’t need to download any extension. This tool has been built right into Chrome.
This tool is great with editing. It has all the features Firebug offers, including live editing so you won’t have to save your file. The inspecting is great as well. When you hover over an element, its code gets hi-lighted, so you can quickly find where a div is. Not only that, this plugin tells you the destinations for resource files, which is not something Firebug does, but is really handy. Of course, there is a lot more to it than just this. And if you are a Chrome user, you must try this out.
Try it now! It’s free!
YSlow
Website load time is a crucial factor when it comes to website rankings. Search bots don’t like it when websites takes long to respond, which is why it is very important that you speed up your website. Luckily, you don’t need to consult a professional for this. YSlow by Yahoo! is here to help!
This plugin checks your website’s front-end performance with respect to the major best practices, and rates your website in each individual category. You get grades from A to F according to how your website performed in each category.
YSlow also lets you make a detailed inspection of things that are essential for speeding up a website. The Stats view tells you the size of the webpage, and a list of requests that were made during the load process, along with details. The Components view outlines each component of a Web page in a tabular format, and allows you to inspect it to see attributes such as size, expiration date, whether it uses server-side compression, response time etc.
After analyzing your website, this tool gives you tips and recommendations on how to improve score for a particular category. It will tell you what images are not optimized, what files need to be zipped, and so on. This is very good tool, and every webmaster should have it.
There is one limitation though. You might need to have Firebug installed before you can use this tool.
Now those were my top three browser add-ons. Now I admit I am no hardcore web-developer. I am just a learner. But even so, I have found tese tools to be really helpful. They can save you a lot of time and effort, which is why they are on my top 3 list. If you have better suggestions, let’s hear them! Peace 🙂