30 tiện ích Chrome cho designer và dev

5/5 - (1 vote)

Với tốc độ ưu việt và nhiều developer tool built-in, Chrome dần phổ biến hơn trong giới designer và developer bên cạnh Firefox. Và cũng chính vì lý do này, số lượng tiện ích mở rộng cho Chrome đang gia tăng ngày càng chóng mặt.

1. CSS-Shack

Với tiện ích này, ta có thể tạo layer style và suất thành file CSS

Công cụ mạnh mẽ này cho phép bạn design thoải mái, và suất thành file CSS dùng được ngay cho web. CSS shack có hỗ trợ layer và hầu hết các tính năng thường thấy của một photo editor.

2. Marmoset

Tạo code snapshots nhanh chóng với Marnoset

Với tiện ích này, bạn có thể xuất code snapshots đẹp lung linh để đưa vào demo và mockup. Bạn cũng có thể thêm theme và nhiều hiệu ứng hình ảnh cho promo và portfolio online.

3. iMacros for Chrome

iMacros Chrome ghi chép và lưu trữ thao tác

Với một web developer, công việc test có thể sẽ lặp đi lặp lại rất nhàm chán. Đây chính là cứu tinh của bạn, iMacros sẽ ghi lại và lưu thao tác của bạn. Những công việc lặp lại dài lê thê giờ đây chỉ cần được thực hiện một lần duy nhất. Chỉ với một cú click chuột, bạn có thể test page bao nhiêu lần cũng được.

4. Font Playground

Font Playground cho phép test thử font trực tiếp lên web đang chạy

Một tiện ích hoàn hảo cho (web) designer và developer. Với Font Playground, bạn có thể “đùa nghịch” thỏa thích với các font bạn hiện có và thư viện Google font đồ sộ. Font sẽ được áp thẳng lên web mà không cần phải thao tác phức tạp. Không chỉ đơn thuần áp font, tiện ích còn cho phép bạn thử nghiệm thay đổi weight, style và effect tùy thích.

5. Window Resizer

re-size cửa sổ trình duyệt thành nhiều độ phân giải khác nhau

Tiện ích làm việc đúng như tên, 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 chuẩn màn hình phổ biến có sẵn, hoặc theo thiết lập tùy chỉnh.

6. Project Naptha

Project Naptha giúp bạn hightlight, copy, edit, và dịch text từ bất cứ hình ảnh nào

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

170102-post-fb05
Công thức tối ưu PHP & PHP7 hàng đầu. Đăng kí ngay!

7. What Font

Web này dùng font gì vậy? Tiện ích What Font có thể cho bạn biết đấy

What Font giúp deverloper và designer xác định font dùng cho một web nhất định. Vì vậy, nếu bạn hay thi thoảng bắt gặp vài font đẹp hay ho mà muốn “tái sử dụng”, bạn chỉ cần hơ chuột vào text để biết được.

8. Yslow

YSlow sẽ cho bạn biết lý do vì sao web của bạn lại chạy chậm

Công cụ không chỉ kiểm tra tốc độ load của web, mà còn cho biết lý do web chạy chậm, nếu có. Yslow sẽ kiểm tra đối chiếu với 23 trong số 34 quy luật của Yahoo’s performance team. Đây cũng là công cụ phân tích và tối ưu web vô cùng hiệu quả.

9. Web Developer

Web Developer cung cấp một loại công cụ dành riêng cho dev

“Không dùng cái này thì dev sống sao đây.” Tiện ích thêm hẳn một toolbar vào Chrom với nhiều công cụ lập trình mạnh mẽ.

10. Page Ruler

Xác địch kích thước và vị trí chuẩn từng pixel

Page ruler là công cụ đo lường các thành phần trên web “chuẩn từng li”, bạn chỉ việc đặt thước và lấy thông tin của thành phần đó.

11. Web Developer checklist

Xử lý vấn đề nhanh chóng và hiệu quả hơn

