Tiện ích mở rộng CSS của Chrome

Tôi chưa từng nghe về hầu hết các tiện ích mở rộng của Chrome mà Sarem Gizaw liệt kê là mục yêu thích năm 2021. Dưới đây là những điểm hấp dẫn của tôi về tất cả chúng, ngoại trừ những cái cụ thể về học tập ảo không liên quan lắm đến tôi

• LoomOh thật thú vị khi nó ghi lại màn hình và máy ảnh của bạn, khuyến khích bạn thực hiện các hướng dẫn cá nhân nhỏ về một thứ cho ai đó. Tôi thực sự đã có một tác giả khách mời sử dụng điều này để trình bày một ý tưởng và nó vừa vượt trội theo một cách tốt, vừa có vẻ không quá khó thực hiện. Tôi thích cách nó là một ứng dụng trình duyệt, nghĩa là thứ gì đó như Chromebook có thể sử dụng nó mặc dù nó giống như một ứng dụng gốc
• MoteTương tự về tinh thần với Loom—để lại phản hồi bằng giọng nói của bạn thay vì viết tay. Đây rõ ràng là một cách cá nhân hơn nhiều để làm mọi việc. Tôi tự hỏi liệu nó có lớn trong không gian giáo dục nơi kết nối học sinh/giáo viên đó sẽ được củng cố bởi điều này không
• Wordtune Trông giống như một đối thủ cạnh tranh với Grammarly. Tôi thích xem kiểu cạnh tranh đó. Điều đó nói rằng, tôi nghĩ Grammarly là tốt, mặc dù đôi khi hơi nặng tay. Thật tuyệt khi thấy họ bị đẩy bởi một người chơi khác trong cùng một không gian
• ForestTôi hoài nghi về các ứng dụng năng suất cuối cùng lại giống như một ứng dụng khác mà tôi cần sử dụng và tìm hiểu. Nhưng có lẽ nó đáng giá nếu vấn đề là nó giúp bạn tiếp tục công việc và tránh xa các ứng dụng gây mất tập trung?
• Dark ReaderĐiều này buộc chế độ tối trên các trang web không có chế độ này. Tôi đã nghe nói rằng nó làm một công việc khá tốt
• Tab Manager PlusTôi cũng có lỗi như bất kỳ ai vì đã mở quá nhiều tab… mọi lúc. Nhưng giờ đây, Chrome đã có các nhóm tab nguyên bản (cũng như "ghim"), tôi chỉ cần làm theo điều đó
• NimbusĐiều thú vị là đây là một danh mục hoàn toàn khác mà Loom. Tôi đoán đó là về ảnh chụp màn hình hơn là video. Lưu ý rằng bạn không cần plugin trình duyệt để thực hiện ảnh chụp màn hình có độ dài đầy đủ—trong DevTools, bạn có thể thực hiện CMD+______1+P, sau đó tìm kiếm “Chụp ảnh chụp màn hình ở kích thước đầy đủ. ” Tôi thực sự sử dụng nó khá nhiều. Đối với các ảnh chụp màn hình khác, tôi rất thích Cleanshot
• Bút stylusTôi thích điều này tồn tại và nó vẫn đang được phát triển tích cực (có bản beta). Có thể thêm một số CSS bổ sung vào các trang web theo sở thích của riêng bạn và duy trì nó là điều cực kỳ tuyệt vời và cộng đồng các kiểu do người dùng tạo cho các trang web khác thậm chí còn tuyệt vời hơn
• RakutenĐây là một trong những thứ tự động áp dụng phiếu giảm giá trong quá trình thanh toán cho các cửa hàng Thương mại điện tử. Bỏ qua tôi vì một số lý do, đặc biệt là ý tưởng “Hoàn lại tiền”. Tôi nghĩ rằng nếu họ gửi tiền cho bạn, thì đó là vì họ đang kiếm tiền từ bạn, nghĩa là từ các mối quan hệ đối tác liên kết ẩn cảm hoặc bằng cách bán dữ liệu mua hàng và thông tin cá nhân của bạn

Các tiện ích mở rộng của trình duyệt đã đi một chặng đường dài để tương thích với nhiều trình duyệt, vì vậy tôi nghĩ rằng rất nhiều tiện ích mở rộng trong số này hiện có sẵn cho Safari và Firefox — hoặc ít nhất có thể không có khối lượng công việc khổng lồ nếu các tác giả cảm thấy muốn làm điều đó

