Các Chrome Extensions cần thiết cho Front-end Developer

04/06/2019

Xin chào các bạn, Master frontEnd xin tổng hợp các Chrome Extensions cần thiết cho Front-end Developer như sau:

1. Whatfont 

Tiện ích này cho phép bạn check nhanh xem trang web đang xem xài font gì. Kích cỡ chữ là bao nhiêu, màu sắc như thế nào,....

Cách sử dụng extensions như sau:

  • Vào trang web cần check font
  • Click vào biểu tượng whatfont vừa cài trên trình duyệt
  • Click vào đoạn text cần check font

Hình ảnh demo sử dụng whatfont :

chrome extensions whatfont

Link cài đặt: whatfont

2. Page Ruler Redux

Tiện ích tạo cây thước dùng để do chiều cao, chiều rộng bất kì chỗ nào bạn muốn trên website.

Cách sử dụng Page Ruler Redux:

  • Click vào biểu tượng cây thước màu vàng ở góc phải trình duyệt
  • Dùng chuột kéo tại vùng muốn đo
  • Kết quả nằm trên thanh màu đen ở góc trên màn hình: chiều rộng, chiều cao, vị trí đó cách lề trái, phải, trên, dưới,...

Chrome extensions page ruler redux

Link cài đặt : Page ruler redux

3. PrettyPrint

Tiện ích này dùng format định dạng cú pháp Javascript/ CSS.

Tiện ích này chỉ cần cài đặt và khi ta mở các file javascript hoặc css đã bị nén thì nó sẽ giải nén cho chúng ta.

Link cài đặt: PrettyPrint

4. JSON Viewer

Tiện ích dùng để parse file Json.

Link cài đặt: Json Viewer

5. Live editor for CSS, Less & Sass - Magic CSS

Tiện ích cho phép bạn viết CSS và xem nó thay đổi trực tiếp với nhiều tính năng như sau:

  • Chọn cách viết CSS thuần, Less hoặc SASS
  • Nén hoặc giải nén CSS
  • Autocomplete CSS.
  • Color Picker
  • Và còn nhiều tính năng hấp dẫn khác...

Live editor for CSS, Less & Sass - Magic CSS

Link cài đặt: Magic CSS

6. Full Page Screen Capture

Tiện ích chụp full màn hình trang website.

Link cài đặt: Full Page Screen Capture

7. Image Size Info

Tiện ích xem thông tin hình ảnh: Đường dẫn hình ảnh, kích thước gốc, kích thước đang được hiển thị và dung lượng của file hình.

Sau khi cài đặt xong, Tại vị trí hình ảnh cần check ta chỉ cần click chuột phải và chọn "View info" là được.

Image size info

Link cài đặt: Image Size Info

Back to top