home › BY › Google Chrome extensions nuances for developers. Google Chrome extensions for web development and more. What versions of Chrome are there?

Google Chrome extensions nuances for developers. Google Chrome extensions for web development and more. What versions of Chrome are there?

Browser Google Chrome– an excellent choice for designers and web developers. With extensions for GoogleChrome, you can add more features, which can help with design, finding errors and other work with the site. Here we present the best Chrome extensions for designers and developers.

Resolution Test– this extension is designed to check web pages at different screen resolutions, and you can set your own resolution settings. This tool is very convenient for checking how your design looks on different monitor sizes.

Pendule extends the functionality of Google Chrome's built-in tools. With this extension, users have many additional features, such as: evaluating restriction tags using W3C automated web services, hiding images on a page, viewing scripts embedded in a page, and many others.

Plain Clothes It does only one thing well - it removes all CSS on the page. One of the favorite ways to evaluate the accessibility of a web page is to remove the CSS styles and compare the readability of the page with and without the styles. This approach simulates a situation where the user only has a partial page displayed on their screen and can only rely on page tags to access the content.
Although this program was originally created for testing web pages, you can use it to view your favorite styles in an "unstyled" way (so your boss won't catch you looking at it while you need to finish a JavaScript function).

If you want to crop out specific parts of a web page, Image Cropper is your obvious choice. This program is as simple as a stick and has no gimmicks. Just specify the area you want to cut and the app will pick it up. Need pixel precision? The extension displays the size and location of the pieces you cut, so you can choose the size you need.

This extension prides itself on being minimalist and simple - which is a good thing, because there's no reason to complicate the production of Lorem Ipsum text. The Lorem Ipsum generator allows you to fill frames with text when designing your presentation website.

Identifying bugs within the engine Internet Explorer Trident is no fun at all. By using IE Tab, you can at least save a little time and not have to use Internet Explorer (not to mention that it doesn't have a lot of extensions) to find rendering problems.

jQuery Shell allows you to run javascript and jQuery commands in the context of an open web page. A very useful extension for learning and experimenting with jQuery.

10.

This app is a master of one trick. The trick is that the program allows you to quickly get the Hex and RGB values of any color on any web page. This feature may come in handy if you need to determine what colors your favorite website uses without using Photoshop and its Eyedropper tool.

11.

Using the function WebEdit, you can make any page available for editing (the changes you make, of course, will not be saved). Well, why do you need this then? Here's why: if you're creating a website and want to play around with elements without making significant code changes, this application will be very useful to you.

12.

Have you ever wanted to know what technologies, structures and applications with open source uses a specific website? Experienced developers can answer these questions by studying source, but if you'd like to get the answer faster and easier, then try Chrome Sniffer. Chrome Sniffer lists all known javascript frameworks/libraries (jQuery, MooTools, etc.) and CMS (Drupal, WordPress, etc.) that are used by a website.

13.
Eye Dropper is an extension for Google Chrome that allows you to detect color on any web page. Moreover, the program provides a color “wheel” and color samples (which can be found in any graphics program), so you can experiment and manipulate the colors to find the one you want.

15.

A properly constructed web page with good markup ultimately leads to the page having impressive results in search engines. However, if you would like to evaluate your website against known search engine optimization parameters, then you should try SEO Site Tools, an extension that offers you a huge range of useful SEO assessment tools and features. It can read a lot of parameters on and off the page, get information from social media and all that stuff.

There are several versions created for different categories of users. One of them is called Google Chrome Developer Edition. What kind of version is this and why is it needed? About this and we'll talk in this material.

It is worth noting that alternative builds of Chrome have appeared for a long time. They accompany this popular browser almost from the launch version. But not all users are suitable for alternative options.

The fact is that “other” builds of Chrome are intended for professionals in one field or another: layout designers, testers, developers, and so on. Such browsers are not suitable for ordinary users. And yet, we need to talk about them.

What versions of Chrome are there?

In fact, there are not so many of them. However, there is only one stable one. This is exactly the one that is made publicly available. Any user can download it. But there are also alternative versions. Let's take a closer look at them.

These are the versions of everyone’s favorite Google Chrome that exist. However, in this context we are interested in the Developer Edition. Therefore, everything needs to be considered key features this version for more details. Only then can a conclusion be made.

Developer Edition Features

The key feature of this Google versions Chrome is the availability of development tools. They will be useful to those who develop extensions and plugins for this web browser. The average user will get lost in such tools.

The second feature is the advanced console. It is used to edit the code and enable hidden functions browser. However, you need to know how to work with it. The slightest mistake in a team can lead to very dire consequences.

Another “trick” is the presence of all the latest innovations that have migrated to this version from Canary. Thanks to this, developers can optimize their extensions for new web browser capabilities.

Frequent updates– another distinctive feature of the Developer Edition. They come irregularly, but no later than once every two weeks. In some cases, updates may arrive within two days. This is convenient for those who are testing new features of the web browser.

Conclusion

So, above we talked about what versions of Google Chrome there are and discussed in detail the build for developers. Now it is clear that this version is distinguished by a set of tools and an advanced console.

It is worth noting that regular users do not need to install the Developer Edition at all. There will be no sense from this. Moreover, this assembly is not particularly stable. If you are not a developer, then it is better to use Stable.

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 Chrome extensions 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 Chrome extension 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. This is extremely useful tool to analyze web pages, which 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 solve 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's really hard to remember every function, so if you've spent many hours searching for specific PHP functions via Google back in the day, this extension will definitely catch your attention. PHP Ninja Manual provides

You get all the documentation for PHP 5.5 concrete 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 a 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 various types 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 have heard about Google Chrome, when we're talking about about web design and development, Firefox is still the 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 displaying and editing CSS style sheets, 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 an eyedropper for quickly choosing colors on a web page, a CSS gradient generator, a 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 using 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 a 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 ordinary 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 user interface, spell check 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

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 with 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 developing websites is having to manually update the web page after every small change to the code is made. 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 your Firefox window at 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.

With the growing popularity of the Google Chrome browser, extensions are emerging that save web developers time by giving them the ability to track errors and site performance issues.

Here are some useful extensions for Google Chrome.

Web Developer Extension

I would like to note the most convenient and powerful tool for a web developer and web designer - Web Developer extension for Google Chrome.

The extension is added to the Google Chrome toolbar in the form of a button with a gear icon and contains various tools for developing and debugging a website. This is an official adaptation of the popular one, written by the same developer.

The extension has a large number of options.

For example, many people just need find out the color of the element on the monitor screen in hexadecimal format. For this purpose the plugin has special function. In the Miscellaneous section, select Display Color Picker.

By selecting Display Color Picker, the cursor becomes a cross. Now, clicking on any area of the screen in the lower right corner of the browser displays the color in hexadecimal for use in CSS.