Đáng chú ý là không có plugin chặn quảng cáo nào trong danh sách. Không có gì ngạc nhiên lớn ở đó, mặc dù tôi chắc chắn rằng chúng là một trong những ứng dụng được tải xuống và sử dụng nhiều nhất. Tôi sử dụng Ghostery, nhưng tôi đã không đánh giá lại cảnh quan ở đó trong một thời gian. Tôi thích cách Ghostery giúp tôi dễ dàng bật và tắt các tập lệnh riêng lẻ, cả trên các trang web riêng lẻ và rộng rãi trên tất cả các trang web. Điều đó có nghĩa là tôi có thể bật BuySellAds (điều mà ngay cả Adblock Plus cũng làm theo mặc định) và tập lệnh Google Analytics, nhưng tắt trình kiểm tra A/B hoặc mạng quảng cáo thô

Mặc dù Công cụ dành cho nhà phát triển của Chrome cung cấp cho bạn nhiều tiện ích đủ để đáp ứng hầu hết các yêu cầu về thiết kế và phát triển của bạn, nhưng bằng cách thêm các tiện ích mở rộng, bạn có thể mở rộng chức năng của trình duyệt hơn nữa với các tiện ích mở rộng miễn phí sử dụng

Tùy thuộc vào nhu cầu của bạn và bằng cách chọn tiện ích mở rộng hoàn hảo, bạn có thể dễ dàng tạo môi trường làm việc được cá nhân hóa giúp cải thiện đáng kể năng suất của bạn

Mục lục

• Tiện ích mở rộng giao diện người dùng
• Biên tập viên trực tiếp
• Trình xác thực & Hiệu suất
• Phần mở rộng đo lường
• Công cụ màu
• Loại sân chơi
• Tiện ích mở rộng tiện ích hữu ích

Hộp công cụ thiết kế web

Tải xuống không giới hạn. Mẫu HTML & Bootstrap, Chủ đề & Plugin WordPress, v.v.

Mẫu HTML

Hơn 3.200 mẫu

Mẫu Bootstrap

Hơn 2.000 mẫu

Mẫu bảng điều khiển

Hơn 240 mẫu

chủ đề WordPress

1.450+ Chủ đề

Mẫu bản tin

Hơn 270 mẫu

Phông chữ web

Hơn 13.500 phông chữ

Bắt đầu tải xuống ngay bây giờ

Tiện ích mở rộng Frontend hữu ích của Chrome

MagicCSS

MagiCSS là một tiện ích mở rộng trình chỉnh sửa CSS trực tiếp, với trình chỉnh sửa sẵn có, cũng sẽ làm đẹp và thu nhỏ CSS của bạn. Nó cũng có thể tạo GitHub Gist

đào CSS

CSS Dig tìm và nhóm các biểu định kiểu và khối kiểu trên hầu hết các trang web, giúp bạn dễ dàng phân tích mã và lập kế hoạch tái cấu trúc

Trình xem CSS

Có nhiều công cụ và tiện ích mở rộng khác sẽ thực hiện tác vụ đơn giản mà CSSViewer thực hiện. Có lẽ họ cũng sẽ làm điều đó tốt hơn. Nhưng sẽ không có bộ sưu tập tiện ích mở rộng nào của Chrome hoàn chỉnh nếu không có nó. Rất dễ sử dụng, tất cả những gì bạn phải làm là nhấp vào biểu tượng trên thanh công cụ và di chuột qua bất kỳ thành phần nào bạn muốn kiểm tra

CSS-Shack

CSS-Shack là một tiện ích mở rộng cho phép bạn tạo các kiểu lớp (giống như bạn làm với các ứng dụng chỉnh sửa hình ảnh) và xuất chúng thành một tệp CSS duy nhất

Trình tạo CSS3

Trình tạo CSS3, như tên suugests, sẽ tạo tất cả mã bạn cần cho CSS của mình

Trình chỉnh sửa hình dạng CSS

CSS Shapes Editor là tiện ích mở rộng DevTools của Chrome để chỉnh sửa trực tiếp các giá trị thuộc tính CSS Shapes

Tiện ích mở rộng trình chỉnh sửa trực tiếp

Trình chỉnh sửa kiểu WordPress

Với Trình chỉnh sửa kiểu WordPress, bạn có thể kiểm tra biểu định kiểu WordPress của mình và thực hiện các chỉnh sửa trực tiếp đối với CSS của chủ đề của bạn

Trình xác thực & Tiện ích mở rộng hiệu suất

bản đồ hoàn hảo

Perfmap là một tiện ích mở rộng sẽ tạo bản đồ nhiệt hiệu suất cho giao diện người dùng của trang web của bạn để kiểm tra thời gian của các tài nguyên được tải trong trình duyệt bằng cách sử dụng API Thời gian tài nguyên

hiệu lực

Tính hợp lệ là một tiện ích mở rộng sẽ giúp bạn xác thực bất kỳ trang web nào. Tiện ích mở rộng sẽ hiển thị số lượng lỗi trong mẹo công cụ và có thể xem chi tiết trong tab bảng điều khiển

Thanh tra trực quan