Công cụ này sẽ kiểm tra web của bạn từ trên xuống dưới (tất nhiên chỉ khi web của bạn là theo chuẩn) về mọi mặt: SEO, khả năng khả dụng, khả năng truy cập, tốc độ,… Ví dụ như, nếu bạn thiếu tag H1 trên page hoặc page thiếu meta title hay meta description, công cụ sẽ thông báo bạn ngay. Nếu bạn click vào link  ‘more info and help’ ở cuối tiện ích, bạn sẽ thấy checklist chi tiết hơn.

12. DevTools Autosave

Tự động lưu thay đổi của CSS và JS của trang lên thẳng file nguồn

DevTools AutoSave cho phép tự động lưu bất cứ thay đổi của trang 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 đặt và sử dụng.

13. Instant Wireframe

Phủ wireframe trực tiếp lên web

Biến bất cứ web nào thành wireframe chỉ với một cú click chuột. Bạn giờ đây có thể kiểm tra web, local lẫn live, qua wireframe nhanh chóng.

14. ColorZilla

Đo màu ngay và luôn với ColorZillar

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 cho phép debug, kiểm tra DOM và test tự động

Ripple Emulator là một công cụ giả lập môi trường mobile đa nền tảng giúp test ứng dụng web trên một số thiết bị và màn hình hiển thị. Rippe có thể 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.

170102-post-fb05
Công thức tối ưu PHP & PHP7 hàng đầu. Đăng kí ngay!

16. Streak

Biến đoạn trao đổi email thành dạng ticket dễ theo dõi

Streak là công cụ quản lý CRM mạnh mẽ có hỗ trợ email trong Gmail. Công cụ biến một hoặc một loạt email thành ticket dễ theo dõi, quãn lý và chia sẻ.

17. Search Stackoverflow

Giải thích thắc mắc của bạn một cách nhanh chóng

Nếu đã là web developer, chắc hẳn bạn đã nghe qua về Stack Overflow, địa chỉ phải đến khi vấp phải bất cứ vấn đề lập trình nào. Nếu chưa nghe qua, bạn nên vào xem thử ngay đi, cộng đồng Stack Overflow đang phát triển mạnh mẽ với một loạt chủ đề đa dạng từ C#, Java đến PHP và jQuery. Tiện ích này sẽ thêm một search box trực tiếp lên trình duyệt giúp bạn tìm kiếm kho kiến thức khổng lồ của Stack Overflow mọi lúc, mọi nơi.

18. PHP Ninja Manual

Kho tài liệu PHP 5.5 ngay trên trình duyệt

Việc nhớ hết tất cả các hàm gần như là không thể, và đây là công cụ giúp bạn giải quyết vấn đề này. The PHP Ninja Manual là kho tài liệu PHP 5.5 kèm theo ví dụ (của 8 loại ngôn ngữ) ngay trên trình duyệt.

19. PerfectPixel

Tiện ích đảm bảo trang web của bạn theo đúng design đến từng pixel

Design rất bực mình khi thấy sản phẩm sau code lại không đẹp “choáng váng” như thiết kế của mình. Perfect pixel thực sự là công cụ hỗ trợ hay cho các designer đang phát triển web đúng theo như thiết kế. Tiện ích sẽ đặt một hình ảnh mờ chồng lên web như hình, đồng thời so sánh giữa hai ảnh để đảm bảo độ chính xác đến từng pixel.

20. Code Cola

edit CSS tại chỗ

Bên cạnh khả năng hiển thị mã nguồn của đối tượng, công cụ còn một CSS editor cho phép bạn chỉnh sửa CSS style và xem kết quả tại chỗ.

21. Chrome Sniffer

Kiểm tra, xác địch thư viện JavaScript và ứng dụng web

Tiện ích này giúp kiểm tra, xác địch thư viện JavaScript và ứng dụng đang chạy trên web. Cách sử dụng không thể dễ hơn được nữa: một icon sẽ xuất hiện trên thanh địa chỉ cho thấy phiên bản CMS và framework được sử dụng.

22. User Agent Switcher

trang web của bạn như thế nào trên các thiết bị khác nhau?

