There are a bunch free extensions Chrome to make your life easier - we've selected the best.
Chrome DevTools are great, but it's possible to add even more cool features to your browser to make web design and development much easier. We present 32 of our favorite Chrome extensions.
Radically speed up your element styling process with DomFlags, a truly epic extension that lets you create keyboard shortcuts for DOM elements! These are like bookmarks for navigating the DOM and will change the way you work with DevTools.
Here's a fun way to get people talking: Highly Highlighter lets you share snippets of articles online, so you can highlight the most significant parts of what's written.
Booom makes Dribbble better by showing more frames in lists, adding Like and Add to Bucket buttons, autoplaying GIFs, and making scrolling infinite.
This is a powerful Chrome extension that allows you to create a design and then export it as a CSS file for use on your site. It supports layers and contains many of the tools you're used to using in your regular photo editor.
This brilliant extension will take your code and output snapshots for demos and mockups. You can also add themes and effects to create images for your promotional and online portfolios.
As a web developer, you need to test your web pages. Repeating the same steps over and over again can become a tedious process. iMacros is a handy Chrome extension that lets you record your actions and save them, so you only have to do a specific action once. You can then test your pages over and over again, repeating actions with the click of a button, saving valuable time and allowing you to focus on more pressing issues.
Every designer and developer will find this extension invaluable. Font Playground allows you to experiment with local fonts and the entire Google font library on a web page without making any actual changes. The beauty of this extension is that it includes all the different font styles, styles, and text effects so that you can preview the web page before implementing changes.
This Chrome extension is a very useful tool that does exactly what its name says - resizes your browser window to help you create adaptive design site. Choose from a list of popular monitor sizes, or add custom sizes and resolutions yourself for increased accuracy.
If you ever have to work with an image layout with inline text, this extension can save you a little annoyance. Project Naphtha can save you in light world irritation. Thanks to clever OCR tricks, the extension allows you to highlight, copy and paste text from any image and can even translate it for you.
Very useful extension for Google Chrome, allowing developers and designers to identify the fonts used on a web page. So if you come across a weird looking web font that you want to use in one of your future projects, just hover over it and find out, instantly, what font it is.
This tool not only checks how quickly your web pages load, it also tells you if it's slowing them down. Yslow checks your web page against 23 of 34 rules defined by Yahoo's performance team. It is an extremely useful tool for analyzing web pages and suggesting ways to improve their performance.
As a web developer, you may be asking yourself how you lived without this extension. It adds a button to the Chrome toolbar with many useful tools for the web developer. This is the official port of the Web Developer extension for Firefox.
Page Ruler is a great tool for precise measurement elements on any web page and their subsequent processing according to your requirements. Draw a ruler to get the pixel dimensions and placement.
This tool will allow you to check if your web pages are following best practices when it comes to SEO, usability, accessibility and performance (loading speed). So, for example, if your page is missing an H1 tag or has no meta tags, the extension notifies you so you can quickly fix the problem. If you click on the "more details and help" link at the bottom of the extension, you'll find a more in-depth list.
A true gem for all web developers, DevTools Autosave allows you to automatically save any changes made to a web page in CSS and JS through Chrome DevTools. The extension is easy to set up and use, and will also save you a lot of time.
Turn any web page into a wireframe with just one click. This Google Chrome extension helps web developers and designers view web pages, whether local or online, with a wireframe overlay.
The ColorZilla extension is an advanced eyedropper, color picker, gradient generator and other useful color tools to help you with your design - right in your browser window.
It is a multi-platform mobile emulator that can help you test your web applications using different devices and screen resolutions. Ripple Emulator can be used in combination with existing means development to perform debugging, DOM inspection, and automated testing.
If you're a web developer, you've probably heard of Stack Overflow - the go-to place for any development-related problems or questions. If not then you should definitely check it out, the community is thriving and covers a wide range of topics from C# and Java to PHP and jQuery. This fantastic extension adds a search box directly to your browser, allowing you to search Stack Overflow's vast resources.
It can be quite difficult to remember every function, so if you have been in situations where you had to spend hours searching for a certain PHP function on Google, then this extension will definitely catch your attention. PHP Ninja Manual gives you all the PHP-5.5 documentation with examples in eight languages, all from the comfort of your browser.
Designers hate it when they create an amazing design that ends up not matching the coding result. PerfectPixel is actually an ideal extension for web developers looking to develop sites that are design-accurate representations. This easy-to-use extension allows you to overlay a translucent image on top of a web page and perform pixel comparisons to ensure 100% accuracy.
This tool will not only allow you to view the source code you are already working with, but it also functions as a CSS editor where you can edit your web pages and see the changes instantly.
Great tool to view what the site looks like using a variety of user tools such as iPad, iPhone, or Android. This can be very useful if the site has been hacked, and this way you can view how search engines see the pages.
One of the most popular and useful IE emulators. It allows web developers to test web pages in different versions of IE directly in the Chrome browser.
It's easy to use, free online photo editor, which allows you to edit web pages, images and screenshots. But that's not what makes it good. PicMonkey allows you to capture any image and take a screenshot of the entire page with the click of a button. Once you select an image, you can edit it however you want by applying effects to change the exposure.
Color vision deficiency, or color blindness, affects millions of people around the world. This ingenious extension uses a technique that allows you to create images suitable for viewing by people with this disorder.
The extension will help the web developer check the framework libraries, CMS and JavaScript on the site at the moment when you view it. IN address bar, an icon will appear indicating the detected library. This Chrome extension is highly rated and can detect over 100 popular CMS and JS libraries.
Finished your website but forgot to check all the links? No matter how carefully you've followed it, it's possible that you've missed one or two, and going through them all will be quite a chore. With this extension, you can simply leave the site running, and it will read all the links on each page, highlighting the available ones in green and the broken ones in red.
It's just a small extension that displays popular photos from Fickr every time you open the window. Click on a photo to view it on Flickr or click on the username to see more photos from the photographer.
As with the previous extension, in each new tab you will see masterpieces from such great artists as Van Gogh and Monet. If you like the image, click on it and it will take you to the Google Cultural Institute website, which is full of information about the work and its creator.
So, your last bill from your mobile provider for the Internet was hefty? Do not panic. You just need this extension: it reduces the amount of data used when browsing the web. When enabled, Chrome will use Google's servers to compress pages before loading them. There is only one caveat: SSL and incognito mode will not be enabled.
There are a huge number of free extensions for Google browser Chrome that help make your life easier. Here are 20 of the best.
In this article we present the best Google extensions Chrome for different purposes - but each is designed to make your job easier.
Firefox has long been famous for its customization and many extensions, but Google Chrome has also gained a lot of popularity among web designers and developers in the last few years. One of the reasons for this is its speed and built-in developer tools.
Now, with the development of the collection of Chrome extensions, which is expanding every day, this is the reason why many web developers and designers choose this browser for themselves.
Want to know more about this? Check out our list.
01. iMacros for Chrome
The iMacros extension for Chrome allows you to record your actions and save them.
As a web developer, you may need to audit your web pages. Doing the same things over and over again can be a tedious process. iMacros is a handy extension for Chrome that allows you to record your actions and save them, only requiring you to perform the action once.
You can then check your pages again and again, repeating the steps with the click of a button. This saves valuable time and allows you to concentrate on more important issues.
02. Font Playground
Font Playground lets you experiment with local fonts on live web pages.
Every designer and developer will find a lot of useful things in this extension. Font Playground allows you to experiment with local fonts and all Google font libraries on active web pages without making any changes to the pages themselves.
The good thing about this extension is that it includes all possible font sizes, styles and effects. You can first visualize different font options before making any actual changes to the code.
03. What Font
What font do they use? The What Font Chrome extension can show you this!
A very useful extension for Google Chrome, What Font allows developers and designers to determine which fonts are being used on a web page.
So, if you come across a font somewhere online that looks fantastic and want to use it in one of your future projects, just hover over it and you'll instantly know what it is.
04. Yslow
YSlow will tell you what is slowing down the page.
With this tool, you can't just check how fast a web page is loading, it will also show you if anything is slowing it down.
YSlow tests web pages against 23 of the 34 performance rules developed by the Yahoo team. It is an extremely useful tool for analyzing web pages and also suggests ways to optimize their performance.
05. Web Developer
The Chrome Web Developer extension provides a number of useful tools for developers.
If you are a web developer, you may ask yourself: how did you manage until now without this extension. It adds a toolbar button that gives Chrome access to many useful tools for web developers.
This official version Web Developer extension developed for Firefox.
06. Web Developer checklist
It fixes performance issues in this handy Chrome tool.
This tool allows you to check everything from whether your pages are SEO compliant, usability compliant, as well as their visibility and performance (page loading speed).
So if, for example, you missed an H1 tag, or if a page is missing a meta title or meta description, the Web Developer checklist extension notifies you of this.
So that you can quickly decide this problem. If you click the link " more information and help» at the bottom of the extension, you will find a more detailed list.
07. DevTools Autosave
Automatically saves changes to page source files (CSS and JS).
A true treasure for all developers, DevTools Autosave allows you to automatically save any changes made to a page's CSS and JS source files through the Chrome Dev Tools environment. The extension is easy to set up and use and will save you a lot of time.
08. Instant Wireframe
Allows you to view wireframes of web pages.
Connect wireframe viewing of any web page with just one click. This Google Chrome extension helps web developers and designers view web pages, whether local or published online, with a wireframe overlay.
09. Ripple Emulator
Ripple Emulator helps with web page debugging, DOM inspection, and automated testing.
Ripple Emulator is a multi-platform mobile environment emulator that will help you test your web application on various devices and screen resolutions.
The Ripple Emulator extension can be used in combination with existing development tools for debugging, DOM inspection and automated testing.
10. Streak
Tracking email conversations in one ticket, assigning tasks.
Streak is the main CRM and support tool Email Gmail.
The extension allows you to combine all your email boxes in one or organize tracking of message exchanges in one ticket, assign tasks so that you can manage the process of communication with your counterparties personally or provide access to this to other persons.
11. Search Stackoverflow
Get quick answers to your questions with this must-use extension.
If you are a web developer, you must have heard about Stack Overflow, a place where many developers turn to with various questions related to the development of web projects. If not, then you definitely need to get to know him. It's a truly thriving community that covers a wide range of topics, from C# and Java to PHP and JQuery.
This fantastic extension adds a search box directly to your browser and allows you to tap into the vast resources of Stack Overflow. A must-use extension!
12. PHP Ninja Manual
All documentation for PHP 5.5, in your browser.
It is really difficult to remember every function, so if you have spent many hours searching for specific PHP functions via Google, this extension is sure to grab your attention. PHP Ninja Manual provides
You get all the documentation for PHP 5.5 with specific examples in eight languages in your browser.
13. PerfectPixel
This extension will help you ensure that every pixel on your site matches the design.
Designers hate situations when they create an amazing design, but after translating it into code, something doesn't match the original design. The Perfect Pixel processor is truly the perfect extension for web developers who strive to create sites that are design-accurate.
This easy-to-use extension allows you to place a semi-transparent image overlay on top of a web page and perform a pixel-by-pixel match check to ensure a 100 percent match.
14. Code Cola
Allows you to edit web page CSS in place.
Not only will this tool allow you to view the source code you are working on, it can also work as CSS editor. This means that you can edit the CSS style of your web pages on the spot and see the results of your changes immediately.
15. Chrome Sniffer
Inspection of web applications and JavaScript libraries.
This extension will allow web developers to inspect and identify web applications as well as JavaScript libraries attached to a specific project. The extension works as simply as possible: an icon appears in the address bar indicating the version of the framework or CMS used.
16. User Agent Switcher
Check how your site looks on different devices.
A great tool for seeing how a website looks on different types of devices such as iPad, iPhone or Android devices. This can also be very useful in terms of seeing the site the way search engines see it.
No matter what you've heard about Google Chrome, when it comes to web design and development, Firefox is still best browser with a friendly development environment that you can find.
Heck, Firefox even has a special version of the browser made just for web developers. That's how much Mozilla cares about web designers and developers.
Firefox also has a huge collection of extensions that make the browser more powerful for maximum effect. Here are some of the best Firefox extensions you can use to make your web development life easier.
Install, test and use most of these extensions. After all, they are all free to use!
- What it does: Inspects web pages
Firebug is an extension that web designers and developers simply cannot live without. This extension is like an enhanced version of the integrated developer console that comes with Firefox. Firebug makes it much easier for you to inspect elements on web pages and show you how things work across different sites.
- Suitable for: web developers
- What it does: client for Firefox
FireFTP is an FTP/SFTP client for Firefox that allows you to securely upload and transfer files between your computer and the server directly from your browser. With this add-on, you'll never have to jump between your browser and FTP client apps again.
- Suitable for: web developers and designers
- What it does: analyze and check web pages
It's an all-in-one extension that adds a number of useful tools to your Firefox. Some of the tools included in this addon are table display and editing CSS styles, disabling styles, debugging tools, etc.
- What it does: Color analysis tool
ColorZilla is a great tool that front-end web designers will find quite useful. This addon has a dropper for quick selection web page colors, CSS gradient generator, color analyzer, color palettes and much more.
- Suitable for: web developers
- What it does: Modify websites with custom code
Loved by over a million Firefox users, Greasemonkey is an extension that will give you endless fun. This add-on allows you to customize popular websites by editing them with your own JavaScript code. You can also enjoy scripts already created by other developers.
- Best for: Interface designers
- What it does: Adjusts the offset of web elements
A simple but useful plugin that allows you to inspect web elements and visually see how many pixels are off in the elements, creating a composition with transparent layers. Using this composition, you can set up your actual web page to match the overlay for the best result without any guesswork.
For example, if one of the images on your web page overlaps another object, you can use Pixel Perfect to determine how many pixels you need to adjust to get that image in the right place.
- Suitable for: web designers
- What it does: Loads everything from a web page
This plugin lives up to its name by allowing you to download everything from a web page. With one click, you can download all the images, links and other data contained in a web page using this extension. The addon also has a built-in download accelerator that optimizes download speed by four times.
- Best for: Interface designers
- What it does: check web pages in Internet Explorer
Believe it or not, there are people who still use the old ones Internet versions Explorer to access the Internet. Creating sites that work well in these older browsers is one of the problems that web designers still struggle with. This plugin makes it easy to customize web designs for older Internet browsers Explorer, creating new tab in IE.
- Suitable for: web designers and developers
- What it does: Shows you about the technology used on the website
Wondering what technologies were used to create your favorite websites? Then this add-on will be useful to you. BuiltWith is an extension that allows you to scan websites to find what technologies are used on the page. A great tool for all aspiring web designers to learn from ready-made websites.
- Suitable for: web developers
- What it does: Turns Java on or off
This add-on allows you to easily enable or disable Java in your browser. It can also disable Javascript, Cookies, animated images, Flash and more on the web page. This is a useful plugin not only for developers but also for regular users to improve browser security and reduce bandwidth.
- Best for: Interface designers
- What it does: Measures elements in pixels
The function of this add-on is simple, it allows you to draw a virtual ruler on top of a web page or an element on a page to measure the width, height or pixel alignment of the element on the web page. MeasureIt is useful for most front-end developers to create wireframes.
- Suitable for: web designers
- What it does: switches the language in the browser
This is a useful tool that instantly translates your Firefox into another language. Everything in your browser, including the user interface, spellcheck dictionary, and website content, will be translated into the language of your choice. A great feature that you can use when developing multilingual websites.
- Best for: Interface designers
- What it does: generate dummy text
Creating dummy text for your new website mockups and prototypes is a boring task that is unlikely to entertain even a single designer. This extension makes the process less boring by allowing you to generate Lorem Ipsum dummy text directly from Firefox.
- Suitable for: web developers
- What it does: edits and creates cookies
This add-on not only manages your site's cookies, but also allows you to easily edit and create new files. Some of the plugin's features include inline browsing cookies, the ability to change the domain, the ability to edit multiple cookies at once and much more.
- Best for: Interface designers
- What it does: Selects colors on a web page
An easy-to-use tool that allows you to pick the colors of any pixel on a web page and easily copy the RGB or Hex color code for use in your own projects. The beauty and visual interface of this tool make it much easier for beginners to learn about colors on web pages.
- Suitable for: web designers and developers
- What it does: Gives information about the software used by the website
Similar to the BuiltWith add-on, Wappalyzer is another useful extension that allows you to find out what software used on the website. For example, you can find out what type of CMS the site uses, what operating system the website server supports, and much more.
- Suitable for: web developers
- What it does: Changes the browser user agent
Do you want to know what your website will look like on different platforms and operating systems? Then this is a tool that will definitely come in handy for you. User-Agent Switcher allows you to switch between different platforms such as Android, Mac, Windows and select operating systems to change your browser's user agent.
- Suitable for: web designers and developers
- What it does: Shows an example of using the browser's memory tab
This is a handy add-on that will help you determine how much of your computer's resources are being used by each open tab in Firefox. You can use this tool to find out how many resources your site is using and optimize your site for maximum performance.
- Suitable for: web and graphic designers
- What it does: Opens images in Photoshop
This add-on does what its name says, simply opens with one click the images you find on a web page using Photoshop. No need to upload an image or launch Photoshop, the extension will do everything you need.
- Best for: Interface designers
- What it does: Improves HTML tables
Graphs, statistics, comparisons, tables - this add-on can do it all. You can use this tool to create user-friendly and beautiful HTML tables and diagrams.
- Suitable for: web developers
- What it does: SSH client for Firefox
Typically, you need to install an application to run the SSH terminal. These applications differ in one thing operating system from another. FireSSH, however, works on all platforms as long as you have Firefox. The extension allows you to launch an SSH terminal directly from the browser.
- Best for: Interface designers
- What it does: Automatically refresh web pages
One of the annoying things that web designers face when designing websites is having to manually refresh the web page after each change. small change into code. Auto Refresh is an extension that fixes this problem by allowing you to automatically refresh one or more tabs in Firefox at intervals you define.
- Best for: Interface designers
- What it does: Resizes Firefox windows for specific screen resolutions
This add-on allows you to resize Firefox windows in specific resolutions to see how your website looks on different screens. You will need to install the Firefox Add-On Bar for this extension to work properly.
- Suitable for: web designers and developers
- What it does: finds information about the fonts of the page and its elements
Font Finder is a handy tool that allows you to examine website elements to find out important information about the fonts used on the page, such as font family name, font color, line spacing, decoration, and more.
- Best for: Interface designers
- What it does: checks web pages in different browsers
The function of this add-on is simple. It allows you to instantly open any web page you are viewing in Firefox using another browser with just one click. There is no need to copy URLs, open each browser one by one and paste the URLs to open the website.
- Suitable for: web designers and developers
- What it does: clears browser cache
This add-on instantly clears the cache Firefox browser(RAM and DISK) to reduce the use of computer resources. The extension allows you to clear the cache by simply clicking on a button or pressing the F9 key on your keyboard. If you want to quickly view changes made to a web page, this add-on will be very useful.
If you active user Google Chrome browser, then it's time to upgrade it to full blast real developer tools. Here is a list of popular plugins that will simplify your work and diversify your everyday Internet surfing.
Stylebot
If you want to remake your favorite Internet pages in your own way, then you won’t find a better plugin.
Image Downloader
An application for downloading your favorite pictures from any site.
DomFlags
Create a menu of links for quick navigation through your code.
CSS Shack
A very convenient utility in which you can work with text, images, layout pages, and then simply export the file to CSS and use it to create your own page.
Marmoset
An extremely useless application for creating beautiful screenshots of your code. Beauty refers to the ability to change the background color and rotate in 3D.
iMacros for Chrome
If you need to set up testing of a web page by cyclically performing certain actions, then this application is exactly what you need.
Font Playground
Not the most sophisticated application, but extremely convenient. Allows you to quickly evaluate font changes, both in a separate block and on the entire page.
Firebug Lite
You may know about a similar powerful add-on for Firefox, which serves as a debugger and DOM inspector for JavaScript, HTML, CSS. A slightly less functional version is also available on Chrome.
Window Resizer
Allows you to quickly see how a page will look on a screen of any size.
Ripple Emulator
A similar utility that demonstrates how a page is displayed on a specific gadget.
Project Naptha
The application will be useful not only for the developer, but also for the ordinary user. Allows you to copy text from a picture, edit it and even translate it.
What Font
To find out what font is in front of you, simply install the What Font application in your browser.
ColorZilla
And this application will allow you to find out the color number.
Yslow
This utility will not only show the page loading speed, but will also tell you what exactly is slowing down this very speed.
Web Developer
What web developer can live without a Web Developer app? Adds standard developer tools buttons to the main window.
Page Ruler
A tape measure for web pages will tell you the dimensions of a particular element.
DevTools Autosave
As the name suggests, this application automatically saves your code creation efforts.
Instant Wireframe
Using this utility you can view on any resource block diagram pages (wireframe).
Search Stackoverflow
Quick search for a popular question and answer service for programmers and developers.
PerfectPixel
An application for working with layers on the web, in particular you can make them translucent.
Chrome Daltonize
If you suddenly decide to make a website designed, among other things, for people with color vision problems, then be sure to use this utility.
Check My Links
What browser extensions and applications do you use at work?
It's no secret that today's websites use Cascading Style Sheets (CSS) to contain the parameters of all page elements. CSS specifies fonts, sizes of objects, frames, pictures, blocks and tables. We decided to put together for you a selection of Google Chrome add-ons that will allow you to edit the style of any page on the Internet. As a bonus, we will show you how to change the page background.
Every person has their own preferences and interests, especially when it comes to web design. Just remember the eternal holiwars after every YouTube update. Yes, and you probably have several comments about the display of information on your favorite website: somewhere the font is ugly or small, somewhere there is a completely unnecessary notification block. This is where it would be nice to add a background image!
Today's browsers allow you to edit websites in just a few clicks. The user can customize anything, down to the location and order of elements on the page. For this purpose, special extensions and additions were written, which we will analyze before proceeding with the change. home page Google.
Stylebot
Perhaps the most popular extension with open source code. Allows you to edit fonts, colors, sizes and more on the fly. Has a simple editing mode: when open window With Stylebot, you can select the element you want by simply hovering over it with your mouse. Changes are saved instantly, and custom styles can be shared with friends.
Web Override
An application for connecting Javascript scripts to external websites. Already contains jQuery, async.js, moment.js and Lodash, so the functions of these libraries can be freely used. Suitable for advanced users who know how to use Javascript, but beginners can use the extension to implement scripts already written by someone else.
Styler
The principle is the same as that of Stylebot: we quickly edit the page style, the changes are saved instantly. The interface and sequence of actions are slightly different, with slightly fewer possibilities. So the choice is yours: what you like best.
Stylish
The most powerful tool for website customization, similar in capabilities to Stylebot. Allows you to hide unnecessary elements, edit styles, and share the result with friends. The add-on website contains over 10,000 custom styles to modify appearance Facebook, YouTube, App Store and many other popular resources.
Live CSS Editor
By pressing the key combination, it opens a small window where the user can enter any style, which will be immediately applied to the page (after closing, the changes are saved). Simple and convenient: nothing superfluous.
We’ll tell you, as promised, how to edit the background of any page using Stylebot as an example.
Important! This method looks beautiful on “light” pages that are not overloaded with blocks and menus and is presented only to familiarize yourself with the capabilities of add-ons. We recommend trying it on Google.com.
- go to the required page
- Click on the Stylebot icon in the upper right corner of Chrome
- click Open Stylebot
- at the bottom select the Edit Css option
- Enter the following code:
body(
background: url(https://dl.dropboxusercontent.com/u/28029149/NGC_2818_by_the_Hubble_Space_Telescope.jpg) ;
background-size: 100% 100%;
!important;
}
- close Stylebot
Ready! Instead of the image given as an example, you can use any other one (you just need to replace the link in the code above). For more complex site customization, you will have to read CSS manuals, but believe me: there is nothing complicated about it.
Loading...