Trình kiểm tra trực quan là một tiện ích mở rộng của Chrome dành cho các nhà thiết kế để thực hiện các chỉnh sửa tạm thời trên các trang web mà không cần viết mã

Danh sách kiểm tra nhà phát triển web

Danh sách kiểm tra dành cho nhà phát triển web là tiện ích mở rộng bắt buộc phải có để kiểm tra bất kỳ trang web nào để tìm lỗi và vi phạm các phương pháp hay nhất phổ biến

Bootlint trang này

Tiện ích mở rộng này sẽ thêm nút Bootlint This Page vào Chrome để kiểm tra bất kỳ trang/trang Bootstrap nào để tìm các lỗi phổ biến. Các lỗi được hiển thị trong cửa sổ Bảng điều khiển JavaScript

Kiểm tra liên kết của tôi

Kiểm tra Liên kết của tôi sẽ quét bất kỳ trang web cụ thể nào và sẽ đánh dấu cả liên kết hợp lệ (màu xanh lục) và liên kết bị hỏng (màu đỏ). Không ai thích liên kết bị hỏng

Phần mở rộng đo lường

kích thước

Kích thước là một công cụ đơn giản nhưng cực kỳ hữu ích sẽ đo chiều rộng và chiều cao màn hình cho bạn

Công cụ màu

MàuZilla

Ban đầu được phát triển cho Firefox, ColorZilla bổ sung vô số công cụ màu, chẳng hạn như ống nhỏ mắt, bộ chọn màu, trình xem bảng màu và trình tạo độ dốc, cho Chrome

Thẻ màu

Được tạo bởi Color Hunt, Color Tab là một tiện ích mở rộng cảm hứng màu sắc sẽ cung cấp cho bạn bảng màu mới tuyệt đẹp mỗi khi bạn mở một tab mới

Nhập Sân chơi & Trình kiểm tra phông chữ

Ninja phông chữ

Fontface Ninja là một tiện ích mở rộng tiện dụng sẽ xác định bất kỳ phông chữ nào, đồng thời cung cấp cho bạn kích thước và khoảng cách dòng từ bất kỳ trang web nào. Sau đó, bạn có thể kiểm tra các phông chữ được phát hiện

LoạiWonder

TypeWonder cho phép bạn kiểm tra phông chữ web trên bất kỳ trang web nào. Nhập URL trang web và xem trước các phông chữ ngay lập tức

Tiện ích mở rộng tiện ích hữu ích

45to75

Để đảm bảo rằng văn bản của bạn vẫn có thể đọc được trên mọi kích thước thiết bị, 45to75 sẽ đếm số lượng ký tự, đảm bảo chúng nằm trong khoảng từ 45 đến 75 ký tự để giúp bạn tối ưu hóa độ dài dòng

PerfectPixel

PerfectPixel là một tiện ích mở rộng cho phép bạn đặt lớp phủ hình ảnh bán trong suốt lên trên cùng của HTML đã phát triển, cho phép bạn thực hiện so sánh từng pixel giữa chúng

ZenHub

ZenHub là một tiện ích mở rộng quản lý dự án cho GitHub. Nó sẽ thêm các tính năng tiết kiệm thời gian, như bảng tác vụ kéo thả và danh sách việc cần làm, để giúp cải thiện năng suất GitHub của bạn

Trình chỉnh sửa Markdown tối giản

Tiện ích mở rộng của Chrome Minimalist Markdown Editor cho phép bạn xem trước cú pháp Markdown khi bạn nhập. Bạn cũng có thể nhanh chóng chuyển đổi Markdown thành HTML

fb-flo

Được phát triển bởi Facebook, fb-flo là một tiện ích mở rộng của Chrome cho phép bạn chỉnh sửa các ứng dụng đang chạy mà không phải tải lại. Bạn có thể trực tiếp chỉnh sửa JS, CSS, hình ảnh hoặc bất kỳ tài nguyên tĩnh nào

Nhà phát triển web

Nếu bạn hiện không sử dụng Nhà phát triển web, thì tại sao không? . Nó bổ sung một loạt các công cụ siêu hữu ích cho trình duyệt mà mọi nhà thiết kế và phát triển web đều cần, và một loạt các công cụ mà bạn có thể thậm chí không biết là mình cần

Quản trị viên MySQL

MySQL Admin là một tiện ích mở rộng mạnh mẽ của Chrome để giúp bạn quản lý cơ sở dữ liệu MySQL dễ dàng hơn nhiều

Đã kết thúc

Để tận dụng tối đa Chrome, bạn có thể xem Mẹo dành cho nhà phát triển, đó là một bộ sưu tập các mẹo và thủ thuật cần thiết của Công cụ dành cho nhà phát triển Chrome

Làm cách nào để thêm CSS vào Chrome?

Làm cách nào để sử dụng tiện ích mở rộng trình xem CSS?

Tại sao tệp CSS không hoạt động trong Chrome?