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 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 của Chrome mà mọi người dùng làm công việc thiết kế nên có trong túi đồ nghề của họ.
Nội dung bài viết
1. DomFlags
DOM Flags là một tiện ích mở rộng Chrome đơ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 nhiệm 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 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.
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ố bạn đang làm việc.
2. Sizzy
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ị và sau đó chuyển đổi giữa các chế độ ngang và dọc.
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 được 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 đề “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 mở và bạn có thể xem toàn bộ mã tại đây.
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, công cụ tìm kiếm và tốc độ trang web.
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 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 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 nhiều lần.
Nếu bạn đang tìm kiếm một công cụ chất lượng tốt để sửa các liên kết trang bị hỏng, hãy đảm bảo nội dung và tiêu đề trang độc đáo và 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 cũng như cung cấp các đề xuất về cách giảm thiểu CSS của bạn và 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 cho các nhà thiết kế web.
GistBox có thể tạo GitHub Gist 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ỳ 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 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 tiện lợi và hiệu quả.
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 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 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 CSS để bạn có thể chuyển đổi hình ảnh sang CSS.
6. WhatFont
Tiện ích mở rộng Chrome 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 của riêng họ.
Tiện ích mở rộng WhatFont của Chrome 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 chỉ bằng cách vẫy chuột qua 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.
7. LightShot
LightShot là một công cụ chụp ảnh màn hình 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 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.
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 cho các hình ảnh tương tự trực tuyến.
LightShot có thể được cấu hình bằng nhiều ngôn ngữ.
Tiện ích này được viết bằng JavaScript thuần túy và cũng sẽ hoạt động trên Windows, Chromebook, Linux và Mac OS. Nó cũng có thể được truy cập như một ứ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 những 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 có thể được định cấu hình để kết nối tất cả ảnh chụp màn hình với ổ đĩa Google 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 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 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 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 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 việc đ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 cú nhấp chuột.
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 bao gồm Tiền mặt, 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, cơ sở dữ liệu chỉ mục, 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 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 về phương pháp hay nhất về thiết kế, 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 các 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 cho các yếu tố tối ưu hóa công cụ tìm kiếm 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ụ 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 tốt nhất trên nhiều thiết bị. Nó cho phép bạn kiểm tra JavaScript được nhúng và xem trang web của bạn thông qua mô phỏng 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ề thông tin thẻ meta, tiêu đề phản hồi, thông tin màu 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.
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 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 vượt trội hơn những công cụ trong danh sách này không? Hãy cho chúng tôi biết.
