Nếu bạn là nhà thiết kế cần một số công cụ hữu ích để tăng tốc, cộng tác hoặc kiểm tra các dự án phát triển web^{(web development)} của mình , thì tiện ích mở rộng của Chrome có vô số công cụ.

Danh sách này bao gồm một số công cụ phổ biến nhất - và một số cho rằng cần thiết - các công cụ và tiện ích mở rộng Chrome mà mọi người dùng làm công việc thiết kế^{(design work)} nên có trong túi đồ^{(kit bag)} nghề của họ .

1. DomFlags

DOM Flags là một tiện ích mở rộng Chrome^{(Chrome extension)} đơn giản để sử dụng , cung cấp một cách mới cho các nhà phát triển để làm việc với các công cụ trình duyệt. Nó cho phép các nhà phát triển tăng tốc tác vụ của các phần tử tạo kiểu.

Sử dụng phím tắt cho từng phần tử, bạn có thể đánh dấu điều hướng của mình.

Tất cả chúng ta đều gặp khó khăn trong việc kiểm tra các yếu tố có độ chi tiết cao và rất dễ bị lạc.

DOM Flags cho phép bạn theo dõi các phần tử tạo kiểu bao gồm một tính năng tự động kiểm tra các thành phần với độ chính xác. Điều này sẽ giúp tăng tốc quy trình làm việc và triển khai DevTools^{(DevTools workflow and implementation)} .

DOM Flags cho phép bạn theo dõi các thay đổi. Và duy trì sự tập trung của bạn vào các yếu tố mà bạn đang làm việc.

2. Chóng mặt

Sizzy cung cấp cho các nhà thiết kế và nhà phát triển một cách đơn giản để kiểm tra trang web của họ trong nhiều chế độ xem.

Sizzy cung cấp một cách đơn giản để kiểm tra thiết kế của bạn trong thời gian thực. Nó cung cấp một cái nhìn tương tác về bất kỳ số lượng thiết bị và kích thước màn hình nào. Bạn thậm chí có thể mô phỏng bàn phím thiết bị^{(device keyboard)} và sau đó chuyển đổi giữa các chế độ ngang và dọc^{(landscape and portrait modes)} .

Cài đặt tiện ích mở rộng Chrome^{(Chrome extension)} sẽ thêm một nút vào thanh công cụ của bạn, khi được nhấp vào sẽ mở URL hiện tại trong nền tảng Sizzy^{(Sizzy platform)} . Tiện ích mở rộng sẽ chặn tất cả các tiêu đề “ x-frame-options ” để bạn có thể xem bất kỳ trang web nào trực tuyến.

Sizzy là một dự án mã nguồn^{(source project)} mở và bạn có thể xem toàn bộ mã tại đây^(here) .

3. Checkbot

Checkbot có thể kiểm tra trang web của bạn để tìm các vấn đề bảo mật và cũng kiểm tra tốc độ tải trang trên trang web của bạn. Nó sẽ cung cấp cho các nhà thiết kế phương tiện xác định các lỗi điển hình và đề xuất các cải tiến về bảo mật trang web^{(site security)} , công cụ tìm kiếm^{(search engine)} và tốc độ trang web^{(site speed)} .

Sử dụng hơn 50 số liệu thực tiễn tốt nhất, nó sẽ kiểm tra một trang web để thực hành SEO tốt nhất , các liên kết bị hỏng, nội dung trùng lặp^{(duplicate content)} và hơn thế nữa. Công cụ này cũng sẽ xác thực CSS , JS và HTML .

Checkbot xử lý các lỗi của nhà thiết kế và lập^{(designer and coder errors)} trình viên trong thời gian thực, giúp bạn không phải quay lại và kiểm tra lại công việc của mình nhiều lần.

Nếu bạn đang tìm kiếm một công cụ chất lượng^{(quality tool)} tốt sẽ sửa các liên kết trang bị hỏng, hãy đảm bảo nội dung và tiêu đề trang^{(content and page titles)} độc đáo, đồng thời loại bỏ các chuỗi chuyển hướng, công cụ này sẽ hữu ích.

Đối với các nhà thiết kế, nó có thể giúp bạn giảm thiểu CSS và JS^{(CSS and JS)} cũng như cung cấp các đề xuất về cách giảm thiểu CSS của bạn và^(CSS) tận dụng bộ nhớ đệm của trình duyệt.

4. GistBox Clipper

