30 tiện ích mở rộng của Chrome dành cho chuyên viên thiết kế và lập trình viên

Rất nhiều tiện ích mở rộng miễn phí từ Chrome để giúp cuộc sống của bạn dễ dàng hơn – chúng tôi chọn ra những tiện ích tốt nhất cho bạn.

​

Từ lâu, Firefox đã nổi tiếng bởi khả năng tuỳ biến cùng vô vàn các tiện ích mở rộng, nhưng trong vài năm qua, Google Chrome cũng được biến đến nhờ các chuyên viên thiết kế và lập trình viên. Một lý do để giải thích điều này đó là tốc độ cũng như những công cụ được xây dựng sẵn trong Chrome. Hiện nay, song song với sự phát triển chóng mặt của bộ sưu tập các tiện ích mở rộng, Chrome đã trở thành ưu tiên hàng đầu cho nhiều lập trình viên và chuyên viên thiết kế web.
Chúng tôi chọn ra 30 tiện ích mở rộng từ Chrome, chúng có thể giúp bạn trong nhiều tình huống mà bạn có thể gặp phải.

1. CSS-Shack
Tiện ích mở rộng này từ Chrome sẽ giúp bạn tạo ra các kiểu layer và xuất chúng ra dưới dạng file CSS.

photo: creativeblog​

Tiện ích này thực sự hữu ích, nó cho phép bạn tạo ra những thiết kế rồi xuất chúng dưới dạng file CSS để sử dụng trên trang web của bạn. Nó hỗ trợ các layer và tập hợp rất nhiều công cụ quen thuộc từ công cụ chỉnh sửa ảnh thông thường của bạn.

2. Marmoset
Chỉ trong vài giây, Marmoset sẽ giúp bạn tạo ra những code snapshot thật tuyệt vời.

photo: creativeblog​

Tiện ích mở rộng thông minh này sẽ giúp bạn lấy code và các snapshot đầu ra để sử dụng cho demo và mockup. Bạn cũng có thể thêm chủ đề và hiệu ứng để tạo ra các hình ảnh cho quảng cáo và portfolio trực tuyến của bạn.

3. iMacros for Chrome
iMacros sẽ ghi và lưu lại những action giúp bạn

photo: creativeblog​

Là một lập trình viên web, có lúc bạn cần phải kiểm tra trang web của mình. Lặp đi lặp lại những action giống nhau là một quá trình mệt mỏi. iMacros là một mở rộng hữu ích, nó giúp bạn ghi và lưu lại những action, do đó bạn chỉ cần làm những action này một lần. Sau đó, bạn có thể kiểm tra trang web của mình nhiều lần chỉ với một nút bấm, việc này giúp bạn tiết kiệm khoảng thời gian quý báu và bạn có thể tập trung vào những vấn đề quan trọng hơn.

4. Font Playground
Bạn có thể trải nghiệm các phông chữ khác nhau cùng Font Playground trực tiếp trên một trang web

photo: creativeblog​

Bất kỳ chuyên viết thiết kế hay lập trình viên nào cũng sẽ thấy mở rộng này thú vị. Font Playground giúp bạn trải nghiệm các phông chữ khác nhau cũng như toàn bộ thư viện phông chữ từ Google trực tiếp trên một trang web mà không tạo ra bất kỳ thay đổi nào. Tiện dụng hơn, bạn có thể trải nghiệm tất cả thuộc tính của một phông chữ, phong cách cũng như hiệu ứng của chữ để từ đó bạn có thể hình dung trang web của mình trước khi thực hiện các thay đổi.

5. Window Resizer
Mở rộng này thay đổi kích cỡ của các cửa sổ trình duyệt để giúp mô phỏng những độ phân giải khác nhau

photo: creativeblog​

Mở rộng này là một công cụ hữu ích, và đúng như tên gọi của mình, nó thay đổi kích cỡ của các cửa sổ trình duyệt để giúp bạn hình dung thiết kế web của mình. Bạn có thể chọn các kích cỡ phổ biến trong danh sách, hoặc thiết lập thông số kích cỡ, độ phân giải để tăng độ chính xác.

6. Project Naptha
Với Naptha, bạn có thể đánh dấu, sao chép, sửa chữa và dịch văn bản từ bất kỳ hình ảnh nào trên web

photo: creativeblog​

Nếu bạn đang làm việc với một hình ảnh mockup có nhúng văn bản, Project Naptha sẽ giúp bạn tránh khỏi tình huống khó chịu. Nhờ vào các mẹo OCR thông minh, bạn có thể đánh dấu, sao chép, dán văn bản từ bất kỳ hình ảnh nào; thậm chí nó có thể giúp bạn dịch văn bản.

