10 công cụ và tiện ích mở rộng hàng đầu của Chrome dành cho nhà thiết kế web


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 toán các dự án phát triển web của bạn, Chromeextension 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ố sẽ lập luận cần thiết - công cụ và tiện ích mở rộng Chrome mà mọi người dùng thực hiện công việc thiết kế nên có trong túi kit của họ.

1. DomFlags

DOM Flag là một đơn giản để sử dụng Chrome extensionthat 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 nhiệm vụ của các yếu tố phong cách.

Sử dụng các phím tắt cho mỗi yếu tố bạn có thể đánh dấu điều hướng của bạn.

Chúng tôi đã trải qua tất cả những khó khăn khi xem xét các yếu tố rất chi tiết và dễ bị lạc.

DOM Flag cho phép bạn theo dõi các yếu tố kiểu dáng bao gồm một tính năng để tự động kiểm tra các thành phần. Điều này, inturn, sẽ giúp tăng tốc quá trình thực hiện và triển khai DevTools.

DOM Flag cho phép bạn theo dõi các thay đổi. Hãy tập trung vào các yếu tố bạn làm việc với.

2. Sizzy

Sizzy mang đến 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 của bất kỳ số lượng thiết bị và kích thước màn hình. Thậm chí, bạn có thể mô phỏng bàn phím thiết bị và sau đó chuyển đổi giữa chế độ chân dung và chân dung.

Cài đặt tiện ích mở rộng Chrome sẽ thêm một nút vào thanh công cụ của bạn, khi nhấp vào sẽ mở URL hiện tại trong nền tảng Sizzy. Tiện ích mở rộng sẽ chặn tất cả các tiêu đề của1'vì vậy bạn có thể xem bất kỳ trang web trực tuyến nào.

Sizzy là một dự án nguồn mở và bạn có thể thấy toàn bộ mã đây.

3. Checkbot

Checkbot có thể kiểm tra trang web để bảo mật và cũng kiểm tra tốc độ tải trang web của bạn. Nó sẽ cung cấp cho các nhà thiết kế một phương tiện để xác định các lỗi điển hình và khuyến nghị cải thiện bảo mật trang web, công cụ tìm kiếm và tốc độ trang web.

Sử dụng hơn 50 số liệu thực hành tốt nhất, sẽ kiểm tra một trang web để SEO thực hành tốt nhất, liên kết bị hỏng, nội dung trùng lặp andmore. Công cụ này cũng sẽ xác thực CSS, JS và HTML. Nếu bạn đang tìm kiếm một công cụ chất lượng tốt sẽ sửa các liên kết trang bị hỏng, hãy đảm bảo các tiêu đề trang và nội dung độc đáo và chuỗi loại bỏ gián tiếp, 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 của bạn như cũng như cung cấp các đề xuất về cách giảm thiểu bộ nhớ đệm trình duyệt CSS và độ phủ của bạn.

4. GistBox Clip

GistBox là một trong những Chromeextensions hữu ích nhất cho các nhà thiết kế web.

GistBox có thể tạo GitHub từ bất kỳ khối mã nào trên trang web bạn đang xem.

Ở góc trên cùng bên phải của bất kỳ codeblock nào, bạn sẽ thấy một nút nhỏ, khi 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 với mouseclick đúng và lưu các khối mã để kiểm tra và sử dụng 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 sử dụng chúng hoặc phân loại chúng sử dụng. Điều này làm cho nó trở thành một công cụ mở rộng Chrome tiện lợi và hiệu quả.

5. ColorZilla

ColorZilla là một điều khó tin Chromeextension hữu ích để thu thập mã hex có thể được gắn thẻ, gắn nhãn và phân loại cho các dự án thiết kế web riêng lẻ.

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

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 bạn đang sử dụng colorconsistently trong thiết kế và phát triển web.

ColorZilla cũng hoạt động như một công cụ phân tích màu và CSS trình chỉnh sửa độ dốc để bạn có thể chuyển đổi hình ảnh sang CSS.

6. WhatFont

Tiện ích mở rộng 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 phông chữ ưa thích của họ Và kết hợp với họ dự án thiết kế web riêng của họ.