GistBox là một trong những tiện ích mở rộng Chrome hữu ích nhất dành cho các nhà thiết kế web.

GistBox có thể tạo GitHub Gist từ bất kỳ khối mã^{(code block)} nào trên trang web bạn đang xem.

Ở góc trên cùng bên phải^{(right-hand corner)} của bất kỳ khối mã nào, bạn sẽ thấy một nút nhỏ, khi được nhấn, sẽ cho phép cửa sổ bật lên cho phép bạn lưu mã vào Gist .

Bạn có thể tạo Gists mới bằng một cú nhấp chuột phải và lưu các khối mã để kiểm tra và sử dụng^{(inspection and use)} sau này .

Tích hợp với GitHub cho phép các nhà thiết kế và nhà phát triển thu thập các khối mã và thao tác với chúng hoặc phân loại chúng để sử dụng sau này. Điều này làm cho nó trở thành một công cụ mở rộng Chrome ^{(Chrome extension)}tiện lợi và hiệu quả .^{(convenient and efficient)}

5. ColorZilla

ColorZilla Là một tiện ích mở rộng của Chrome cực kỳ hữu ích để thu thập các mã hex có thể được gắn thẻ, dán nhãn và phân loại cho các dự án thiết kế web^{(web design)} riêng lẻ .

Nó cho phép bạn chọn một công cụ nhỏ mắt sẽ trích xuất màu từ bất kỳ trang web nào và lưu nó vào khay nhớ tạm của ColorZilla.

Với nó, bạn có thể nhanh chóng phát triển các bảng màu để sử dụng sau này và như một cách đảm bảo rằng bạn đang sử dụng màu một cách nhất quán trong thiết kế và phát triển^{(design and development)} web .

ColorZilla cũng hoạt động như một trình phân tích màu sắc và trình chỉnh sửa gradient ^{(gradient editor)}CSS để bạn có thể chuyển đổi hình ảnh sang CSS .

6. WhatFont

 Tiện ích mở rộng Chrome^{(Chrome Extension)} này là một trình tiết kiệm thời gian thực cho những người muốn sử dụng các phông chữ yêu thích của họ Và kết hợp chúng vào dự án thiết kế web^{(web design project)} của riêng họ .

Tiện ích mở rộng WhatFont của Chrome^{(WhatFont Chrome extension)} cho phép các nhà phát triển nhanh chóng phân tích và xác định hầu hết mọi phông chữ trên bất kỳ trang web nào.

Tiện ích mở rộng được phát triển tốt và thay vì phải mở các công cụ kiểm tra, tiện ích mở rộng hoạt động bằng cách chỉ vẫy chuột trên phông chữ.

Không chỉ vậy, tiện ích mở rộng cũng sẽ xác định dịch vụ đang được sử dụng để cung cấp phông chữ Pages đã đi và sẽ hỗ trợ Google Font API và Typekit.^{(Google Font API and Typekit.)}

7. LightShot

LightShot là một công cụ chụp ảnh màn hình^{(screenshot tool)} nhanh cho phép bạn chụp toàn bộ hoặc một phần của bất kỳ trang nào và tải lên hoặc tải xuống hoặc gửi đến đích của bên^{(party destination)} thứ ba .

Ảnh chụp màn hình do LightShot chụp có thể được sử dụng và chia sẻ trên mạng xã hội hoặc in ra.

Bạn có thể chú thích và thêm văn bản, mũi tên, v.v. vào phần đã chọn của màn hình. Nhưng có lẽ một trong những tính năng tuyệt vời nhất của công cụ đơn giản này dành cho các nhà thiết kế web là bằng cách chọn một hình ảnh, sau đó bạn có thể tiến hành tìm kiếm toàn bộ hình ảnh trên Google^{(Google image)} cho các hình ảnh tương tự trực tuyến.

LightShot có thể được định cấu hình bằng nhiều ngôn ngữ.

Phần mở rộng này được viết bằng JavaScript^(JavaScript) thuần túy và cũng sẽ hoạt động trên Windows^(Windows) , Chromebook , Linux và Mac OS^{(Linux and Mac OS)} . Nó cũng có thể được truy cập như một ứng dụng dành cho máy tính để bàn^{(desktop application)} , làm cho nó trở thành một lựa chọn tuyệt vời cho các nhà thiết kế web phụ thuộc vào nhiều thiết bị.

8. Ảnh chụp màn hình tuyệt vời

Giống như Lightshot , Awesome Screenshot là một tiện ích mở rộng chụp màn hình và hình ảnh.

