Trong bài viết này tôi sẽ giới thiệu một số tiện ích Chrome hữu ích giúp cho lập trình viên FrontEnd tiện lợi hơn trong quá trình debug và viết code
1. WhatFont
Thông thường khi vào một website có font chữ đẹp, ta thường phải view-sources hoặc inspect để tìm đoạn CSS tương ứng của nó. Với tiện ích này, bạn có thể dễ dàng biết được phần tử đang được sử dụng font chữ nào với thao tác cực kì đơn giản đó là hover chuột lên trên phần tử.
2. Tape
Tape là một công cụ để phát triển để phát triển một website perfect pixel. Nó cho phép bạn đặt các đường kẻ vào trong nội dung trang, giúp bạn dễ dàng đo được kích thước của các phần tử.
3. Tampermonkey
Đây là một tiện ích rất hay giúp bạn dễ dàng chèn các đoạn code JavaScript của mình vào một trang web được chỉ định. Thuận tiện cho quá trình debug hoặc thêm vào các 'tính năng mới' cho website
4. SnappySnippet
Tiện ích này giúp bạn nhanh chóng bóc tách được đoạn CSS của phần tử mà không cần mất quá nhiều thời gian cho việc inspect
5. Save All Resources
Thông thường để lấy được tài nguyên của website (ảnh, font, css, js,...) ta thường view-sources hoặc tìm trong tab Network của cửa sổ debug. Với tiện ích này bạn có thể dễ dàng lấy được toàn bộ tài nguyên được request của page đó chỉ với vài cú click chuột
6. Responsive Web Design Tester
Với tiện ích này lập trình viên front-end có thể dễ dàng xem được dạng hiển thị của website theo các kích thước màn hình khác nhau với độ chính xác khá cao
7. PerfectPixel
Tiện ích mở rộng này giúp bạn chỉnh sửa giao diện trang web chính xác từng pixel bằng việc cho phép bạn đặt một ảnh overlay 50% trên đầu trang HTML và thực hiện so sánh pixel giữa chúng với nhau.
8. Page Ruler
Tiện ích này giúp bạn có được các kích thước ảnh, xác định vị trí và dễ dàng đo được kích thước của các thành phần trên bất kì trang web nào. Công cụ này đặc biệt thích hợp khi bạn thực hiện kiểm thử giao diện người dùng (UI Testing).
9. Live editor for CSS, Less & Sass - Magic CSS
Tiện ích này cho phép bạn chèn style css trực tiếp trên trang, bạn có thể sử dụng CSS/LESS/SCSS và complie trực tiếp
10. JSON Viewer
Kết luận
Trên đây là một vài tiện ích Chrome tôi đang sử dụng để phục vụ cho quá trình code & debug. Nếu bạn có tiện ích nào hay, đừng ngần ngại chia sẻ cho cộng đồng Front-End nhé.
Xin cảm ơn !
1. Không vi phạm luật pháp nước CHXHCN Việt Nam
2. Không vi phạm thuần phong mỹ tục Việt Nam
3. Không bàn luận vấn đề liên quan đến tôn giáo, chính trị
4. Không đả kích, chửi bới hay đưa ra những lời nói không phù hợp với mục tiêu của website
5. Không bình luận với mục đích quảng cáo, trao đổi, mua bán
6. Khuyến khích sử dụng Tiếng Việt có dấu, hạn chế sử dụng tiếng lóng, viết tắt
7. Khi cần sự trợ giúp, vui lòng miêu tả chi tiết lỗi và để lại link đính kèm, tránh nói chung chung gây mất thời gian cho đôi bên