15 Chrome Extensions That Simplify Web Development

Working as a web developer, you probably spend a lot of  time using your browser of choice. While almost every browser has its own developer tools that allow you to see what’s going on behind the scenes, some of them have plenty of extensions that help you streamline the development process.

In this post, we have rounded up our favorite Chrome extensions for web developers.

1. Web Developer

Web Developer Tools is one of the most useful extensions for any developer. It adds a toolbar to Chrome with various tools that allow you to edit the CSS, display link information, image size, view JavaScript, and much more. The extension is not only available for Chrome, but also for Firefox and Opera as well.

2. Accessibility Web Developer Tools

Millions of people use the Internet, including those with disabilities. Which means ensuring your sites are properly accessible is imperative. This extension offered by Google lets you run an accessibility audit on any web page and add an Accessibility sidebar pane to your Chrome Developer Tools. To use it, click on the Audits tab, select the Accessibility audit, and click Run. If the page violates any rules, they will appear as a list with one or more offending elements on the page.

3. Responsive Design Tester

Use the Responsive Design Tester extension to test how a page responds to different devices. It reflects both the size and the browser of the mobile device, and it comes with presets for various iOS and Android devices. It also works in offline mode which is useful when developing sites locally.

4. Wappalyzer

If you have ever used Built With, you will be familiar with the concept behind Wappalyzer. This extension detects content management systems, eCommerce platforms, web servers, JavaScript frameworks, analytics tools, and much more. On top of that, it is also available as a Firefox extension.

5. PerfectPixel

Thanks to this extension, you can rest assured that the design will perfectly match the resulting code. Simply install the extension, and it will allow you to put a semi-transparent image overlay on top of your web page to compare it against the developed HTML code. Overlays can be separated for each site and are saved between browsing sessions.

6. Refined GitHub

If you’re frustrated by GitHub’s user interface, this extension is a must. It simplifies the default GitHub interface and adds all sorts of extra features such as marking issues and pull requests as unread, linking branch references in pull requests, adding a quick edit button to the readme, adding blame links for parent commits in blame view, and much more.

7. CDN Headers & Cookies

This extension lets you see all HTTP headers and cookies in one place. It’s very lightweight and straightforward and it can also load Akamai response headers. You can add, edit, or delete custom request headers and custom cookies as well as export request headers and cookies into a CSV file.

8. User Agent Switcher

Use this extension to change your user agent to spoof other devices and/or browsers. You can quickly toggle between different common user agent strings or even add your own and trick websites into thinking you are using Internet Explorer, an iPhone, or that you are a Google Bot. This is useful for debugging and testing how your website behaves on various devices.

9. JSON Viewer

An extension for printing JSON and JSONP that you can configure to your liking and it includes features such as collapsible nodes; clickable URLs; a Scratchpad where you can type/paste JSON and format indefinitely using a button or key shortcut; 27 built-in themes, and much more.

10. Check My Links

If you regularly edit pages with lots of links, be sure to include this extension on your list. It can quickly find all the links on a web page, and check each one for you. It highlights valid links in green and the broken ones in red. The extension will also publish full URLs of broken links in the Console log.

11. Usersnap

As a web developer, you collaborate with multiple people on your web projects on a daily basis. This little extension will streamline the collaboration process as it creates screenshots of the current content. You can communicate more efficiently on various issues and share feedback between other developers, customers, and anyone else involved in a web project.

12. IE Tab

IE Tab emulates Internet Explorer by using its rendering engine directly within Chrome and allows you to use ActiveX controls to test your web pages with different versions of IE ranging from IE6 to IE9.

13. DevTools AutoSave

Using developer tools to make changes on the fly for testing purposes and then pasting those changes into your text editor and uploading them to the server can be a pain. Luckily, this extension comes as a life-saver as it allows you to automatically save any changes made to a web page’s CSS and JS via the Chrome DevTools environment to its source file.

14. Chrome MySQL Admin

If you work with databases on a daily basis, consider adding this extension to your workflow. It is a simple MySQL client with all the tools needed to manage your MySQL databases and tables. You can connect to databases and administer them, run queries, create and drop tables, and more within a fast and lightweight interface.

15. Grunt Devtools

This nifty extension extends Chrome’s Developer Tools by adding tools for Grunt with support for background tasks and allowing you to run tasks for multiple projects in a single window.

Brenda Barron is a writer from southern California specializing in business and technology. Read more about what she’s up to on her site Digital Inkwell. More articles by Brenda Stokes Barron
Home CSS Deals DesignBombs HTML HTML5 JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress