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.
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.
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.
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.
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.
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.
Download Link: : Visit Site
Final Words:
Hope these tools helps you in your development process. Happy Coding 
- SAP Managed Tags:
3 Comments