Tiện ích mở rộng WhatFont Chrome cho phép các nhà phát triển phân tích và nhận dạng 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ào đó 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 mà tiện ích mở rộng cũng sẽ xác định dịch vụ được sử dụng để phục vụ Các trang đã đi phông chữ và sẽ hỗ trợ Google Font API và Typekit.

7. LightShot

LightShot là một cách nhanh chóng Công cụ chụp màn hình 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 nó lên hoặc tải nó đến đích của bên thứ ba.

Ảnh chụp màn hình được chụp bởi LightShot có thể được sử dụng và chia sẻ trên phương tiện truyền thông xã hội hoặc được in.

Bạn có thể chú thích và thêm văn bản, mũi tên và chỉnh sửa phần được 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 hình ảnh đầy đủ của Google cho các hình ảnh tương tự.

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

Tiện ích mở rộng được viết bằng JavaScript thuần túy và cũng sẽ hoạt động cho Windows, Chromebook, Linux và Mac OS. Nó cũng có thể được truy cập dưới dạng Ứng dụng máy tính để bàn 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, Ảnh chụp màn hình tuyệt vời là tiện ích mở rộng chụp ảnh màn hình.

Tuy nhiên, nó khác với Lightshot, tuy nhiên, theo một cách khác. Ảnh chụp màn hình tuyệt vời 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 của bạn.

Nó cho phép bạn chụp ảnh 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 có dấu phẩy cho phép cắt xén và ghi hình tất cả trong phần mở rộng .. hoặc với việc sử dụng các ứng dụng AwesomeSc Muff bổ sung

Bạn cũng có thể mở rộng các tính năng của nó bằng cách cài đặt ứng dụngChrom cho máy tính để bàn. Tiện ích mở rộng cũng cho phép quay video và chia sẻ để bạn có thể cộng tác với các nhà thiết kế nhà phát triển 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 yếu tố màu xanh hoặc xóa mà bạn không muốn hiển thị cho người khác.

9. Xóa bộ nhớ cache

Xóa bộ nhớ cache Tiện ích mở rộng của Chrome là một công cụ andsimple nhanh 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 yourbrowser để xóa một vài thành phần trang đơn giản.

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

Đôi khi bạn cần xóa cookie bộ nhớ cache của mình, nhưng điều hướng đến cài đặt Chrome là tẻ nhạt. Clear Cache cho phép bạn truy xuất bộ nhớ cache cũng như cookie toàn cầu hoặc cục bộ 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 bạn muốn xóa khỏi trang. Các biến bao gồm Tiền mặt, tải xuống, tất cả các hệ thống, dữ liệu biểu mẫu, tại Tiền mặt, cơ sở dữ liệu chỉ mục, dữ liệu plugin, mật khẩu và hơn thế nữa.

10. Nhà phát triển web Google ChromeExtension

Nhà phát triển web Google Chrome Mở rộng 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ó vi phạm nào về thiết kế thực hành tốt nhất, mã hóa, khả năng sử dụng và tối ưu hóa tìm kiếm hay không.

Đây là một công cụ đa năng tuyệt vời. không phải là duyệt tài nguyên của chúng tôi mà còn cung cấp rất nhiều thông tin hữu ích cho người thiết kế web cũng chịu trách nhiệm cho các yếu tố tối ưu hóa công cụ tìm kiếm trong trang web của trang web.

Theextension 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ụ 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 thực tiễn tốt nhất sử dụng các thiết bị trên máy. Nó cho phép bạn kiểm tra JavaScript nhúng và xem trang web của bạn thông qua một mô phỏng của nhiều thiết bị khác nhau.

Các chức năng 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 về thông tin thẻ meta, tiêu đề phản hồi, thông tin màu sắc và thông tin bản đồ.

Bạn có thể xem lại các tính năng chính của công cụ cũng như khả năng đầy đủ của nhà phát triển Trang web của Chris Pedericks.

Không còn 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 web có thể sử dụng.

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

Bài 27 phần 2 - Tiện ích mở rộng quảng cáo chú thích

bài viết liên quan:


27.03.2019