Một số tiện ích trên Chrome cho các web Developer, Designer và Tester (Phần 1)

Giới thiệu

Chrome là trình duyệt mạnh mẽ và nổi tiếng với giao diện đơn giản, light-weight cùng một loạt tiện ích giúp nâng cao hiệu năng. Nếu bạn là một Designer, Developer hay Tester, hẳn những tiện ích thú vị mà Chrome dành cho bạn dưới đây sẽ giúp cho công việc của bạn nhẹ nhàng hơn bao giờ hết.

1. CSS-Shack

Công cụ mạnh mẽ này cho phép bạn tạo ra các thiết kế, và export chúng sang file CSS để sử dụng trên website của bạn. CSS-Shack hỗ trợ layer và có nhiều tính năng thường thấy của một công cụ chỉnh sửa ảnh (photo editor).

2. Marmoset

Tiện ích thông mình này sẽ có thể giúp bạn xuất code snapshots để đưa vào demo và mockup. Bạn cũng có thể thêm theme và hiệu ứng hình ảnh cho promo và portfolio online của bạn.

3. iMacros for Chrome

Là một nhà phát triển web, chắc hẳn bạn sẽ cần phải thực hiện test các trang web của mình. Tuy nhiên việc làm này cứ lặp lại nhiều lần, do đó sẽ mang đến sự nhàm chán dành cho bạn. iMacros là một tiện ích hữu dụng của Chrome sẽ giúp bạn ghi lại và lưu thao tác mà đã thực hiện trước đó. Và giờ đây chỉ với một cú click chuột, bạn có thể test các trang web bao nhiêu lần cũng được, từ đó bạn có thể tiết kiệm thời gian và tập trung vào những vấn đề quan trọng hơn.

4. Fonr Playground

Mọi developer và designer đều sẽ thấy được sự tuyệt vời của tiện ích này. Font Playground sẽ cho phép bạn có thể trải nghiệm thỏa thích với các font hiện có và thư viện Google font mà không cần phải thực hiện bất kỳ sự thay đổi nào. Điều tuyệt vời nhất của Font Playground đó là nó có tất cả các font weight, style và text effect khác nhau để bạn có thể thoải mái lựa chọn cho trang web của mình.

5. Windows Resizer

Tiện ích của Chrome này thật sự là một công cụ hữu ích khi nó có thể resize lại cửa sổ trình duyệt, từ đó giúp bạn theo dõi design của mình chuẩn xác hơn. Bạn có thể chọn từ một danh sách các kích thước và độ phân giải chuẩn của màn hình đang có hiện nay.

6. Project Naptha

Nhờ vào công nghệ OCR thông minh, Project Naptha cho phép người dùng highlight, copy, paste, và thậm chí dịch text ra từ ảnh.

7. What Font

What Font là một tiện ích rất hữu ích của Chrome khi nó giúp các developer và designer xác định font đang được sử dụng trên một trang web. Vì vậy, nếu bạn có gặp vài font đẹp hay ho và muốn lưu lại để sử dụng cho các dự án trong tương lai, thì bạn chỉ cần rê chuột vào đoạn text để biết được font đó là gì.

8. Yslow

Công cụ này không chỉ giúp bạn kiểm tra tốc độ load của web, mà còn cho bạn biết lý do web chạy chậm, nếu có. Yslow sẽ kiểm tra đối chiếu dựa theo 23/34 quy luật do nhóm performance của Yahoo đưa ra. Đây cũng là công cụ phân tích và tối ưu web vô cùng hiệu quả nhằm giúp cải thiện hiệu suất.

9. Web Developer

Là một nhà phát triển web, có thể đôi lúc bạn sẽ tự hỏi liệu sẽ thế nào nếu không có tiện ích này. Web Developer thêm toolbar vào Chrome với nhiều công cụ lập trình web hữu ích.

10. Page Ruler

Page Ruler là công cụ đo lường chuẩn xác các thành phần trên web, sau đó tiến hành thao tác đặt thước và lấy thông tin của thành phần đó.

11. Web Developer checklist