Một công cụ hay nếu muốn thấy giao diện của web trên nhiều thiết bị truy cập khác nhau như: iPad, iPhone, Android,…

23. IE tab

Kiểm tra web với các phiên bản IE khác nhau

IE tab là một trong những giả lập IE hàng đầu hiện nay. Cộng cụ giúp developer test page cho nhiều phiên bản IE trực tiếp trên trình duyệt Chrome.

24. PicMonkey

Tải tất cả hình ảnh trên trang với một cú click chuột

Một tiện ích photor editor cho phép bạn chỉnh sửa hành ảnh và screenshots của web. Nhưng đây chưa phải là tính năng làm ứng dụng nổi tiếng. PicMonkey cho phép bạn tải tất cả hình ảnh và screenshot của cả một trang web trong một cú click chuột. Khi đã lựa chọn một hình ảnh, bạn có thể điều chỉnh tùy thích từ thêm hiệu ứng đến phơi sáng,…

170102-post-fb05
Công thức tối ưu PHP & PHP7 hàng đầu. Đăng kí ngay!

25. Chrome Daltonize

Những hình ảnh dành riêng cho người khiếm khuyết thị lực

Colour Vision Deficiency (CVD) – khiếm khuyết về thị giác hoặc mù màu đang gây nhiều vấn đề cho hàng triệu người trên thế giới. Tiện ích này sử dụng daltonization, một công cụ cho phép tạo ảnh phù hợp hơn cho người có CVD. Công cụ này sẽ tái thể hiện hình ảnh theo cách nhìn của người có CDV, giúp bạn điều chỉnh thiết kế phù hợp hơn.

26. Appspector

Xác định thư viện javascript và ứng dụng web trên trang web đang xem

Tiện ích giúp developer kiểm tra thư viện javascript và ứng dụng web. Một icon sẽ hiện trên thanh địa chỉ hiển thị framework được kiểm tra. Tiện ích có khả năng xác định đến hơn 100 thư viên CSS và JS.

27. Check My Links

Kiểm tra link hỏng trên web

Bạn đã build xong page? Vậy bạn đã kiểm tra lại đường dẫn chưa? Dù bạn có cẩn thận đến mức nào, bạn sẽ không cách nào đảm bảo được tất cả các link, và kiểm tra lại từng cái một là một công việc kinh khủng. Với Check My Links , bạn chỉ việc chạy tiện ích và ngồi chờ.

28. Flickr Tab

Tô điểm tab Chrome bằng hình ảnh Flickr cực đẹp.

Bạn có phát chán trước những phông tab Chrome đơn điệu? Với, Flickr Tab bạn sẽ không còn chán nữa.

Tiện ích gọn nhẹ này sẽ hiển thị một hình ảnh Flickr nổi tiếng mỗi khi bạn mở một cửa sổ mới. bạn có thể click vào ảnh để xem trên Flickr hoặc username để xem thêm ảnh của người dùng đó.

29. Google Art Project

Với Google Art Project, mỗi tab mới là một cuộc phiêu trong thế giới nghệ thuật và khám phá.

Nếu bạn không thích thú với Flickr Tab và những hình ảnh màu mè. Bạn có thể sẽ thích Google’s Art Project.

Với mỗi tab mới mở, bạn sẽ được chiêm ngưỡng những kiệt tác phân giải cao từ Van Gogh hay Monet. Nếu bạn muốn tìm hiểu thêm, chỉ việc click vào ảnh và bạn sẽ được dẫn đến website Google Cultural Institute với đầy đủ thông tin của tác phẩm và họa sĩ.

30. Data Saver (Beta)

Data Saver, sẽ giảm lượng dữ liệu tiêu thụ khi duyệt web. khi kích hoạt, Chrome sẽ dùng máy chủ Google nén trang web trước khi bạn tải trang. Tuy nhiên vẫn có hạn chế: các trang SSL và ẩn danh sẽ không được hỗ trợ.

Tìm việc làm ngay!

(Theo JobsGO - Nền tảng tìm việc làm, tuyển dụng, tạo CV xin việc)

Chia sẻ bài viết này trên: