Saturday, December 5, 2015

Top Chrome Extensions for Developers

Google Chrome is a powerful web browser and the most used platform by web developers and designers, because of its simplicity, speed and strengths many of us prefer it over many traditional web browsers.

Chrome has a large number of useful extensions for developers and web designers, it's strength and capabilities make it an excellent choice for web development work. Chrome, like Firefox web browser (Mozilla Firefox), has also the ability to increase its functionality and capabilities through the use of extensions, and if you still feel there's something missing, Google extensions comes in to fill in the missing gap. Currently, there are over hundreds of Chrome extensions available for developers, all of them offering plenty of features and time-saving solutions to many of our web development issues and challenges.

Chrome has a robust extension platform featuring lots of useful developer tools (something you're looking for), which developers and web designers can benefit from. I gather and list the best Chrome developer extensions that can provide you a shortcuts on various routine and provide you the right tools that can make your work more efficient, faster and enjoyable. To narrow lists down for you, I decided to select some of the extensions that I regularly do use and deem important, like Web Developer and PHP Console. 

Web Developer- is a toolbar with a full suite of just about everything you need to look into the elements of a certain webpage, its boasts a number of options including analyzing web pages and making edits on the fly, and even testing your web page code. It also offers a variety of tools such as the ability to show hidden elements, populate forms, control browser cache and quickly modify stylesheet, and many more.

Firebug Lite- is a tool for developers, it provides the rich visual representation we are used to see in Firebug when it comes to HTML, DOM and Box Model shading. Firebug Lite provides also some cool features like inspecting HTML elements with your mouse and even live editing webpage CSS properties. In addition, Firebug also allows you to analyze network performance and activity, and edit, debug and monitor HTML, CSS and Javascript in your webpage.

BuiltWith- is a Google Chrome extension with a very straightforward purpose, BuiltWith extension can be a quick way to satisfy your curiosity about web technologies. If you're curious about what were really used to build a website, you can click on the BuiltWith icon to see everything you want to know.

Page Speed Insights- is a Chrome Developer tools extension, it allows you to evaluate the performance of your webpages and provides specific suggestions for improvement. Built by Google, it analyzes all aspects of a page load, including network resources, DOM, and timeline.But unlike other Chrome extensions that take the form of buttons in the toolbar, Page Speed Insights adds a tab to the Chrome DevTools Audits panel.

Responsive Web Design Tester- is probably the most quickest and easiest way to test your website's responsiveness on various mobile devices (smartphones and tablets). The tool uses the correct User-Agent, but it does not render web pages in the same way as the mobile device.

TrackDuck- is a visual feedback tool for developers. TrackDuck extension allows you to capture and comment any part of a website of design file. TrackDuck provides a convenient way to track website feedback, bug reports and manage issues. With TrackDuck, your co-workers or even your clients can highlight bugs and provide feedback directly on a website. In addition, TrackDuck can also be integrate with your favorite project management and collaboration tools- Basecamp, Trello and 15 other project management tools. TrackDuck is a new alternative way to such as tools InVisionapp, BugHerd, Usersnap, Screen Capture and others. 

ClearCache- is a simple but supremely useful extension allows you to clear your cache and browsing data with a single click of a button. ClearCache works "silently," meaning there are no annoying popups or confirmation dialogs to distract you, and it's completely customizable in terms of how much data you want to clear, including app cache, downloads, file systems, form data, history, local storage, passwords and much more. Combine this extension with the Chrome extension Edit This Cookie and you have perfect tool of your for web development.

EditThisCookie- In web development you're going to always messing with cookies, and that where EditThisCookie comes in. EditThisCookie makes dealing with cookies much easier and smoother. It supports deletion, creating, searching for, exporting and importing cookies, and even selecting blocking of cookies. In addition, you can also set maximum expiration dates on cookies making them read-only. Using this extension proves much quicker and easier than going through the Chrome browser settings screen to search for cookies related to a particular site.

SourceKit- is a powerful programmer's text-based editor that works like a native app from within Chrome browser and lets you open, edit and save documents. It can also save files directly to your Dropbox, making a top choice for developers who like to pull up the copy of the file anywhere. With support for a long lists of languages and syntax highlighting, SourceKit could be the tool developers are looking for.

PageEdit- is a powerful Chrome extension, it allows you to quickly edit the markup of any page by transforming Chrome browser into a funct ion-rich WYSIWYG editor.

StyleBot- is a Chrome extension for working with CSS styles. It allows you to manipulate the appearance of any website instantly using custom CSS. StyleBot lets you pick an element and choose any change you want to make- font, color, margins, visibility and many more.

PHP Console- is a Chrome extension that allows you handle PHP errors and exceptions, debug data in notification popups, dump PHP variables, remotely execute PHP code, and other PHP stuffs.

JSONView- is a Chrome extension that allows you to validate and view JavaScript Object Notation (JSON) documents. JSONView validates it using a client-side javascript implementation and makes it easy to navigate by making arrays and object section collapsible. Using this extension, JSON documents will be formatted nicely, making it more readable for developers.

Query Audit- is a Developer tools extension for auditing jQuery, it creates a sidebar in the elements panel containing jquery delegated events, internal and many more. So if you a developer and want something really good in handling jQuery, this is the tool you're looking for.

Google Font Previewer- is a handy Chrome extension that allows you choose a font from the Google Font API directory, and then either apply it to the entire page or a specified CSS selector. It lets you choose a font from the Google Font API directory with some few styling options, and then preview it on the current page to see how it looks. 

Image credit: The Code Project