blog

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.

Related posts

8 Replies to “15 CHROME EXTENSIONS THAT SIMPLIFY WEB DEVELOPMENT
  1. 體驗真正網上 Personal Loan 批核,隨時提款話咁易! TPF 團隊撐您,現金即時到手!自訂還款期,短期周轉首選!立即申請,特快私人貸款。 特快網上批核 | 還款計算機.

    http://wealthlink.hk/

  2. 前額拉皮、抬眉手術、傳統前額拉皮、內視鏡前額拉皮、直接抬前額拉皮、改良式髮際線拉皮、五爪拉皮術、三爪拉皮術、八爪拉皮術、抬頭紋、三角眼等一些相關議題、似是而非或有爭議的事項的披露與討論。

    https://skinac.com/tag/微整形術後護理

  3. Ion Magnum 是一種最新的減脂儀器,可以快速燃燒掉你身體的脂肪 , 讓你不需要做大量的體育鍛煉 , 輕鬆方便的達到專業美體的效果。 效果: 通過將你體內的脂肪轉化成肌肉,輕鬆减掉你的體重和腰圍。25分鐘的理療比健身房幾個小時的運動效果還要好! 副作用/風險: 該設備已在美國食品藥品監督管理局注册,注册分類爲醫療器械I類,I類醫療器械就是指普通人使用安全性非常好且沒有任何風險的器械。 减脂過程: 减脂板會直接固定安放於你身體的目標减肥部位,通過特殊的信號,Ion Magnum會將該部位的脂肪燃燒轉化成肌肉。(注意:該設備與你在其他沙龍中瞭解的肌肉轉化設備是完全不同的。)療程: 要想取得而保持完美的效果,一個療程需要進行10次理療,每3-7天進行一次。維持理療可以每兩周進行一次。

    http://cosmedicbook.com/treatments/info/SPECTRA-1064-激光美白

  4. 誠邀您加盟成為線粒體充電站 – 韻濤集團控股有限公司Naturalia Group Holdings Limited 誠邀您加盟成為線粒體充電站 – 韻濤集團控股有限公司Naturalia Group Holdings Limited

    https://cosmetic.wiki/tag/唇線筆

Leave a Reply