Must Have Chrome Extensions for Web Developers

Rantideb Howlader 9th Nov 2017

Google Chrome is one of the the most-used browser, offering a set of Chrome DevTools with built-in web authoring and debugging tools. As a web developer, you may find yourself working in Google Chrome quite often as you work on your websites. Here I am going to share the most popular and helpful extensions for web developers. We included some extensions that is useful for full stack developer plus design oriented web developers.

For Every Web Developer:

• Web Developer: Web Developer extension for Chrome adds a little toolbar with different tools available. Definitely one of the most useful Chrome extensions for developers.
• Wappalyzer: Wappalyzer is a cross-platform utility that uncovers the technologies used on websites. It detects content management systems, ecommerce platforms, web frameworks, server software, analytics tools and many more.
• WhatFont: WhatFont helps you to identify fonts on web pages
• Mobile/Responsive Web Design Tester: Mobile/Responsive Web Design Tester extension allows Web Designers and Developers to test their web pages against common mobile, phablet and tablet devices by emulating the user agent and screen resolution. Excellent for testing responsive web designs. Easily switch between portrait and landscape mode and test multiple mobile device’s at the same time!
• ColorZilla: ColorZilla helps you to generate color code .
• Check My Links: Check My Links a chrome extension check broken links of your site.
• Marmoset: Marmoset will take your code and output snapshots for your demos and mockups. You can also add themes and effects to create images for promo and your online portfolio.
• Edit This Cookie: Edit This Cookie the cookie manager presents your current cookies, their values and what properties are attached to the cookie, all of which can be modified.
  It’s easy to export or import cookies, limit the expiration date of any cookie, or even create a custom cookie — you will find the “Delete All” feature supremely useful, too. Using the extension proves much quicker than going through the Chrome settings screen to search for cookies related to a particular website.
• Web Developer Checklist: Web Developer Checklist allows you check if all of your webpages are following best practice when it comes to SEO, usability, accessibility and performance (page speed). So if, for example, you don’t have an H1 tag on a webpage or if a webpage is missing its meta title or meta description, it will notify you so that you can fix the issue quickly. If you click the ‘more info and help’ link at the bottom of the extension, you will find a more in-depth checklist.
• Chrome Sniffer Plus: Chrome Sniffer Plus is a developer must have tool. This tool is found very useful as it sniffs web framework and javascript libraries run on a browsing website. You can use this tool to sniff javascript libraries, Web API’s, web framework and web server.
• DevTools Autosave: DevTools Autosave a true gem for all web developers out there, DevTools AutoSave allows you to automatically save any changes that you make to a webpage’s CSS and JS via the Chrome Dev Tools environment to its source file. It’s easy to set up and use and it will save you lots of time and stress.
• Instant Wireframe: Instant Wireframe turn any webpage into a wireframe with just one click. This Google Chrome extension helps web developers and designers view webpages, whether local or live on the web, with a wireframe overlay.

For HTML & CSS Developers:

• HTML INSTANT: HTML INSTANT is a real time HTML. It features a split screen. As you type your code on left side of the split screen, you see the results automatically on the right side. HTML Instant not only works with HTML, but it also supports CSS and JavaScript. You can also upload images from your Image Shack, Photobucket, or a random website that’s hosting an image.
• CSSViewer: CSSViewer is a simple CSS property viewer. It provides a floating panel that reports on the identity of the section that the mouse is over, along with its font, text, color, background, box, positioning and effects attributes. CSSViewer provided the basic CSS information you need quickly. Make sure to install this Chrome extension.
• CSS – Shack: CSS – Shack is a web and desktop application, which allows you to create layers styles (just like you would in any other image editing software), and export them into a single CSS file.
• Stylebot: Stylebot helps you manipulate the appearance of any website with custom CSS.
• Code Cola: Code Cola not only does this tool allow you to view the source code of what you’ve been working on, but it also functions as a CSS editor. This means you can edit your webpages’ CSS style on the spot and see the changes instantly.

For PHP Developers:

• PHP Console: PHP Console Handle PHP errors/exceptions, dump PHP vars, execute PHP code remotely .
• PHP Ninja Manual: PHP Ninja manualsuggest you the nearest php code as you type.
• Xdebug helper: Xdebug Helper a must have extension for everyone thats debugging, profiling and tracing PHP code with Xdebug. This extension will help you to enable/disable debugging, profiling and tracing easily, instead of juggling around with POST/GET variables or cookies.
• Laravel TestTools: Laravel TestTools do Laravel integration tests while you surf on your website.

For JavaScript Developers:

• JSONView: JSONView (an unofficial port of the Firefox extension), helps you view JSON documents in the browser.Instead of being forced to download or be rendered as text, the extension presents documents in the browser similar to how XML documents are shown. The document is formatted and highlighted, and arrays and objects can be collapsed and expanded.
• Toggle JavaScript: Toggle JavaScript provides a simple, easy-to-access browser button to enable or disable JavaScript globally. It was built with web developers in mind, but is equally useful for anyone who wants to quickly enable/disable JavaScript without having to dig deep into Chrome’s Settings panel. You can check your own site javascript issue with this.
• Quick Javascript Switcher: Quick Javascript Switcher is a Chrome extension that enable / disable JavaScript on the fly by hostname, and subdomain.
• Custom JavaScript for websites: Custom JavaScript for websites helps you to to inject custom javascript in any website.Your scripts are kept in the local storage and applied across domain URLs.
• Delete All Cookies From JavaScript: Delete All Cookies From JavaScript deletes all cookies (including HTTP only cookies) by either sending a postMessage from any javascript on any page or by clicking the extension action.
• Google Analytics Debugger: Google Analytics Debugger loads the debug version of the Google Analytics Javascript for all sites you browse using Google Chrome. It prints useful information to the Javascript console.These messages include error messages and warnings which can tell you when your analytics tracking code is set up incorrectly.
• Vue.js devtools: Vue.js devtools is extension for debugging Vue.js applications.
• React Developer Tools: React Developer Tools is a Chrome DevTools extension for the open-source React JavaScript library. It allows you to inspect the React component hierarchies in the Chrome Developer Tools.

For Django (Web framework written in python) Developers:

• Django Debug Panel: Django Debug Panel inside WebKit DevTools. Works fine with background AJAX requests and non-HTML responses. Great for single-page applications and other AJAX intensive web applications.You should first install and configure django-debug-panel.
  See : https://github.com/recamshak/chrome-django-panel
• Django Auto Refresh: Django Auto Refresh do auto refreshes the browser page when Django development server reloads itself.

For WordPress Developers:

• Scan WP: Have you ever been on a really great WordPress site and want to know how it was built? What theme they used? What plugins give it such functionality? Well, all you have to do now, is install Scan wp extension and we will detect the WordPress themes and plugins the site you are on uses.
• WPSNIFFER – WordPress Themes Sniffer: WordPress Themes Sniffer detects active WordPress theme being used on current WordPress website and links to the theme, if not found then returns a Google search for “{theme’s name} wordpress them.

Whenever you’ve been developing websites or web apps, these chrome extensions can make a huge difference and keep you from having to switch applications constantly. I will do update this if I find more useful extensions for Web Developers.

WordPress Custom Development Service