7. What Font
Sử dụng What Font sẽ giúp bạn giải đáp thắc mắc quen thuộc: họ đang sử dụng phông chữ gì vậy?

photo: creativeblog​

What Font, một tiện ích mở rộng rất hữu ích từ Google Chrome, giúp các chuyên viên thiết kế cũng như lập trình viên xác định phông chữ mà một trang web đang sử dụng. Nếu bạn tìm thấy một phông chữ trên một trang web và muốn sử dụng nó trong tương lai, nhưng lại không biết đó là phông chữ gì, chỉ cần di chuột đến chữ đó và bạn sẽ biết ngay lập tức.

8. Yslow
YSlow cho bạn biết điều gì làm chậm trang của bạn

photo: creativeblog​

YSlow không chỉ kiểm tra xem trang web của bạn chạy nhanh đến đâu, nó còn cho bạn biết điều gì làm chậm trang của bạn lại. YSlow kiểm tra trang web của bạn, ngược lại với 23 trong 34 quy tắc được xác định bởi nhóm nghiên cứu hiệu suất của Yahoo. Đây là một mở rộng cực kỳ hữu ích để đánh giá trang web, và đưa ra những giải pháp để cải thiện trang web đó.

9. Web Developer
Web Developer cung cấp những công cụ lập trình hữu dụng

photo: creativeblog​

Là một lập trình viên web, bạn có thể thắc mắc không biết bạn sẽ sống như thế nào nếu thiếu tiện ích này. Nó thêm vào thanh công cụ của Chrome rất nhiều những công cụ hỗ trợ các lập trình viên web. Nó cũng là một cổng chính thức của tiện ích Web Developer trên Firefox.

10. Page Ruler
Vẽ ngay một cây thước để có ngay kích thước điểm ảnh và định vị cùng Page Ruler

photo: creativeblog​

Page Ruler là một công cụ tuyệt vời cho những số đo chính xác với bất kỳ yếu tố nào trên một trang web, sau đó sử dụng nó cho nhu cầu của riêng bạn. Chỉ cần vẽ một cây thước, bạn sẽ có ngay kích thước điểm ảnh và định vị.

11. Web Developer checklist
Giải quyết vấn đề nhanh gọn với Web Developer checklist

photo: creativeblog​

Công cụ này cho phép bạn kiểm tra tất cả nếu trang web của bạn đang sử dụng SEO, khả dụng, khả năng tiếp cận và hiệu suất (tốc độ trang). Ví dụ, bạn không có thẻ H1 trên một trang web hoặc trang web thiếu tiêu đề meta hoặc miêu tả meta, tiện ích này sẽ thông báo để bạn có thể kiệp thời khắc phục vấn đề. Nếu bạn nhấp vào liên kết “more info and help” bên dưới, bạn sẽ tìm thấy danh sách kiểm tra chi tiết hơn.

12. DevTools Autosave
Tự động lưu bất kỳ thay đổi CSS và JS nào của trang vào file nguồn

photo: creativeblog​

Một mở rộng rất tiện lợi cho tất cả các lập trình viên web, DevTools AutoSave tự động lưu tất cả các thay đổi CSS và JS mà bạn thực hiện trên trang web của bạn thông qua các công cụ của Chrome Dev đến file nguồn. Một tiện ích mở rộng dễ sử dụng và nó sẽ giúp bạn tiết kiệm rất nhiều thời gian.

13. Instant Wireframe
Xem trang web trực tiếp với lớp phủ wireframe

photo: creativeblog​

Chuyển mọi trang web vào một wireframe chỉ với một cú nhấp chuột. Tiện ích này giúp các lập trình viên web và thiết kế web, cho dù có phải là xem trực tiếp hay không, với một lớp phủ wireframe.

14. ColorZilla
Với ColorZilla, bạn có thể “đọc” được màu bất kỳ lúc nào trong trình duyệt của bạn

photo: creativeblog​

Tiện ích ColorZilla từ Chrome là một thủ thuật chọn màu tô, lấy màu, gradient màu cũng như các công cụ màu sắc tiện lợi khác. Chúng sẽ giúp bạn với thiết kế của bạn – ngay tại cừa sổ trình duyệt.

15. Ripple Emulator
Ripple Emulator cung cấp sửa lỗi, kiểm tra DOM và kiểm tra tự động

photo: creativeblog​

