{"id":71674,"date":"2019-10-09T04:17:04","date_gmt":"2019-10-09T11:17:04","guid":{"rendered":"http:\/\/www.taterboy.com\/blog\/2019\/10\/25-best-google-chrome-extensions-for-designers-and-developers\/"},"modified":"2019-10-09T04:17:04","modified_gmt":"2019-10-09T11:17:04","slug":"25-best-google-chrome-extensions-for-designers-and-developers","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2019\/10\/25-best-google-chrome-extensions-for-designers-and-developers\/","title":{"rendered":"25+ Best Google Chrome Extensions for Designers and Developers"},"content":{"rendered":"

Browser extensions can speed up design workflows, helping you do everything from identifying a font, to pulling a color swatch, to inspecting the code of an element. Google Chrome has edged out all other browsers with the top market share<\/a> among users, on more than 58 percent of all computers. <\/p>\n

And there are plenty of extensions out there to help you optimize the performance of Chrome in your design workflows.<\/p>\n

We compiled an awesome collection of 25 extremely useful Google Chrome Extensions for designers and developers. <\/p>\n

<\/span><\/p>\n

Site Palette<\/h2>\n

<\/a><\/p>\n

\"chrome<\/div>\n

\nSite Palette generates comprehensive palettes that you can share, swatch, and download. The part that makes this extension pretty valuable is that you can pull palette from any website as inspiration for future color combinations. It works with Sketch, Google Art Palette, and Adobe swatches, as well as has a free API. <\/p>\n

CSS-Shack<\/h2>\n

<\/a><\/p>\n

\"chrome<\/div>\n

\nCSS-Shack lets you create layer styles in-browser and export using a single CSS file. It\u2019s great for creating mockups for anything from a full site design to a simple button. <\/p>\n

WhatFont<\/h2>\n

<\/a><\/p>\n

\"chrome<\/div>\n

\nWhatFont answers your burning typography question: What font is on that website? It takes some of the work out of identifying fonts by identifying them when you hover with a mouse. It picks up common services for web fonts. <\/p>\n

Checkbot<\/h2>\n

<\/a><\/p>\n

\"chrome<\/div>\n

\nCheckbot helps you check and fix SEO, speed, and security issues on your website. Use it to scan for broken links, duplicate title, insecure page, invalid HTML, and plenty of other issues that can impact usability. The extension is packed with rules for best practices, maybe even a few things you haven\u2019t thought of. <\/p>\n

PerfectPixel<\/h2>\n

<\/a><\/p>\n

\"chrome<\/div>\n

\nPerfectPixel lets you put a semi-transparent image overlay on developed HTML and perform pixel perfect comparisons. Use it to design with pixel perfect accuracy. <\/p>\n

Page Ruler<\/h2>\n

<\/a><\/p>\n

\"chrome<\/div>\n

\nPage Ruler is a Google Chrome Extension that allows you to draw a ruler and get pixel dimensions and positioning. Use it to measure any element on a website. It\u2019s super easy to use with a drag and drop interface with arrows and guides. <\/p>\n

Muzli 2<\/h2>\n

<\/a><\/p>\n

\"chrome<\/div>\n

\nMuzli 2 is a Chrome extension that will help generate inspiration. It is a showcase of design and UX news from around the web, populating information from more than 120 feeds in one place. <\/p>\n

SVG-Grabber<\/h2>\n

<\/a><\/p>\n

\"chrome<\/div>\n

\nSVG-Grabber lets you preview and \u201cgrab\u201d all of the SVG assets from a website by copying the code. It\u2019s an open source tool that\u2019s super fun to use. <\/p>\n

Loom<\/h2>\n

<\/a><\/p>\n

\"chrome<\/div>\n

\nLoom is a tool that lets you capture your screen, record from the camera, and narrate all at one time. Then you can share with a link. It\u2019s a great way to collaborate on projects with people who aren\u2019t in the same location. <\/p>\n

Window Resizer<\/h2>\n

<\/a><\/p>\n

\"chrome<\/div>\n

\nWindow Resizer lets you resize a browser window to different screen resolutions. Test layouts on different browser resolutions. The resolutions list is completely customizable. Set the window\u2019s width\/height, window\u2019s position, preset icon (phone, tablet, laptop, desktop) and even the option to apply the new dimensions to the entire window or just to the viewport.<\/p>\n

Stylebot<\/h2>\n

<\/a><\/p>\n

\"chrome<\/div>\n

\nStylebot helps you change the appearance of websites instantly with custom CSS. You can preview and install styles or pick and element and choose changes you want to make from the editor. Make adjustments to fonts, colors, margins, visibility, and even write CSS manually. <\/p>\n

Alexa Traffic Rank<\/h2>\n

<\/a><\/p>\n

\"chrome<\/div>\n

\nAlexa Traffic Rank gives you the information you need before linking to other web sources. Get quick and easy access to a site\u2019s Alexa Traffic Rank and sites linking in. See how well reviewed the site is. Learn about how the site is being found through search using Alexa\u2019s search analytics, or see what it looked like in the past using the Wayback Machine.<\/p>\n

ColorZilla<\/h2>\n

<\/a><\/p>\n

\"chrome<\/div>\n

\nColorZilla is a Chrome extension that uses an eyedropper tool to pick up colors from anything on the web. You can adjust colors, preview palettes, and even generate new options. <\/p>\n

Custom Cursor<\/h2>\n

<\/a><\/p>\n

\"chrome<\/div>\n

\nCustom Cursor is one of those extensions that\u2019s totally just for fun. It allows you to change the mouse cursor to almost any design you can imagine, using your images or a premade collection. <\/p>\n

Spectrum<\/h2>\n

<\/a><\/p>\n

\"chrome<\/div>\n

\nSpectrum allows you to test any website and see it from the perspective of people with different types of color vision. It\u2019s a great accessibility tool that can help you make design choices when it comes to color and contrast.<\/p>\n

CSS Scan<\/h2>\n

<\/a><\/p>\n

\"chrome<\/div>\n

\nCSS Scan allows you to check, copy, and edit CSS using a browser extension so you can avoid the \u201cinspect element\u201d tool. The true benefit is that you can hover, click, and copy all the rules of an element in an instant. <\/p>\n

Check My Links<\/h2>\n

<\/a><\/p>\n

\"chrome<\/div>\n

\nCheck My Links crawls to check for broke links on a webpage. It highlights valid and broken links in different colors so you can see what needs work quickly. Then copy all the bad links to your clipboard for easier resolution. <\/p>\n

Google Arts & Culture<\/h2>\n

<\/a><\/p>\n

\"chrome<\/div>\n

\nGoogle Arts & Culture replaces ugly browser windows with each new tab you open in Chrome. You\u2019ll get a daily dose of art with masterpieces and descriptions of the art you see. <\/p>\n

Resolution Test<\/h2>\n

<\/a><\/p>\n

\"chrome<\/div>\n

\nResolution Test is a Chrome extension that allows developers to test web pages in different screen resolutions. Simple, but effective. <\/p>\n

Fontface Ninja<\/h2>\n

<\/a><\/p>\n

\"chrome<\/div>\n

\nFontFace Ninja is a browser extension that let you inspect, try, bookmark and buy fonts found on any website.<\/p>\n

Image Downloader<\/h2>\n

<\/a><\/p>\n

\"chrome<\/div>\n

\nImage Downloader allows you to bulk download images from a web page. You can see images that pages contain and link to and filter by width, height, and URL. Pick images you like and download. <\/p>\n

RescueTime<\/h2>\n

<\/a><\/p>\n

\"chrome<\/div>\n

\nRescueTime is the ultimate productivity extension. Keep track of what you do online all day (if you dare). <\/p>\n

Corporate Ipsum<\/h2>\n

<\/a><\/p>\n

\"chrome<\/div>\n

\nCorporate Ipsum uses a more professional set of filler words for filler (lorem ipsum) text. <\/p>\n

Google Font Previewer<\/h2>\n

<\/a><\/p>\n

\"chrome<\/div>\n

\nGoogle Font Previewer lets you choose a font from the Google Font directory with a few style options, and preview them on the current tab.<\/p>\n

Grammarly<\/h2>\n

<\/a><\/p>\n

\"chrome<\/div>\n

\nGrammarly lets you check spelling and grammar in-browser as you work. Avoid silly mistakes so that all your work \u2013 from emails to mockups \u2013 has a more polished feel. <\/p>\n

What\u2019s Your Favorite Google Chrome Extension?<\/h2>\n

Now that you\u2019ve seen our collection of Google Chrome Extensions for designers and developers, drop us a note<\/a> and let us know what your favorite extensions are. Also, have you tried any of the extensions above? What did you think of them?<\/p>\n

Powered by WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"

Browser extensions can speed up design workflows, helping you do everything from identifying a font, to pulling a color swatch, to inspecting the code of an element. Google Chrome has edged out all other browsers with the top market share among users, on more than 58 percent of all computers. And there are plenty of… Read the full article…<\/a><\/p>\n","protected":false},"author":4,"featured_media":71675,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[371],"tags":[],"class_list":["post-71674","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-experience"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t