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

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. 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.

5. 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.

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.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.

18.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.

19.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.

20.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.

21.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.

22.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ụ.

23.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.

24.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.

25.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).

26.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.

27.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ể.

28.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.

29.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, …

30.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.

31.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.

32.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.

33.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.

34.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.

35.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.

37.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.

38.Resteasy

Resteasy là một tùy chọn khác để testing RESTful API trên Chrome. Nó cung cấp các tính năng tương tự Advanced RESTClient, vì vậy bạn có thể thử cả hai và chọn tiện ích nào mình thích hơn.

39.JSONView

JSONView: Nếu bạn đang kiểm thử RESTful API, nếu đọc dữ liệu JSON gặp khó khăn thì JSONView cho phép bạn xem định dạng JSON dưới dạng cây trong trình duyệt Chrome giúp dễ đọc và verify hơn.

40.Ghostery

Ghostery: Tiện ích này giúp dễ dàng hơn khi kiểm tra ứng dụng chạy như thế nào khi mạng chậm và API bị lỗi thì có kết quả gì. Nó cho phép bạn nhìn tất cả trackers trên trang web và cung cấp tùy chọn vô hiệu hóa một tracker cụ thể nào đó.

41.XSS Rays

XSS Rays là một tiện ích hữu ích của chrome được sử dụng rộng rãi trong cộng đồng tester cho kiểm thử bảo mật. Nó giống như máy quét Javascript XSS giúp ta xác định các lỗ hổng XSS trong trang web. XSS Rays phân tích tất cả các link và form của trang web khi nó được load và kiểm tra XSS trên các parameter GET, POST.

42.Request Maker

Request Maker giúp bạn tạo các request mới, bắt các request tạo bởi trang web, xáo trộn URL, sửa đổi tiêu đề và dữ liệu POST. Tính năng tôi thích nhất của Request Maker là việc đánh dấu các request bằng việc click vào một button. Nó giúp tiết kiệm rất nhiều thời gian. d3coder là một tiện ích khác của chrome cho test bảo mật. Bạn có thể mã hóa và giải mã văn bản đã chọn thông qua ngữ cảnh đã được thêm vào ở Chrome. Copy text vào clipboard và chọn một trình chuyển ngữ cảnh từ menu. Sau khi chuyển đổi, d3coder sao chép text mới vào clipboard. d3coder là plugin tuyệt với cho test bảo mật cho phép mã hóa/ giải mã các loại khác nhau như base63, ROT13, CRC32, UNIX.

43.Site spider

Site spider là một trang crawler mà báo tất cả các link bị hỏng của trang web thay vì bạn phải tự kiểm tra bằng tay. Site Spider là mã nguồn mở vì vậy bạn có thể thay đổi khi bạn muốn.

44.WAVE Evaluation Tool

WAVE Evaluation Tool là một công cụ đánh giá khả năng tiếp cận web tuyệt vời được sử dụng để kiểm tra web dựa trên chuẩn WCAG. Công cụ WAVE Evaluation thêm khả năng WAVE cho trình duyệt của bạn và cung cấp cái nhìn trực quan cho kết quả phản hồi về khả năng tiếp cận của trang web bằng cách truyền các icon và indicator vào trang web.

45.Accessibility Developer Tools

Accessibility Developer Tools là tiện ích thêm khả năng Accessibility audit và Accessibility sidebar pane trong các tab thành phần trong công cụ cho developer và thực sự là một phần công cụ cốt lõi trong chrome. Khi bạn chạy Accessibility audit, nó sẽ liệt kê các luật mà trang web vi phạm theo WCAG 2.0 Guidelines, bao gồm thiếu thuộc tính ARIA.

46.aXe

aXe là một tiện ích khác cung cấp thêm khả năng kiểm tra khả năng tiếp cận tự động cho trình duyệt Chrome. Nó là tiện ích lightweight dựa trên thư viện Javascript aXe. aXe báo lỗi cho tất cả những sai sót dựa theo WCAG 2.0 (W3C Web Content Accessibility Guidelines) và Section 508 (US Federal Procurement Standard – Chuẩn của liên bang Mỹ).

47.ARIA Validator

ARIA Validator thêm một nút vào Chrome để xác nhận việc thực hiện ARIA trên trang web bất kỳ. Đối với mỗi frame nó có thể đọc trên trang web, nó sẽ mở một tab mới để hiển thị lỗi và warning.

48.Session Manager

Session Manager cho phép bạn tạo ra một nhóm các trang web mà bạn có thể mở chỉ bằng một cú click. Với Session Manager, bạn có thể quản lý các tab – lưu, cập nhật, xóa và restore tập các tab. Sử dụng nó và bạn sẽ không bao giờ hối hận.

49.iMacros

iMacros là tiện ích của chrome giúp bạn dễ dàng hơn khi test các trang web. Nó cho phép bạn ghi lại và phát lại các hành động của bạn trên trang web. iMacros có thể được sử dụng để tự động hóa các công việc hàng ngày đơn giản của bạn như smoke test mỗi ngày. Bạn có thể sử dụng iMacros để mở một nhóm các trang web để tiết kiệm thời gian.

50.Mindup

Mindup là add-on tuyệt vời cho phép bạn tạo sơ đồ tư duy miễn phí. Sơ đồ tư duy là cách hay để tổ chức lại sự hiểu biết của bạn về các luồng ứng dụng, viết ra các kịch bản khác nhau và thậm chí tìm ra sự phụ thuộc giữa các thành phần của hệ thống. MindMup cung cấp cho bạn khả năng thực hiện chính xác những việc đó mà không phải thoát khỏi trình duyệt. Bạn có thể tạo sơ đồ tư duy và cùng thực hiện với những người khác trong thời gian thực với giao diện đơn giản và gọn gàng. Nó được tích hợp với Google Drive và Dropbox. Bởi vì sơ đồ tư duy của bạn được lưu trên đám mây, bạn có thể truy cập bất cứ đâu – trình duyệt trên máy để bàn, máy tính bảng hoặc thiết bị di động.

51.Proxy SwithchySharp

Proxy SwithchySharp giải cứu bạn trong trường hợp bạn cần phải chuyển proxy thường xuyên. Nó cho phép bạn quản lý và chuyển đổi giữa nhiều proxy nhanh chóng và dễ dàng. Tính năng mà tôi thích nhất là bạn có thể tự tạo các quy tắc cho proxy chuyển tự động, kích hoạt một proxy cụ thể cho một URL cụ thể. Sử dụng Proxy Swithcher, bạn có thể ẩn địa chỉ IP.

Kết luậ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.

Tham khảo:

https://www.funix.edu.vn/gioi-thieu-funix/tin-tuc/

https://techtalk.vn/30-tien-ich-chrome-cho-designer-va-dev.html