Ripple Emulator là nền tảng di động giả lập, giúp bạn kiểm tra ứng dụng web bằng cách sử dụng nhiều thiết bị cũng như độ phân giải màn hình khác nhau. Ripple có thể sử dụng kết hợp với các công cụ phát triển có sẵn để sửa lỗi, kiểm tra DOM và kiểm tra tự động.

16. Streak
Chuyển email thành vé có thể theo dõi, chuyển nhượng được

photo: creativeblog​

Streak là công cụ cơ bản trong quản lý CRM và hỗ trợ email song song với Gmail. Nó cho phép bạn chuyển email đơn lẻ hoặc toàn bộ cuộc trò chuyện thành tấm vé để bạn dễ dàng theo dõi, chuyển nhượng và tổ chức. Bạn có thể quản lý tấm vé này hoặc chia sẻ với người khác.

17. Search Stackoverflow
Đây là tiện ích cần phải có nếu bạn muốn có câu trả lời nhanh chóng cho câu hỏi của mình

photo: creativeblog​

Nếu bạn là một lập trình viên web, hẳn bạn đã biết về Stack Overflow, một tiện ích cho tất cả các vấn đề phát triển có liên quan. Nếu bạn không biết đến sự tồn tại của nó, bạn hãy thử dùng đi, nó bao gồm các chủ đề từ C#, Java đến PHP và jQuery. Đây là một tiện ích tuyệt vời và cần phải có, nó thêm vào trình duyệt của bạn khung tìm kiếm và cho phép bạn tìm các nguồn tài nguyên rộng lớn của Stack Overflow.

18. PHP Ninja Manual
Tất cả tài liệu bạn cần cho PHP 5.5 mà không cần phải rời khỏi trình duyệt

photo: creativeblog​

Thật khó để nhớ hết tất cả những chức năng, nếu bạn đang lãng phí thời gian để tìm những chức năng PHP cụ thể trên google, thì bạn rất cần tiện ích này. PHP Ninja Manual cung cấp cho bạn tất cả tài liệu về PHP 5.5 với ví dụ trong tám ngôn ngữ mà bạn không cần rời khỏi trình duyệt.

19. PerfectPixel
Tiện ích này hỗ trợ bạn trong việc đồng bộ trang web và thiết kế của bạn trên từng diểm ảnh.

photo: creativeblog​

Các thiết kế web hẳn sẽ rất khó chịu khi họ làm ra một thiết kế tuyệt vời nhưng nó không hiển thị đúng như vậy khi code. Perfect Pixel là một tiện ích hoàn hảo cho các lập trình viên đang phát triển trang web cần sự trình bày thiết kế một cách chính xác. Tiện ích dễ sử dụng này cho phép bạn để một hình ảnh gần như trong suốt lên phía trên trang web và hiển thị so sánh từng điểm ảnh để đảm bảo nó chính xác.

20. Code Cola
Chỉnh sửa CSS trên trang web của bạn ngay lập tức

photo: creativeblog​

Tiện ích này không chỉ cho phép bạn xem nguồn code mà bạn đã làm, nó còn có chức năng sửa CSS, bạn có thể chỉnh sửa CSS trên trang web của bạn và nhìn thấy sự thay đổi ngay lập tức.

21. Chrome Sniffer
Kiểm tra và phát hiện các ứng dụng web và thư viện JavaScript

photo: creativeblog​

Tiện ích này giúp các lập trình viên kiểm tra và phát hiện các ứng dụng web và thư viện JavaScript đang chạy trên trang của bạn. Bạn sẽ không mất nhiều công sức khi sử dụng tiện ích này: sẽ có một biểu tượng xuất hiện trên thanh địa chỉ để cho thấy các framework và các phiên bản CMS được sử dụng.

22. User Agent Switcher
Xem giao diện trang của bạn trên nhiều thiết bị khác nhau

photo: creativeblog​

Một tiện ích tuyệt vời để xem giao diện trang của bạn trên nhiều thiết bị như iPad, iPhone hoặc trên thiết bị Android. Nếu trang của bạn đã bị hacked thì đây là một tiện ích rất hữu dụng, bởi bạn có thể xem trang của mình theo cách của các công cụ tìm kiếm.

23. IE tab
Kiểm tra trang web với các phiên bản khác nhau của IE

photo: creativeblog​

Một trong những IE giả lập phổ biến nhất có sẵn trên web. Nó cho phép các lập trình viên web kiểm tra trang của mình với những phiên bản IE khác nhau ngay trực tiếp trên trình duyệt Chrome của họ.

