[Translation] 28 essential chrome plug-ins for web designers and developers

Summary

 

For many web designers and developers, the Firefox browser cannot be surpassed. For others, Chrome is encroaching on the Firefox browser market.

In the past two years, Google Chrome's release has aroused heated debate about which browser is better. Mozilla's open-source products have stood the test of time and Firefox has quickly become the second most popular browser after Microsoft IE.

Don't feel sorry for Google's browser. Even if it is in its infancy, Chrome has become the third most popular browser. I dare say it has a great opportunity to surpass Firefox or even IE.

Although Firefox is more powerful (mainly because of its popularity), Chrome is lightning fast, and its daily update and extension features make those hardcore web designers extremely excited.

Here you find a useful tool for chrome as a designer or developer. Fortunately, the chrome feature extension makes it easier to get from Firefox.

 

Body

 

1 awesome screenshot

As the name suggests, awesome screenshot can obtain snapshots of the entire and partial pages. After that, you can use a circle or a straight line to emphasize the relevant parts, or blur out irrelevant content, you can save the image locally or upload it.

 

2 aviary screen capture

After introducing awesome screenshot, let's introduce another tool. Maybe you may wonder why we want to introduce two tools. This is because awesome screenshot has a disadvantage, it needs to access all the data in the history of your computer and browser. for users, this is undoubtedly a violation of their privacy, and aviary does not need to obtain user personal information.

 

 

3 chrome sniffer

Browser sniffing allows you to check the frameworks used by any website. It can locate and display any known Content Management System (CMS) or Javascript library on the website. This extended feature is great for those exciting websites that you want to know, "How is it possible ?" Currently, chrome sniffer can detect more than 100 frameworks.

 

 

 

4 cloud save

As a designer and developer, you are used to working on the network, but do you want to save important files online? If your excuse is that this storage method is not very convenient, you may need to check what cloud storage is. It allows you to save files on any website that supports cloud storage, such as Amazon, Dropbox, and Flickr.

 

 

5 code cola

Code cola allows you to edit individual webpages on the website. It allows you to click an area of the webpage and edit CSS automatically.

 

 

6 sort ate ipsum

 

 

7 diigo bookmark, archive, highlight and sticky note

Diigo is short for Internet information groups and the essence of other things. It is an online research tool that enables users to manage information. Highlight webpages in multiple colors, instantly paste them on your social network communication page, and create and share your research group.

 

 

8 drag2up

Drag2up is an easy-to-use file attachment system. Instead of clicking various windows, you can simply drag the files you want to upload to the upload box. You can also upload the files to various hosted websites, this extension is mandatory for download functions, including Flickr, imageshack, Twitpic, and box.net.

 

 

9 eye dropper

You may encounter some perfect green shadows from time to time, and you want to integrate them into your page design, then the eye dropper plug-in will help you find the exact shadow, it also tracks your color history.

 

 

10 firebug Lite

Firebug is a tool that designers and developers are no longer familiar with. As the firebug author switched to Google, I believe chrome will be more powerful for developers in the future.

 

 

11 greplin

Greplin allows searching in your private data. Use this plug-in to find the information you submit on different websites, such as Twitter, Facebook, or even Gmail. It adds an index to the data to make it easy to search for the data, instead of searching through your history. All the data in greplin can be conveniently called.

 

 

12 HTML instant

HTML instant is a real-time HTML tool. It provides the image splitting function. When you are editing in the work zone on the leftCodeYou can view the effect in real time on the right side. HTML instant not only supports HTML, but also supports CSS and JavaScript.

 

 

13 IE Tab

The IE tab plug-in allows you to view web pages from a simulated IE, while still using the Chrome browser, because IE is still the preferred browser for most netizens, at present, some websites still run best in IE, and even only support IE (such as some bank online banking ).

 

 

14 image properties context menu

The context menu of image properties is a useful chrome plug-in that provides all information about the selected image. You can find the image location and source image, it also displays the image size and file size. This is a simple and effective plug-in. For some reason, this function is not included in chrome.

 

 

15 measureit!

Measureit is a designer's ruler. You can use it to measure the size of any element on the page. Just click the plug-in and drag the ruler to quickly and conveniently measure the size.

 

 

16 microstock photo power search tool

The difference between a great web designer and a good web designer is whether you know where to get the desired picture. Any designer knows that finding the right image is one of the most time-consuming parts of the design, especially if you are looking for image resources in a few places. This plugin helps you easily search for images.

 

 

 

17 palette for chrome

The chrome palette is very practical. You only need to right-click any image. This plugin can create a 16, 24, or 32 color palette. In addition, you can create a custom color palette, select the image you like, and obtain the color to add it to your page design.

 

 

 

18 pendule

The powerful pendule extension combines several plug-ins in this list. Pendule allows you to view and change JavaScript and CSS (HTML instant ). You can also view the specific image properties context menu, or hide it completely. This is a powerful development tool that includes the color selector (palette), HTML and CSS validators and link check.

 

 

19 plainclothes

Plainclothes is an interesting and useful plug-in that allows you to view the summary of a website. Sometimes it is easier to see design errors or analyze why it works. Plainclothes allows you to split a webpage into a color text, a background color, and a link color.

 

 

20 Resolution Test

You can test the web page display effect by changing the browser size. Resolution test can test the Display Effect of Your webpage at different resolutions, and you can view the resolution of the current test.

 

 

21 search by Image

Image Search is my favorite browser plug-in. This plug-in allows you to search for specified images on different websites. You can search for similar images. You only need to right-click the image and select "Search for the image by Google" to find the webpage that contains the image or matches the image.

 

 

22 Session Manager

Session Manager can save the currently opened tags. This plug-in can classify and save different websites (similar to adding a favorite ).

 

 

23 tabjump

Similar to session manager, tabjump is better than blue. It not only manages your tags, but also the plug-in can lock tags to prevent you from accidentally closing an important tag. If you disable a tag by mistake, tabjump allows you to re-open it, but remember that this plug-in cannot restore the history.

 

 

24 tabjump

Because there will never be a perfect plug-in to manage browser labels, toomanytabs is another must-have plug-in that displays all opened tab thumbnails. When you open many labels, you can no longer read the label title, because it provides an intuitive view effect.

 

 

25 Web Developer

Web Developer is another comprehensive developer tool. Its developers also develop many popular Firefox plug-ins. With this plug-in, you can view and edit CSS to display the image file size and clear session cookies.

 

 

26. whatfont

Font is a top priority for most web designers. Did you ever happen after a random website and find the perfect font, just looking for endless answers to code? If you like something simple, install this font to find extensions. You only need to hover your mouse over a text and find the font in use. This extension not only tells you the font name, but also provides the font size and color.

27 appjump app launcher and organizer

After you add the above plug-ins, you will certainly need tools to manage your plug-ins. Appjump is a Chrome app for you to find and start.ProgramAnd other plug-ins, drop quickly from the drop-down menu toolbar. A cool feature of appjump is the ability to organize applications and expand to different groups.

28 speed Tracer

Speed tracer is a tool used to identify and fix your web apps performance.

Summary

original article address:

25 + must-have chrome extensions for web designers and developers

I believe chrome will keep improving and become a dedicated browser. Let's wait and see!