Công cụ này sẽ cho phép bạn kiểm tra trang web của bạn về mọi mặt như: SEO, khả năng khả dụng, khả năng truy cập, tốc độ. Do đó, chẳng hạn như nếu bạn không có H1 tag trên page hoặc thiếu meta title hay meta description, thì công cụ sẽ thông báo bạn ngay. Nếu bạn nhấp chuột vào liên kết ‘more info and help’ ở cuối của tiện ích, thì bạn sẽ thấy checklist chi tiết hơn.

12. DevTools AutoSave

DevTools AutoSave cho phép bạn tự động lưu bất cứ thay đổi nào mà bạn đã thực hiện với CSS và JS thông qua môi trường Chrome Dev Tools vào file nguồn. Công cụ rất dễ thiết lập và sử dụng, đặc biệt nó sẽ giúp bạn tiết kiệm rất nhiều thời gian.

13. Instant Wireframe

Biến bất cứ web nào thành wireframe chỉ với một cú click chuột. Tiện ích của Chrome này sẽ giúp các nhà phát triển web và các designer kiểm tra các trang web, local lẫn live, qua wireframe nhanh chóng.

14. ColorZilla

Tiện ích ColorZillar là một tập hợp eyedropper (đo màu), colour picker(bảng màu), gradient generator (đổ bóng) cùng nhiều công cụ khác cho công việc design.

15. Ripple Emulator

Ripple Emulator là một công cụ giả lập môi trường mobile đa nền tảng, có thể giúp bạn test ứng dụng web trên một số thiết bị và độ phân giải màn hình khác nhau. Rippe có thể được sử dụng để kết hợp với các công cụ lập trình hiện có để thực hiện debug, kiểm tra DOM và test tự động.

16. Screen Ruler

Screen Ruler là tiện ích đơn giản của chrome hiển thị chính xác thước đo. Sử dụng Screen Ruler trong khi test, bạn có thể đo chiều dài, chiều rộng, padding của đối tượng bằng cách đơn giản là đặt chúng dựa trên tiêu chí mà mình muốn kiểm tra. Tiện ích này giúp ta log các lỗi không nhìn thấy và đảm bảo ứng dụng web sẽ hoàn hảo trên từng pixel.

17. PerfectPixel

PerfectPixel l à ưg ứn d ụng cho phép bạn đảm bảo chắc chắn rằng giao diện Website của bạn phù hợp hoàn toàn với thiết kế đến từng điểm ảnh. Bạn có thể tạo một lớp (layer) chuẩn, sau đó đặt lớp đó (ở dạng bán trong suốt) lên trên lớp giao diện cần kiểm tra để so sánh độ chính xác của mỗi pixel.

18. IE Tab

IE Tab là một trong những trình duyệt giả lập IE phổ biến nhất. Sử dụng IE Tab, bạn có thể test trang web cần kiểm tra với các phiên bản khác nhau của IE mà không cần rời khỏi trình duyệt Chrome yêu thích của mình. Tuy nhiên tiện ích này mới chỉ hỗ trợ trên hệ điều hành Windows. Trên Mac, ChromeBook hoặc Linux platforms chúng ta có tiện ích thay thế: Cloud Internet Explorer by Ericom hoặc Cloud Internet Explorer by IE-On-Chrome.

19. Grammarly

Grammarly là tiện ích quá tuyệt giúp bạn bất cứ khi nào bạn viết mail, bình luận hoặc blog post online với vai trò của một người hiệu chỉnh. Khi bạn viết, Grammarly kiểm tra chính tả và lỗi ngữ pháp, highlight chúng mà không cần phải thoát trình duyệt. Đối với kiểm thử, Grammarly là tiện ích miễn phí mang lại khả năng kiểm tra ngữ pháp chính xác cho chính trình duyệt Chrome của bạn. google-chrome-wallpaper-hd1.

20. Firebug Lite

Firebug Lite là một tiện ích khác cho việc kiểm thử. Nó cung cấp cái nhìn trực quan cho các phần tử HTML, DOM, và mô hình dưới dạng khối hộp. Bạn có thể sử dụng nó để kiểm tra các thành phần HTML tại các nút bấm khi click.