24. PicMonkey
Lấy tất cả hình ảnh trong một trang web chỉ với một cú nhấp chuột.

photo: creativeblog​

Đây là tiện ích chỉnh sửa ảnh rất dễ sử dụng, nó hỗ trợ bạn chỉnh sửa hình ảnh của trang web cũng như các screenshot. Nhưng đó không phải là điểm độc đáo duy nhất. PicMonkey giúp bạn lấy tất cả các hình ảnh và chụp màn hình của toàn bộ trang web chỉ với một cú nhấp chuột. Bạn chọn hình ảnh và chỉnh sửa nó và bạn muốn thêm hiệu ứng để thay đổi độ phơi sáng.

25. Chrome Daltonize
Tạo ra những hình ảnh phù hợp để xem với Colour Vision Deficiency

photo: creativeblog​

Colour Vision Deficiency (CVD) hoặc bệnh mù màu đã ảnh hưởng đến hàng triệu người trên thế giới. Tiện ích này khéo léo sử dụng daltonization, một kỹ thuật cho phép tạo ra các hình ảnh thích hợp hơn cho những người mắc chứng mù màu. Tiện ích này có thể sử dụng để mô phỏng các hình ảnh sẽ được những người bị mù màu theo dõi, và giúp bạn có những thiế kế phù hợp hơn với ứng dụng web của mình.

26. Appspector​

Kiểm tra ứng dụng web và thư viện javascript đang chạy trên trình duyệt web

photo: creativeblog​

Tiện ích mở rộng này sẽ giúp các lập trình viên kiểm tra framework/CMS và thư viện JavaScript đang chạy trên trang web mà bạn đang xem. Biểu tượng của tiện ích sẽ hiện ra trên thanh địa chỉ và chỉ ra framework. Tiện ích được đánh giá cao này của Chrome có thể kiểm tra được hơn 100 CMS và thư viện JS phổ biến.

27. Check My Links
Check My Links “đi xuyên qua” trang web của bạn và tìm kiếm các liên kết hỏng

photo: creativeblog​

Đã xây dựng xong trang web và đã kiểm tra hết tất cả các liên kết? Dù bạn cẩn thận đến đâu, bạn cũng có thể mắc lỗi, bởi kiểm tra lại là một công việc nhàm chán. Với Check My Links, nó sẽ làm thay bạn công việc tẻ nhạt này. Tiện ích này sẽ quét hết các liên kết trên tất cả các trang, đánh dấu màu xanh cho những trang còn tốt và dấu màu đỏ cho những trang hỏng.

28. Flickr Tab
Làm đẹp các tab Chrome bằng những hình ảnh lung linh trên Flickr

photo: creativeblog​

Bạn đã chán những tab Chrome nhàm chán khi mở sang một tab mới? Hãy sử dụng Flickr Tab để Chrome trông đẹp hơn.
Đây là một tiện ích đơn giản và nó hiển thị một bức ảnh phổ biến trên Flickr mỗi lần bạn mở một cửa sổ mới. Nhấp vào hình để xem nó trên Flickr, hoặc nhấp vào tên người dung để xem thêm ảnh từ họ.

29. Google Art Project
Hãy để mỗi tab mới trên Chrome là một hành trình nghệ thuật và khám phá thú vị với Google Art Project.

photo: creativeblog​

Nếu Flickr Tab và những bức hình rực rỡ của nó không phải là sở thích của bạn, có thể Google Art Project sẽ đem đến cho bạn những điều thú vị hơn.
Ở mỗi tab mới, bạn sẽ thưởng thức các tác phẩm nghệ thuật cao cấp như của Van Gogh và Monet. Nếu những hình ảnh này làm bạn thích thú, hãy nhấp vào nó và bạn sẽ được dẫn đến trang Google Cultural Institute, cùng đầy đủ thông tin về tác phẩm và tác giả của nó.

30. Data Saver (Beta)
Tiết kiệm tiền khi xem những thiết kế trên điện thoại với nền tảng nén Data Saver của Google

photo: creativeblog​

Hoá đơn mới nhất từ nhà cung cấp mạng di động làm bạn xấu hổ? Đừng sợ. Bạn cần Data Saver từ Google. Tiện ích này hoạt động đúng như những gì nó nói: cắt giảm lượng data bạn sử dụng khi lướt web. Khi được kích hoạt, Chrome sẽ sử dụng các máy chủ của Google để nén các trang lại trước khi bạn tải chúng. Chỉ có một lưu ý duy nhất: SSL và các trang ẩn danh sẽ không bị tác động.

Theo TechTalk, Creativeblog​