Extensions for web developer tools. Google Chrome extensions for web developers. Web developer extension

Google Chrome is the fastest and most popular browser in the world from Google developers. The main advantage is, of course, the easy interface and speed. Not only does it process web pages quickly, but it also launches faster than other browsers. Chrome has a variety of extensions for designers and developers.

In this article, we have compiled a list of the best and most useful Google Chrome extensions for web designers and developers.

1.

Chrome extension, which adds a sidebar to the source code that displays information about the gradients applied to the element being inspected. You can also toggle each gradient individually since they are different layers.

2.

Emmet LiveStyle is a plugin for live bidirectional (editor ↔ browser) editing of CSS code. It currently works in Google Chrome, Safari and Sublime Text, with other browsers to be added by the developers. With this extension you can link two completely different CSS sources for live editing.

3.

The Dimensions Toolkit extension offers useful tools for testing your customized web projects, with tracking points and defaults, resizable dimensions, etc. It is available as both a Chrome extension and a web app.

4.

If you work with Batman.js, this Batman.js Devtools Chrome extension is an invaluable tool for you. It includes many tools useful for developing with Batman.js right in the browser.

5. Clockwork

If you're a PHP developer using Chrome, check out the Clockwork Chrome extension. It provides a new panel with all the useful debugging and profiling data, including information about GET data and POST, cookies, request, headers, session data and more.

Google Chrome is a fast and popular browser among internet users, it launches quickly from your desktop, loads web pages quickly and launches complex web applications quickly. The Chrome browser window is streamlined, clean, and simple. Chrome has introduced a plethora of web developer-friendly extensions for Chrome, but developers are increasingly giving Chrome a try, and some aren't looking back.

In this review, we have collected some of the best and useful Chrome extensions for developers and designers that will make development tasks easy and hassle-free. Thus, without special attention ado allows you to check the following chrome extensions

There are tons of free Chrome extensions to make your life easier—we've rounded up 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 processes 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 promos 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 at 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 a responsive website design. 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 from a world of mild 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.

A very useful extension for Google Chrome that allows 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 the performance team Yahoo. 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 accurately measuring elements on any web page and then processing them 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.

This is a multi-platform emulator mobile environment, which 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 allow you not only to view source, which you're already working with, but it also functions as a CSS editor where you can edit your web pages and see the changes instantly.

A great tool to view what a website looks like using various 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 an easy-to-use, free online photo editor that lets you 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 mobile internet bill was huge? Do not panic. You just need this extension: it reduces the amount of data used when browsing the web. At turning on Chrome will use Google servers to compress pages before loading them. There is only one caveat: SSL and incognito mode will not be enabled.

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? This is what will be discussed 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 is 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.

Features of Developer Edition

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 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 ordinary users There is no need to install 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.

As a web developer, you probably spend a lot of time using the browser. Today, almost every browser has its own developer tools that let you see what's going on behind the scenes. Some of the browsers have many extensions that can help you optimize your web development process.

In this post, we've collected our favorite and useful Google Chrome extensions that help make a web developer's life easier.

1 Web Developer

Web Developer Tools is one of the most useful extensions for any developer. It adds a toolbar to Chrome. With its help, you can conveniently edit CSS, view JavaScript, and much more. The extension is available for Chrome browsers, Firefox and Opera.

2 Accessibility Web Developer Tools

Millions of people use the Internet, including people with disabilities. Therefore, your sites must be accessible to this category of users. This extension allows you to run an accessibility check on any page on the web. Add it to your list of web developer tools. To use it, click on the Audits tab, select Availability Audit, then Run. If a page violates any rules, they will be displayed as a list with one or more violating elements on the page.

3 Responsive Web Design Tester

Use the Responsive Web Design Tester extension to test how a page responds on different devices. It reflects the size and browser mobile device, comes with various presets Android devices. He also works in offline mode, which is useful when developing sites on local hosting without Internet access.

4 Wappalyzer

If you've ever used Built With, you'll be familiar with the concept of Wappalyzer. This extension defines content management systems, platforms ecommerce, web servers, JavaScript bases, analytical tools and much more. In addition, the application is available for the Firefox browser.

5 PerfectPixels

Thanks to this extension, you can be sure that the design will perfectly match the resulting code. Simply install the extension, it will allow you to put semi-transparent image overlays on top of a web page to compare the image with the layout. Overlays can be different for each site and are saved between browsing sessions.

6 Refined GitHub

If you're frustrated with GitHub's user interface, this extension is a must-have for you. It simplifies the default GitHub interface and adds all kinds of additional functions: marking questions; marking requests as unread; adding a quick edit button; adding an author's link and much more.

7 CDN Headers & Cookies

This extension allows you to view all HTTP headers and cookies in one place. This is a lightweight and simple extension. You can add, edit, or delete custom request headers and cookies, as well as export request headers and cookies to a CSV file.

8 User Agent Switcher

Use this extension to change the user agent for device and/or browser spoofing. You can quickly switch between by different users or add your own with settings that simulate Internet Explorer, iPhone, or imitating the work of a Google bot. This is useful for debugging and testing site behavior on various devices.

9 JSON Viewer

A JSON and JSONP printing extension that you can customize to your liking. It includes features such as collapsible units; clickable URLs; a notepad in which you can enter JSON format for an indefinite period of time using a single button or key combination; 27 built-in themes and much more.

10 Check My Links

If you regularly edit pages with a lot of links, be sure to include this extension in your list of web developer helpers. It can quickly find all the links on a page and check each of them. Good links are highlighted in green, while broken links are highlighted in red. The extension will also publish the full URLs of broken links in the console log.

11 Usersnap

Often web developers collaborate with multiple people every day while working on a project. This small extension will streamline the process collaboration, since it takes screenshots of the current content. You will be able to communicate more effectively on various issues, exchange feedback between other developers, clients and other people involved in the web development of the project.

12 IE Tab

IE Tab emulates Internet Explorer by using its rendering engine directly in Chrome. The application allows you to use elements ActiveX controls to test developing sites with different versions of IE, ranging from IE6 to IE9.

13 DevTools AutoSave

Using developer tools to make changes on the fly for testing purposes, then inserting the changes into text editor and uploading to the server can turn into hellish torment. Luckily, this extension comes as a lifesaver as it allows you to automatically save any changes you make to a site's CSS and JS to a source file.

14 Chrome MySQL Admin

If you work with databases on a daily basis, consider adding this extension to your workflow. This is a simple MySQL client with all the necessary tools for database management and MySQL tables. You'll be able to connect to and manage databases, run queries, create and drop tables, and much more in the app's fast and easy interface.

15 Grunt Devtools

This Chrome Developer Tools extension adds tools that support background tasks and lets you perform tasks for multiple projects in a single window.

If you use other extensions for Google Chrome that are useful for web developers, please share them in the comments to the article. We are interested to know what other programmers and layout designers use in their work.

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 best extensions Google Chrome for different purposes - but each is designed to make your work easier.

Firefox has long been famous for its custom setting and many extensions, but Google Chrome has also gained great 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 Chrome extension allows you to record and save your actions.

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 is the official version of the 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 source files pages (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 emulator that will help you test your web application on different 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 for 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 website 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. Perfect Pixel processor really perfect extension for web developers who strive to create sites that accurately match the design.

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 you can edit CSS style your web pages right there 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 being 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.