Tuy nhiên, nó khác với Lightshot theo một số cách. Ảnh chụp màn hình tuyệt vời^{(Awesome Screenshot)} có thể được định cấu hình để kết nối tất cả ảnh chụp màn hình của bạn với ổ đĩa Google^{(Google drive)} của bạn .

Nó cho phép bạn chụp màn hình những phần tử nằm ngoài tầm nhìn của bạn để chụp toàn bộ trang. Nó có các công cụ chỉnh sửa và chú thích^{(editing and annotation tools)} bổ sung, dấu phẩy cho phép cắt và chỉnh sửa hình ảnh trong tất cả tiện ích mở rộng .. hoặc với việc sử dụng các ứng dụng Ảnh chụp màn hình tuyệt vời bổ sung

Bạn có thể mở rộng các tính năng của nó bằng cách cài đặt cả ứng dụng Chrome^{(Chrome application)} cho máy tính để bàn. Tiện ích mở rộng này cũng cho phép chụp và chia sẻ video để bạn có thể cộng tác với các nhà phát triển hoặc nhà thiết kế khác khi làm việc trên bất kỳ trang web nào.

Bạn có thể thêm hình ảnh bổ sung vào ảnh chụp màn hình cũng như các phần tử màu xanh lam hoặc xóa^{(blue or erase elements)} mà bạn không muốn hiển thị cho người khác.

9. Xóa bộ nhớ cache

Tiện ích mở rộng Xóa bộ nhớ cache của Chrome^{(Cache Chrome Extension)} Là một công cụ nhanh chóng và đơn giản cho phép bạn xóa cookie và bộ nhớ cache của trang bạn đang xem. Nó loại bỏ nhu cầu điều hướng đến trang cài đặt của trình duyệt của bạn để xóa một số phần tử trang đơn giản.

Đối với các nhà thiết kế web đang thực hiện nhiều chỉnh sửa và muốn xem chúng trong thời gian thực, đây là một công cụ tuyệt vời sẽ loại bỏ phần lớn sự thất vọng khi xem dữ liệu cũ.

Đôi khi bạn cần xóa bộ nhớ cache và cookie của mình, nhưng điều hướng đến cài đặt Chrome thật tẻ nhạt. Clear Cache cho phép bạn xóa bộ nhớ cache của mình cũng như các cookie cục bộ hoặc chung chỉ bằng một nút bấm.

Clear Cache sẽ cho phép bạn định cấu hình các phần tử bạn muốn xóa khỏi trang. Các biến^(Variables) bao gồm Tiền mặt^(Cash) , lượt tải xuống, tất cả hệ thống, dữ liệu biểu mẫu, tại Tiền mặt^(Cash) , cơ sở dữ liệu chỉ mục^{(index database)} , dữ liệu plugin, mật khẩu và hơn thế nữa.

10. Tiện ích mở rộng Google Chrome dành cho nhà phát triển web

Tiện ích mở rộng Google Chrome dành^{(Web Developer Google Chrome Extension)} cho nhà phát triển web cho phép các nhà phát triển và nhà thiết kế dễ dàng kiểm tra, phân tích và kiểm tra các trang web của họ xem có bất kỳ vi phạm nào đối với phương pháp hay nhất về thiết kế^{(practice design)} , mã hóa, khả năng sử dụng và tối ưu hóa công cụ tìm kiếm hay không.

Đó là một công cụ tất cả trong một tuyệt vời, không nặng về duyệt tài nguyên của chúng tôi nhưng cung cấp rất nhiều thông tin hữu ích cho thiết kế web cũng như chịu trách nhiệm về các yếu tố tối ưu hóa công cụ tìm kiếm^{(search engine optimization)} trong một trang web hoặc trang.

 Tiện ích mở rộng cài đặt thanh công cụ với nhiều công cụ dành cho nhà phát triển web.

Công cụ này sẽ cung cấp cho bạn các chỉ dẫn về kích thước trang, chiều rộng và kích thước gây xung đột với cách sử dụng thực tiễn^{(practice use)} tốt nhất trên nhiều thiết bị. Nó cho phép bạn kiểm tra JavaScript^(JavaScript) được nhúng và xem trang web của bạn thông qua mô phỏng của các thiết bị khác nhau.

