30 Chrome extensions that front-end programmers must know

Google Chrome is one of the best browsers available on the web, and has become the dominant browser on the internet since it overtook the Firefox browser in November 2011. Today, I want to share with you some of the most useful Google Chrome extensions that can help you improve your productivity.

Devtools Terminal?—— Browser terminal. What a killer!

livereload--provides Chrome browser integration for official Livereload applications (Mac and Windows) and third parties such as Guard-livereload and Yeoman.

Browserstack local?—— native test app lets you instantly configure and test local/internal servers, and local folders including HTML, CSS, and JavaScript files. Test layouts, workflows, and interactivity across 700+ real desktops and mobile browsers in the security cloud settings on Browserstack.

Jsonview?—— Verify and view the JSON file.

postman--add load to API workflow with Postman! Build, test, and document your APIs faster. More than more than 1 million of developers have invested in Postman's embrace.

Window resizer--The extension can resize the browser window to emulate a variety of different resolutions. Especially useful for web designers and developers who can help test layouts at different browser resolutions.

whatfont--the simplest way to identify fonts on a Web page.

Page ruler--draws a ruler to get like vitamin number and positioning, and measures the elements on any page.

Web Developer Checklist?—— for web developers who want to make sure that they follow best practices, this extension makes it easy to spot your site's problem domain.

Image downloader--Browse and download images on the Web page.

Alexa Traffic Rank?—— Alexa Traffic Rank is the free Chrome extension provided by Alexa Internet, and is the only extension of the Alexa Traffic panel. This Alexa extension can accompany you when you surf the web, provide Alexa data about the websites you visit, and will not disrupt your browsing site.

Eye dropper?—— Eye dropper is an open source extension that lets you choose colors from Web pages, color picker and personal color history.

Firebug Lite?—— Firebug Lite is not a substitute for Firebug or chrome Developer tools. It is a tool that you can use together with these tools. Firebug Lite provides a rich visual representation that we have seen in the Firebug, involving HTML elements, DOM elements, and box model shading. It also provides some cool features, such as checking HTML elements with the mouse and editing CSS properties in real time.

The web Developer?—— added a toolbar button with a variety of web development tools. is the official port of the Firefox web development extension.

Responsive Inspector?——? Responsive inspector is a simple Google Chrome extension that allows you to view media queries for websites you visit. This is useful when developing a responsive network layout because it visually shows what resolution is defined in the CSS style sheet.

Builtwith?—— Use this extension to find out what the site you are visiting is built with.

Corporate Ipsum?—— used as fill text to generate random corporate PR rhetoric.

User-agent Switcher?—— Analog user agent (User-agent) string. With this extension, you can quickly and easily switch between user agent strings. In addition, you can set a specific URL that you want to impersonate each time.

YSlow?—— YSlow Analysis Web page and proposes how to improve performance based on a set of high-performance Web page rules. YSlow pages are graded based on one of three predefined rules or a user-defined rule set. It provides suggestions for improving page performance, summarizes the components of page pages, and displays statistical information about the page.

CSS Shapes Editor?—— use the interactive editor to create and adjust CSS shape values, overlapping selected elements.

Pesticide?—— This extension can insert pesticide CSS into the current page, forming each element to better see where they are on the page.

Responsive web Design Tester?—— test mobile sites on mobile devices. This extension reflects the size of the mobile device and its browser.

palettab--brings awesome colors and fonts to the new tab page! Each time you click on the New tab button, it will give you a bit of freshness.

jquery Audit?—— jquery Audit creates a sidebar in the elements panel that contains jquery's devolution events, internal data, and so on, like active DOM nodes, functions, and objects.

Font changer--changes the fonts on Facebook, Twitter, Google, YouTube, and any other website. Test Google Web fonts™.

HTML5 outliner--generates a navigable page outline with headings and section elements.

Perfectpixel?—— This extension allows developers to overlay a translucent image onto the top of the developed HTML and perform a comparison of each pixel between them.

Selectorgadget?—— Selector Gadget is an open source Chrome extension that allows CSS selectors to easily spawn and discover complex web sites.

stylebot--instantly changes the look of your website.

30 Chrome extensions that front-end programmers must know