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.
- 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).
- Marmoset
Tiện ích thông minh 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.
- 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.
- Font 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.
- Window 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.
- 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.
- 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ì.
- 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.
- 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.
- 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 đó.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- WhatFont
WhatFont là một tiện ích mở rộng đơn giản như chính tên của nó – giúp bạn dễ dàng biết được các font chữ bất kỳ, kích thước trên trang web cần test. Bạn chỉ cần di chuột trên bất kỳ văn bản nào mà bạn muốn xác định font chữ trên trang web và WhatFont sẽ cho bạn câu trả lời. Nếu bạn cần thêm thông tin, bạn chỉ cần dowble click vào văn bản cần kiểm tra.
- ColorZilla
ColorZilla là một tiện ích của chrome về chọn màu sắc. Nó cho phép bạn tìm ra chính xác màu sắc đã được sử dụng trên trang web. ColorZilla thực sự rất hữu ích khi bạn cần kiểm tra màu sắc của web có khớp với design hay không.
- PerfectPixel
PerfectPixel l à ứng 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.
- 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.
- 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.
- Web developer
Web developer là tiện ích giúp bạn quản lý bộ nhớ cache của trình duyệt, quản lý cookies, kiểm tra và highlight các thành phần của web, tiêu đề của thuộc tính, các thông tin khác trên trang web, giúp tiết kiệm thời gian trong khi test. Tiện ích này có một add-on với tính năng đầy đủ hơn cùng tên trên Firefox, cung cấp một loạt các tính năng cho web developer trên thanh công cụ.
- 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.
- Awesome Screenshot
Awesome Screenshot là công cụ chụp màn hình phổ biến nhất với các tester. Bạn có thể chụp full màn hình, một vùng cụ thể hoặc nội dung nhìn thấy trên trang web, đồng thời chú thích màn hình chụp bằng cách highlight, cắt, thêm text … để làm bằng chứng test. Bạn có thể dễ dàng chia sẻ các bức ảnh đó, có thể lưu vào máy tính cá nhân, lưu tạm trên Awesome Screenshot hoặc lưu trữ lâu dài bằng cách upload lên Google Drive hoặc Diigo.
- Lightshot
Lightshot là một công cụ chụp lại màn hình và tùy biến bằng cách thêm các ghi chú. Nó có giao diện khá đơn giản. Bạn có thể lưu các screenshot vào bộ nhớ local hoặc upload chúng lên cloud (bạn có thể chia sẻ link cho người khác).
- Screencastify
Screencastify là một tiện ích nên có trong bộ công cụ của tester, ghi lại hành vi của người dùng trên trang web như một video. Bạn có thể chia sẻ với developer như là bằng chứng test. Chỉ cần nhấn ghi là nội dung các tab của bạn sẽ được ghi lại.
- Edit This Cookie
Edit This Cookie: Nếu bạn đang test phiên bản A/B của ứng dụng web, tiện ích này sẽ giúp bạn tiết kiệm rất nhiều thời gian. Edit This Cookie cung cấp một giao diện đẹp, có tính tổ chức cho phép bạn quản lý cookie của trình duyệt giống như một người chuyên nghiệp. Nó biểu diễn tập các tệp cookie và giá trị của nó. Bạn có thể thay đổi bất cứ giá trị hiện tại nào hoặc thêm, xóa, tìm kiếm, bảo vệ hoặc block cookie. Sử dụng tiện ích này bạn sẽ thấy dễ dàng hơn thay vì sử dụng màn hình setting của chrome để tìm kiếm cookie cho một trang cụ thể.
- Cookie Editor
Cookie Editor là một tiện ích khác cho phép bạn sửa cookie trong quá trình test như thêm, xóa, thay đổi, bảo vệ, block và tìm kiếm cookie. Nó cũng có khả năng export cookie thành file JSON.
- Clear Cache
Clear Cache: Nếu bạn gặp khó khăn khi muốn xóa cache của trình duyệt thì tiện ích này sẽ giúp bạn xóa từ thanh công cụ mà không phải đi đường vòng (Settings -> xóa dữ liệu trình duyệt). Bạn có thể tùy biến nó để kiểm soát dữ liệu bạn muốn xóa – app cache, download, file hệ thống, form dữ liệu lịch sử trình duyệt, bộ nhớ cục bộ, mật khẩu, …
- Cache Killer
Cache Killer là một plugin hữu dụng cho tester. Nó cho phép dễ dàng vô hiệu hóa cache trong Chrome. Không giống như Clear Cache, khi nó cho phép xóa cache trước khi load một trang để bạn luôn luôn thực hiện bản mới nhất của code. Nếu bạn đang kiểm tra cache của ứng dụng, bạn có thể vô hiệu hóa add-on này chỉ với một cú click.
- Resolution Test
Resolution Test giúp dễ dàng test các ứng dụng web trên các màn hình có độ phân giản và kích thước khác nhau. Bạn có thể chọn từ danh sách các màn hình có độ phân giải phổ biến nhất mà các website hay dùng, hoặc sử dụng kích thước tự tùy biến. Nó tạo ra các kích cỡ màn hình cửa sổ trình duyệt và mô phỏng ứng dụng web trong kích thước màn hình bạn muốn.
- Window Resizer
Window Resizer: Là một tiện ích của chrome rất hữu ích trong kiểm thử ứng dụng web. Nó làm mọi thứ cho Chrome giống như những thứ mà Firesizer làm cho Firefox – thay đổi kích thước cửa sổ trình duyệt để mô phỏng các độ phân giải màn hình khác nhau cho phép bạn kiểm tra layout của website sẽ thay đổi như thế nào trên các kích thước màn hình khác nhau. Bạn có thể chọn từ các độ phân giải màn hình đề xuất hoặc thêm các độ phân giải màn hình mà bạn tự tạo ra (và lưu chúng). Một vài chức năng Window Resizer có mà Resolution Test không có là Window Resizer cho phép bạn thiết lập tùy biến các phím tắt quan trọng và bạn cũng có thể export các thiết lập đó và import vào một máy tính khác để sử dụng.
- Bug Magnet
Bug Magnet là một sự lựa chọn tiết kiệm thời gian khổng lồ khi test khám phá. Click chuột phải vào bất cứ trường nào trên ứng dụng web để đưa ra một menu với các giá trị được xác định trước cho email, tên, số điện thoại, postcode,… Chọn giá trị mà bạn muốn và điền vào trường trên trang web. Vì vậy, nếu sắp tới bạn có kế hoạch thực hiện test khám phá, bạn không cần phải làm giả giá trị để test thử các trường vì Bug Magnet sẽ làm việc đó cho bạn. Hãy thử một lần, và bạn sẽ sử dụng nó mỗi ngày.
- Form Fuzzer
Form Fuzzer là một tiện ích khác của chrome để kiểm tra các trường điền dữ liệu với các giá trị khác nhau và cực kỳ có ích cho việc test khám phá. Giống như Bug Magnet, bạn không cần phải tạo dữ liệu để kiểm tra định dạng khác nhau của địa chỉ email, số điện thoại… một cách thủ công khi kiểm thử các form. Chỉ cần click chuột phải vào form mà bạn muốn điền và chọn giá trị mong muốn đã được thiết lập trước.
- Web Developer Form Filler
Web Developer Form Filler: Tiện ích này giúp việc điền các trường của form và chứng minh tính hữu dụng trong khi test khám phá. Bạn có thể cài đặt các phím nóng để điền vào form sử dụng duy nhất một key.
36.Postman Chrome Extension
Postman Chrome Extension là công cụ cho việc kiểm thử API – đặc biệt là API RESTful. Nó cung cấp khả năng thiết lập và tạo biến môi trường giúp tiết kiệm thời gian. Bạn có thể yêu cầu kiểm tra nhóm các yêu cầu API trong một lần.
- Advanced RESTClient
Advanced RESTClient là một tiện ích khác của chrome cho việc kiểm tra API. Nó không có nhiều tính năng như Postman nhưng nó cũng khá tuyệt để bắt đầu cho việc kiểm thử API. REST Client cho phép bạn tạo và kiểm thử tùy biến yêu cầu API với giao diện đơn giản.
Trên đây là 1 số tiện ích trên Chorme mà mình giới thiệu, hy vọng nó sẽ giúp ích được cho mọi người.