Phần mở rộng hoạt động tốt trên Windows , Linux và Mac OS. Ngoài các vấn đề về mã hóa và thiết kế , nó cũng sẽ cung cấp thông tin chi tiết về ^{(coding and design issues)}thông tin thẻ^{(tag information)} meta , tiêu đề phản hồi, thông tin màu^{(color information)} và thông tin địa hình.

Bạn có thể xem lại các tính năng chính của công cụ cũng như các tính năng đầy đủ của nó trên trang web của nhà phát triển Chris Pedericks^{(Chris Pedericks’ website)} .

Không nghi ngờ gì nữa, có rất nhiều tiện ích mở rộng Chrome hữu ích và chất lượng cao khác mà nhà thiết kế hoặc nhà phát triển^{(designer or developer)} web có thể sử dụng.

Danh sách này giới thiệu một số công cụ phổ biến và hữu ích nhất. Bạn có đề xuất nào cho các công cụ mà bạn cho rằng tôi hữu ích hơn hoặc ưu việt hơn những công cụ trong danh sách này không? Hãy cho chúng tôi biết.

Top 10 Chrome Extensions and Tools for Web Designers

If you are designer in need of some useful tools to speed up, collaborate or audit your web development projects, Chrome extension has a multitude of tools.

This list comprises some of the most popular – and some would argue necessary – tools and Chrome extensions that every user doing design work should have in their kit bag.

1. DomFlags

DOM Flags is a simple to use Chrome extension that provides a new way for developers to work with browser tools. It allows developers to speed up the task of styling elements.

Using keyboard shortcuts for each element you can bookmark your navigation.

We’ve all experienced the difficulty in inspecting highly detailed elements, and it’s easy to get lost.

DOM Flags enable you to track styling elements includes a feature to inspect components with accuracy automatically. This, in turn, will help speed up DevTools workflow and implementation.

DOM Flags enables you to track changes. And maintain your focus on the elements you’re working with.

2. Sizzy

Sizzy gives designers and developers a simple way to test their sites in multiple viewports.

Sizzy provides a simple way to check your design in real-time. It offers an interactive view of any number of devices and screen sizes. You can even simulate a device keyboard and then switch between landscape and portrait modes.

Installing a Chrome extension will add a button to your toolbar, which, when clicked is going to open the current URL in the Sizzy platform. The extension will block all “x-frame-options” headers so you will be able to take a look at any website online.

Sizzy is an open source project, and you can see the entire code here.

3. Checkbot

Checkbot can test your site for security issues and also audit your website page loading speed. It will provide designers with a means of identifying typical errors and recommend improvements in site security, search engine, and site speed.

Using more than 50 best practice metrics, it will audit a website for best practice SEO, broken links, duplicate content and more. The tool will also validate CSS, JS, and HTML.

Checkbot picks up on designer and coder errors in real time saving you the trouble of having to go back and recheck your work repeatedly.

If you’re looking for a good quality tool that will fix broken page links, ensure unique content and page titles and eliminate redirect chains this tool would be useful.

For designers, it can help you minimize your CSS and JS as well as provide recommendations on how to minify your CSS and leverage browser caching.

4. GistBox Clipper

GistBox is one of the most helpful Chrome extensions for web designers.

GistBox can create a GitHub Gist from any code block on the webpage you are viewing.

At the top right-hand corner of any code block, you’ll see a small button, which when pressed, will allow a pop-up that enables you to save the code to the Gist.

You can create new Gists with a right mouse click and save blocks of code for later inspection and use.

Integrating with GitHub enables designers and developers to collect code blocks and manipulate them or categorize them for later use. This makes it a convenient and efficient Chrome extension tool.

5. ColorZilla

ColorZilla Is an incredibly useful Chrome extension for gathering hex codes which can be tagged, labeled and categorized for individual web design projects.

It enables you to select an eye-dropper tool that will extract the color from any web page and save it to the ColorZilla clipboard.

With it, you can quickly develop color palettes for later use and as a way of ensuring you are using color consistently in web design and development.

ColorZilla also acts as a color analyzer and CSS gradient editor so that you can convert an image to CSS.

6. WhatFont

 This Chrome Extension is a real time-saver for those wanting to utilize their favorite fonts  And incorporate them into their own web design project.

WhatFont Chrome extension allows developers to quickly analyze and identify almost any font on any web page.

The extension is well developed and rather than having to open up inspection tools the extension works by merely waving the mouse over the font.

Not only that but the extension will also identify the service that’s being used to serve up a Pages went font and will support Google Font API and Typekit.

7. LightShot

LightShot is a quick screenshot tool that enables you to capture the entire, or part of any page and either upload it or download it or send it to a third party destination.

Screenshots taken by LightShot can be used and shared on social media or printed.

You can annotate and add text, arrows and more to the selected portion of the screen. But perhaps one of the most brilliant features of this simple tool for web designers is that by selecting an image you can then proceed to do a full Google image search for similar images online.

LightShot can be configured in multiple languages.

The extension is written in pure JavaScript and will also work for Windows, Chromebook, Linux and Mac OS. It can also be accessed as a desktop application making it an excellent choice for web designers who are dependent on multiple devices.

8. Awesome Screenshot

Like Lightshot, Awesome Screenshot is a screen and image capturing extension.

It does differ from Lightshot, however, in a number of ways. Awesome Screenshot can be configured to connect all your screenshots with your Google drive.

It allows you to screenshot those elements which are beyond your view in order to capture the entire page. It has additional editing and annotation tools comma allows for cropping and image editing all within the extension.. or with the use of additional Awesome Screenshot applications

You can extend its features by installing the Chrome application for desktop as well. The extension also allows for video capturing and sharing so that you can collaborate with other developers or designers when working on any site.

You can add additional images to a screenshot as well as blue or erase elements that you would rather not show to others.

9. Clear Cache

The Clear Cache Chrome Extension Is a fast and simple tool that enables you to clear cookies and cache of the page you’re looking at. It removes the need to navigate to the settings page of your browser in order to clear a few simple page elements.

For web designers who are making multiple edits and want to view them in real time, this is an excellent tool that will eliminate much of the frustration of looking at old data.

There are times you need to clear your cache and cookies, but navigating to Chrome settings is tedious. Clear Cache lets you erase your cache as well as global or local cookies at the click of a button.

Clear Cache will allow you to configure which elements you want to clear from the page. Variables include Cash, downloads, all systems, form-data, at Cash, index database, plugin data, passwords and more.

10. Web Developer Google Chrome Extension

The Web Developer Google Chrome Extension allows developers and designers to easily audit, analyze and check their web pages for any violations of best practice design, coding, usability, and search engine optimization.

It’s a great all-in-one tool that is not heavy on browse our resources yet provides a ton of information useful to web design is also responsible for search engine optimization elements within a website or page.

 The extension installs the toolbar with multiple web developer tools.

The tool will give you indications on page size, width, and dimensions which make conflict with best practice use on multiple devices. It allows you to check embedded JavaScript and view your website through a simulation of various devices.

The extension functions well on Windows, Linux and Mac OS. In addition to coding and design issues, it will also provide insights into meta tag information, response headers, color information, and topographic information.

You can review the main features of the tool as well as it’s full capabilities on developer Chris Pedericks’ website.

No doubt there are a plethora of other high quality and useful Chrome extensions that are web designer or developer could use.

This list showcases a few of the most popular and useful tools. Do you have any recommendations for tools which you think I’m more useful or superior to the ones in this list? Let us know.

Related posts

• 8 Best Social Networking Sites cho Graphic Designers để giới thiệu Danh mục đầu tư của họ

• Spotify Web Player: Làm thế nào để Access and Use nó

• 7 Best Tools and Apps Để tạo Meme của riêng bạn cho Free

• Tại sao nó vẫn đáng sử dụng Bing cho các tìm kiếm trên web của bạn

• 8 công cụ để tạo hình ảnh có kích thước hoàn hảo cho các trang web truyền thông xã hội

• 8 Subreddits chính trị cho Calm Political Debate

• 6 công cụ chia sẻ màn hình trực tuyến miễn phí

• 6 Trang web để chơi Retro Games Online Đối Free

• Amazon Prime Worth là Cost?

• 10 tài nguyên giáo dục cho Free PDF Teaching Materials and Aids

• 8 Best Social Media Alternatives để Facebook and Twitter

• Làm thế nào để Khối Political bài viết trên Facebook

• 10 Best Sites để kiểm tra tốc độ đánh máy của bạn

• 5 công cụ tạo lưu đồ trực tuyến miễn phí tốt nhất

• 10 Best Sites cần theo dõi Cartoons Online cho Free

• 6 Best StumbleUpon Alternatives

• Funimation vs Crunchyroll: Best cho Anime Streaming là gì?

• 16 Best Sites để Find Free Audiobooks Online

• 7 trang web đến Find Public Domain Stock Footage cho các dự án Your Video

• Các công cụ tốt nhất để tự học một ngôn ngữ