Những tiện ích trên Chrome mà các web Tester/Developer nên biết

• Xu hướng chọn học gia sư trực tuyến của phụ huynh Việt
• Học thạc sĩ giáo dục online 2024 cần điều kiện gì?
• Top 5 trung tâm đào tạo trực tuyến công nghệ thông tin uy tín
• Hệ thống đào tạo trực tuyến LMS là gì? Cách học online mới cho các bạn đi làm
• Hệ thống đào tạo trực tuyến elearning nào ở Việt Nam được tin cậy

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

Tiện ích của chrome cho kiểm thử – Web UI testing

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

Tiện ích của chrome cho kiểm thử – Tự động

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

Tiện ích của chrome cho kiểm thử – Bằng chứng test

Bằng chứng test là rất quan trọng vì vậy có một công cụ tốt cho phép chúng ta chụp lại màn hình và ghi chú các vấn đề dễ dàng sẽ tiết kiệm một lượng lớn thời gian.

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

Tiện ích của chrome cho kiểm thử: Kiểm tra cookie của website

Quản lý được cookie và cache của trình duyệt là vô vùng quan trọng để đảm bảo ứng dụng hoạt động như mong đợi và lấy dữ liệu đúng như trên server. Bạn có thể sử dụng các tiện ích này cho việc kiểm tra cookie của website vì nó cho phép ta thêm, xóa, sửa cookie và xóa bộ nhớ cache của trình duyệt.

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

Tiện ích của chrome cho kiểm thử – Mô phỏng kích thước màn hình khác nhau

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

Tiện ích của Chrome cho kiểm thử – Test khám phá

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

Tiện ích của Chrome cho test API

• 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 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
• 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.
• 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.
• 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 đó.

Tiện ích của Chrome cho cho kiểm thử bảo mật

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

Tiện ích của Chrome cho Accessibility Testing

Có rất nhiều chuẩn (WCAG, ARIA, RGAA, Section 508) đã định nghĩa cách để làm cho nội dung của Web và ứng dụng web càng ngày càng dễ tiếp cận với mọi người. Những tiện ích sau của Chrome có thể được sử dụng cho kiểm thử tiếp cận để đảm bảo các chuẩn này được đáp ứng.

• 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.
• 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.
• 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ỹ).
• 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.

Các tiện ích của Chrome để nâng cao hiệu suất

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

Tổng hợp: Techtalk, Viblo