Google Chrome has become the world’s most popular browser. Its features are plenty, its themes are beautiful, and its extensions are extensive. As a web developer, it’s important to have the right tools for what you need, and Chrome provides some of the best extensions to enhance your productivity and ultimately save you some time! Here are 5 great Google Chrome extensions every web developer should have.
1. Web Developer
Web Developer by christperderick.com is a powerful multi-purpose tool designed to debug your webpage in every way possible. Originally created for Firefox, it was ported over for Chrome users to enjoy. What can this extension do? Need to find that broken link or image, no problem, Web Developer can do it. Find it tedious filling out a form to test it? Web Developer can auto fill the form for you. Need detailed information about your page’s elements? Web Developer can also provide you with what you seek.
- Here are just some of the many options Web Developer features
- Disable JavaScript and pop-ups to test page rendering
- Browse CSS styling and enable/disable them
- Form manipulation: auto populate fields, manipulate form elements on page
- Images: find broken images, or restructure them
- Resize browser window for responsiveness testing
- Validation tools for HTML, CSS and source code
… and much more!
Installation is simple and through the Chrome Web Store. There’s very little configuration required although you will need to specify multiple screen resolutions if you will be using the tool to test page responsiveness. Think of Web Developer like the Swiss-army knife of web development tools.
2. Wappalyzer
Wappalyzer is a simple yet informative extension that allows you to quickly see the web technologies and platforms of what the current website you are viewing is built on. As a web developer, there are many uses for this little extension. For example, you are tasked to upgrade a particular website but you are unsure of what CMS it is built on or the version of a particular library it is running. Wappalyzer gives you insight at a glance of the web technologies that power that particular site.
It is also handy to check if the site you are developing is loading its libraries correctly. For example, sometimes you are left in the dark wondering if Bootstrap has loaded correctly on your site and the only way to check is to create a test function. Wappalyzer knows what you’re running in real-time so you’ll always know what’s included in your project and what’s not.
Give it a go! It might seem like it does much, but it does save you some time; every second counts!
3. Lightshot
Lightshot is an in-browser screenshot tool designed to well…take screenshots of the page you are viewing. You would mainly use this tool to capture areas of your website project that needs fixing (like bugs or misaligned visual elements) or to provide screenshots of particular elements of the page to the client.
One of the great features of Lightshot is that you can add scribbles, annotations, boxes, arrows and more to the image and also share them to the cloud, social media platform or you can save it locally to your computer or print it, directly from the screenshot. No more having the do everything in Microsoft Paint or Photoshop! You can do everything you need right within the browser window!
4. WhatFont
WhatFont is for when you go “What Font is that?” or “That font looks nice, I wonder what it is?” situations. WhatFont, not only tells you what font your selection is, it also tells you the font family, line height and font weight as well!
By using WhatFont, it can save you some time by showing all the information you need in one little pop-up box, instead of you having to right-click inspecting the element on the page and scrolling through the CSS to find out the font properties.
5. ColorZilla
Initially created for Firefox, ColorZilla has been ported over for the Chrome power users. With ColorZilla you can get a color reading from any point in your browser window, quickly adjust this color and paste it into another program. Think of it like Photoshop’s eyedropper color picker tool but built for the web.
ColorZilla also contains advanced features such as:
- Advanced Color Picker (similar to Photoshop)
- CSS Gradient Generator
- Webpage Color Analyser
- Color History
- Keyboard shortcuts
And that’s it, our list of the top 5 Chrome extensions that every developer should have. There is a plethora of extensions available, some doing very similar things to the 5 above; but Fireworks developers have chosen these as their favourites.