Khi nhắc đến Chrome DevTools, đa số mọi người nghĩ ngay đến công cụ dành cho developer. Nhưng với tester, DevTools cũng là “vũ khí bí mật” giúp kiểm thử nhanh hơn, chính xác hơn và phát hiện bug mà không cần phụ thuộc quá nhiều vào dev.
Trong bài viết này, mình sẽ chia sẻ những tính năng nổi bật của DevTools dành cho tester, và một số tính năng mới/dễ bị bỏ qua nhưng rất hữu ích.
Vì được tích hợp sẵn ngay bên trong trình duyệt, chúng ta có thể dễ dàng tìm và truy cập bộ công cụ này. Có 1 vài cách để mở Chrome Devtools như sau:
Mở từ browser menu: Click vào menu góc phải chọn More tools => Chọn Developer tools
Mở bằng menu: click chuột phải vào màn hình Chrome và chọn Inspect
Sử dụng tổ hợp phím tắt: Đối với Mac: Cmd + Opt + I
Đối với Windows: F12 hoặc Ctrl + Shift + I
Inspect Element: cho phép xem HTML/CSS của từng phần tử trên màn hình. Tester có thể:
● Xác minh style có đúng design không (màu, font, spacing).
● Check button/link có đang bị che hay disabled bởi CSS.
● Lấy locator chính xác để viết test automation.
● Kiểm tra API call khi thực hiện hành động trên web
● Xem status code (200, 400, 500), payload, response
● Đo tốc độ tải trang, kích thước file.
● Thử throttling (giả lập 3G, 4G) để test performance
Note: Có thể replay request trong tab Network, không cần viết tool ngoài → cực tiện để retest bug
● Hiển thị log, error, warning.
● Tester có thể phát hiện lỗi JS nhanh hơn thay vì chỉ thấy “không hoạt động”
● Dùng console để chạy thử lệnh JS đơn giản, ví dụ scroll tới element, test localStorage/sessionStorage
● Giả lập giao diện trên nhiều thiết bị (iPhone, iPad, Android)
● Test viewport, media query, orientation (xoay ngang/dọc)
● Thử chạm (touch simulation)
● Performance tab: đo FPS, CPU, memory, phát hiện bottleneck khi load trang
● Lighthouse: chạy audit về performance, accessibility, SEO, PWA. Tester có thể dùng để:
Check accessibility (mù màu, hỗ trợ screen reader)
Đưa ra con số performance rõ ràng khi report bug
● Xem cookie, localStorage, sessionStorage
● Kiểm tra token đăng nhập, thời gian hết hạn
● Xóa dữ liệu để test luồng login/logout
● Cho biết file CSS/JS nào được dùng và không dùng khi load trang
● Tester có thể phát hiện code thừa → report cho dev để tối ưu
● Ghi lại luồng thao tác của bạn trên web
● Xuất thành code automation (Puppeteer/Playwright)
● Rất hữu ích cho tester khi cần mô tả lại bug flow
● Chrome tự động gom lỗi bảo mật, cookie, deprecated API
● Tester có thể check nhanh để phát hiện vấn đề sớm mà không đợi dev fix
● Cho phép sửa HTML/CSS/JS trực tiếp và “giữ lại” khi reload
● Tester có thể thử “what if” mà không cần build lại code
Nguồn: https://chatgpt.com/s/t_68cb88559e88819198e958593d1ba094
You need to login in order to like this post: click here
YOU MIGHT ALSO LIKE
SUBSCRIBE TO OUR NEWSLETTER
