Modern browsers offer complete working environments that include a multitude of tools for web developers. Google Chrome is definitely at the forefront in this area because it is fast enough and offers a lot of features. Nearly 75% of company employees use Google Chrome according to a survey by web professionals, and these users have added extensions. We have listed the best-performing extensions for web developers.
In this article you will find a list of the most popular and useful extensions for web developers (this does not rule out the fact that any extension can be used by any category of professionals).
IE Tab
Internet Explorer is very unpopular with developers because it is the source of endless problems. Despite this, many internet users ignore this fact and prefer this browser. For the moment, IE is still among the leaders even though the decline is continuous.
The extension IE Tab runs Internet Explorer directly in the Google Chrome user interface, allowing the developer to quickly browse their website and find layout flaws. In addition, sometimes there is the opposite situation where the site displays correctly in Internet Explorer, but has some problems in Mozilla Firefox or Google Chrome (this mainly refers to older sites). For these sites, IE Tab provides an automatic mode to load your site immediately in Internet Explorer, avoiding loading it in Chrome.
Web Developer
The extension Web Developer is especially recommended by our team of developers; it lets you make a multitude of code changes directly in the browser without actually having to modify your site’s source code. Examples: adding temporary CSS, reusable JS scripts, displaying div boundaries and many other uses; we use it to fill out forms in one click to test them… it contains about a hundred features, the most interesting being:
- Disable / enable browser CSS (useful to see whether a bad display is caused by the browser or not)
- Disable / enable inline CSS
- View and track cookies
- Change cookie values
- Disable JavaScript or some JS functions such as alerts and pop-ups
- Resize images
- View image links
- Find broken images
- Reset form fields
- Fill in form fields
- Display hidden inputs
- Resize the page to see it in responsive mode
Eye Dropper
Eye Dropper is an extension that lets you find the color of any element on a page. By clicking an element with a “dropper,” you receive information about the color’s RGB and HTML code.
In fact, this extension is the analog of the “Eye Dropper Tool” in Adobe Photoshop. EyeDropper lets you check a CSS file for a particular color, and there is another handy feature: you can open the website’s graphic layout in the next tab and quickly compose CSS using Eye Dropper.
Window Resizer
With this extension Window Resizer, you can test how a website displays on screens with different resolutions. Emulation is done by selecting one of the predefined resolutions. Window Resizer lets you choose any of the most common resolutions: desktops, laptops, tablets or smartphones.
RDS Bar
After installing it, RDS Bar gives you an extra toolbar that lets you quickly analyze a site’s basic indicators from an SEO point of view: pages indexed in the main search engines, PR, etc.
Firebug Lite
Firebug Lite is an excellent tool for web developers, built into the browser, providing advanced features for editing and debugging the code of any web page. By default, Firebug is disabled and shown in gray, but once you enable it, you see the piece of code that corresponds to the website element you clicked. You can modify it and see the changes in real time.
BuiltWith Technology Profiler
The extension BuiltWith analyzes any website you visit and detects the web technologies used, even built-in services such as the FeedBurner counter or the Twitter widget. If the site is on WordPress, the extension can even display the names of the main plugins used. A very valuable tool.
CSSViewer
This extension CSSViewer, as its name indicates, is designed to display the CSS properties applied to a particular element on a page. To use it, simply activate it by clicking the icon, then place the cursor over any element of the page you want to check.
HoverZoom+
This extension is very useful for those who want to display scaled images without going to a separate page: With HoverZoom+ simply place your mouse over the image and you can enlarge it to actual size (it will fit the browser window).
MeasureIt
This plugin MeasureIt lets you measure the distance and size (in pixels) of any element on a web page. (Some users have reported that you need to restart the browser for the extension to work)
Ripple
Ripple is a tool that displays your web applications on a variety of mobile devices, from iPhone to BlackBerry. Although Ripple was originally created for debugging web applications based on PhoneGap technology, it is now widely used to mimic mobile device screens.
Advanced REST client
Advanced REST client is a very useful extension for filling in POST, PUT, GET and DELETE requests, requests to RESTful services, server responses and much more. You can save requests to Google Drive and send them again when needed.
Minimap
Some web pages are so large (for example, long-scroll pages) that you need to scroll a dozen times to reach the end. Minimap displays pages as thumbnails; that is, you see a web page suitably scaled down, so you can quickly judge where you are and move to the right place.
The Great Suspender
One of Google Chrome’s main problems is its excessive use of system resources. The Great Suspender helps solve this problem: after a certain period of time, it disables all unused tabs, which saves RAM and battery charge. You can also set a whitelist of sites not to suspend, so you won’t have to reload pages you need even after a few hours of inactivity.
ARC Welder
ARC Welder is an extension that lets you run your favorite Android apps in Google Chrome. If you haven’t found a suitable desktop alternative to your favorite Android mobile apps, don’t hesitate to use ARC Welder, an excellent solution to this problem.
Highly
This is one of the most effective extensions for those who are used to working with text throughout the day. In ordinary life, we are used to highlighting the most important passages with a yellow marker. On the Internet, Highly is an excellent alternative. Simply create a short summary of the text and save it or share it with your friends or colleagues!
Taco
Taco is a 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 others into a single interface. It works very well and, most importantly, it is very beautiful and user-friendly.
Marker
The extension Marker, recommended by one of our loyal readers, lets you take screenshots, annotate them and share them with your developer team to make communication and bug reporting easier. A particularly interesting extension for doing good quality control on your projects.
Conclusion
As you can see, the extensions listed above will considerably simplify the routine of the web developer and, above all, save time. The most important thing is that all these features will be integrated directly into the browser and, as a result, you don’t need to install additional software. Moreover, these extensions can follow you on any computer where you sign in.
