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
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.
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.
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.