Modern browsers have long moved from the category of simple observers to full working environments that contain many important tools for every web developer. In my opinion, Google Chrome is the leading and the most promising web browser, since it’s quite fast and provides a lot of features. However, its functionality can be expanded even more by installing special plug-ins.
We’ve conducted a local survey among DesignContest and Vardot professionals, and it showed that about 75% of the staff uses Google Chrome for daily purposes, and almost everyone has additional extensions in it. In my previous article, we’ve made a list of best Google extensions for web designers, and today we are going to talk about the most popular and helpful extensions for web developers (this doesn’t exclude the fact that an extension may be used by both categories of professionals).
Internet Explorer is unpopular among developers since it’s the source of endless problems. However, many people ignore this fact and prefer this browser. At the moment, IE is still among the leaders.
IE Tab runs the Internet Explorer engine directly in Google Chrome user interface, allowing the developer to quickly browse and find out shortcomings in the layout of the website. Also, sometimes there is the reverse situation when the site is displayed properly into Internet Explorer but has some problems in Mozilla Firefox or Google Chrome (it mainly refers to the old sites). For such websites, IE Tab provides a mode of an automatic download of your site immediately into Internet Explorer, avoiding downloading into Chrome.
Eye Dropper is an extension that allows you to find the color of any element on the page. By clicking with a "pipette" on an item, you receive information about the color in RGB and HTML-Code.
In fact, this extension is the analog of Eyedropper Tool in Adobe Photoshop. Eyedropper allows you to check a CSS-file for a particular color; another convenient feature is that you can open the graphical layout of the website in the next tab and quickly makeup CSS using Eye Dropper.
With this extension, you can test the website display on screens with different resolutions. The emulation is performed by selecting one of the predefined resolutions. Window Resizer allows you to choose any of the most common resolutions, from PC and notebook to mobile devices.
After you install it, you’ll get an additional toolbar, which can be used to carry out a fast analysis of the basic indicators of the website: indexed pages in major search engines, PR, etc.
Firebug Lite is a great tool for web developers, which is integrated into the browser and provides advanced features for editing and debugging the code of any web page. By default, Firebug is disabled and displayed in gray on the panel, but once you activate it, you see the piece of code that corresponds to the website element you clicked on. You can edit it and view changes in a real time.
The extension analyzes any website you visit and detects which web technologies you are using, down to integrated services such as FeedBurner counter and Twitter widget. If the site is on WordPress, the application can even display the names of the main plug-ins used.
It’s designed for viewing CSS-properties that are assigned to a particular page element. To use it, just turn it on by a simple click on the icon and then place the cursor on any page element that you want to check.
A quite useful extension for those who want to view scaled images without going to a separate page: just hover your mouse over the image and you’ll get it enlarged to the full size (it will fit the browser window).
This plug-in allows you to measure the distance and size (in pixels) of any element on the page. Some users have reported that you need to restart the browser to make the extension work.
This extension allow you to customize what and how much of your data you want to clear on the options page, including: App Cache, Cache, Cookies, Downloads, File Systems, Form Data, History, Indexed DB, Local Storage, Plugin Data, Passwords and WebSQL.
It’s a very useful extension for filing POST, PUT, GET, DELETE queries, making requests to RestFul services, getting responses from the server, and much more. You can save requests on Google Drive and resend it when needed.
Some web pages are so large (for example, long-scroll pages) that you need to scroll a dozen times to get to the very bottom. Minimap provides the ability to view such pages as thumbnail images; that is you see a conveniently scaled webpage and can quickly assess where you are and how to move to the right place.
One of the main Google Chrome’s problems is its excessive use of system resources. The Great Suspender helps to solve this problem: after a certain time period, it disables all unused tabs, thus saving RAM and battery charge.
ARC Welder is an extension that can launch your favorite Android apps in Google Chrome. If you have not found a decent desktop alternative of your favorite Android mobile apps, please welcome to use ARC Welder, an excellent solution for this problem.
It’s one of the most effective extensions for those who’re used to work with text all day long. In ordinary life, we’re accustomed to highlighting the most important moments with a yellow marker. On the Internet, Highly is a great alternative. Just create a short summary of the text and save it or share with friends/co-workers!
Taco is task manager that combines your tasks from services such as Highrise, Google Gmail, Google Tasks, GitHub Issues, Exchange, Evernote, Bugzilla, Codebase, Bitbucket, Asana, Basecamp, and some others into a single interface. It turned out well and, what’s more important, is very beautiful and user-friendly.
Better Search is an extension for Google Chrome for faster and easier search on Google. At the same time, it allows using existing possibilities of search engines more effectively, as well as adds a number of its own unique features.
As you can see, even the extensions listed above are enough to significantly simplify the web developer’s routine and save his or her time. The most important is that all these features will be integrated into the browser, and therefore you don’t need to install any additional software.
- Design & User Experience