Tổng hợp Chrome Extensions hữu ích cho Front-end developer

Quý PV
7 tháng trước
4 phút đọc

Bài viết tổng hợp Chrome Extensions cực hữu ích với Front-end developer.

Những extensions này trong quá trình dev front-end mình dùng rất thường xuyên nhất và thấy vô cùng hữu ích nên mình tổng hợp ở đây. Một phần mình lưu lại link sau này cài máy mình cài lại các extensions cho nhanh. Một phần mình muốn chia sẻ và mong nhận được sự chia sẻ từ phía các bạn vì mình biết đâu đó ngoài kia còn rất nhiều thứ mình cần học hỏi từ các bạn.

Dưới đây là danh sách extension hữu ích mình thường dùng

simple-debug.css

Đây là extension mình dùng nhiều nhất trong quá trình làm css. Extension này giúp mình thấy được các thẻ mình định nghĩa hiện tại đang có layout, chiều ngang, chiều rộng… như thế nào.

image

Link: HERE

Fonts Ninja

Đôi khi bạn dạo qua một trang web, bạn thấy website đó có font đẹp mà bạn không biết font đó tên gì để bạn thử áp dụng cho website của bạn. Font Ninja sẽ giúp bạn biết được website đó đang sử dụng font gì.

Bạn chỉ cần cài, rồi bấm vào biểu tượng trên thanh extension rồi đưa chuột vào chữ bạn cần xem font bạn sẽ thấy được chỗ đó sử dụng font gì, font size bao nhiều, line-height và cả màu chữ nữa.

Không chỉ đối với việc xem font của web khác. Khi bạn làm css cho website của bạn việc xem font size, line height hay copy màu chữ trên web bạn cũng là một việc rất thường xuyên xảy ra. Mình có dùng nhiều extension loại này mà mình vẫn thích thằng này nhất.

Link: HERE

ColorZilla

Extension giúp các bạn có thể chấm và xem mã màu của một vùng bất kỳ trên website. Mình hay dùng để copy mã màu trên một website nếu thấy màu đó đẹp. Thực ra thì có nhiều cách lấy mã màu của cái vùng đó.

Đôi khi view code trong css nó có thì dễ rồi. còn chuẩn nữa. Còn trường hợp gặp đó là tấm hình thì công cụ này sẽ giúp bạn lấy mã màu của điểm đó trong tấm hình.

image

Link: HERE

Designer Tools

Extension hỗ trợ bạn đo kích thước của một thẻ trên website. Ví dụ bạn muôn biết cái Header của website mình cao bao nhiêu, hay rộng bao nhiêu. Bạn sử dụng tool này bấm vào cái header thì có thể thấy được kích thước chiều cao hiện tại của thẻ đó.

image

Link: HERE

Image Downloader

Cái extension này không hẳn là dành cho front-end developer tuy nhiên mình thấy nó hữu ích. Chắc hẳn bạn đã rất nhiều lần vào các trang web và thấy những tấm hình đẹp.

Với những website dùng thẻ img để show hình thì click chuột phải vào là chúng ta có thể thấy được link hình hoặc mở hình ra tab mới. Tuy nhiên có nhiều vùng hình được hiển thị bằng thuộc tính background-image ở trong code css nên gặp khó khăn một chút trong việc lấy link hình.

image

Extension này giúp bạn lấy tự động toàn bộ hình ảnh trên trang hiện tại và bạn có thể download hoặc mở hình ảnh gốc ra tab mới một cách dễ dàng

Link: HERE