Skip to Content

In my perspective developing an application on web is similar to entering a war zone. As a soldier, he/she requires right weapons and tactics to survive in the war zone similarly a web developer also requires the right web development tools and knowledge to survive in the browser war zone.

Everyone knows it really a daunting to task to provide aesthetic view and appealing feel to user. Web developers indeed have to cross various hurdles in order to at least get close to achieving the target set by customer. In my opinion getting ready with right tools would be the first and foremost hurdle to cross. Let me share across the Chrome/Firefox Development tools which would make your life easier. Let the countdown begin

1.Web Developer

Web Developer is a Firefox/Chrome extension which adds a large collection of development tools to your browser. The integrated menu and toolbar contain dozens of useful features for both developers and designers alike.

web-developer

Chrome Store: : Visit Store

Mozilla Addon : Visit Addon

2.Firebug

Firebug is a web development tool which allows the developers to inspect HTML and modify style and layout in real-time, use the most advanced JavaScript debugger available for any browser, accurately analyze network usage and performance and many more. If you are using Chrome you can go ahead use there prebuilt developer tools as an alternate option to firebug.

If you are using Chrome Browser my personal choice would be to go with default chrome developer tools as it comes with equivalent or more features than firebug.

firebug

Chrome Store: : Visit Store

Mozilla Addon : Visit Addon

3.MeasureIT

Draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels. Web developer also comes up with ruler but I prefer MeasureIt, it’s all left up to you to choose your preferred choice.

measureit

Chrome Store: : Visit Store

Mozilla Addon : Visit Addon

4.Live Edit

Edit any page live on the go while you are browsing. To get back to the original state simply refresh the page. Another option of editing any page on live would be Tincr Extension.

live-edit

Chrome Store: : Visit Store

Mozilla Addon : Visit Addon

5.Color Zilla

With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. DOM spying features allow getting various information about DOM elements quickly and easily. The powerful CSS gradient generator allows quick and easy creation of beautiful gradients.

colorzilla-for-chrome

Chrome Store: : Visit Store

Mozilla Addon : Visit Addon

6.Texter

Text substitution app Texter saves you countless keystrokes by replacing abbreviations with commonly used phrases you define.

Unlike software-specific text replacement features, Texter runs in the Windows system tray and works in any application you’re typing in. Texter can also set return-to markers for your cursor and insert clipboard contents into your replacement text, in addition to more advanced keyboard macros. Texter really saves a lot of time while coding with ignoring retyping the whole code phrase which is repeated several times.

texter

Download Link: : Visit Site

Final Words:

Hope these tools helps you in your development process. Happy Coding :)

To report this post you need to login first.

3 Comments

You must be Logged on to comment or reply to a post.

Leave a Reply