Chào mừng các bạn quay trở lại với chuỗi bài viết “Lộ trình Kỹ sư QA (Tester)”. Nếu như các bài trước chúng ta đã cùng nhau tìm hiểu về nền tảng của nghề QA như Đảm bảo Chất lượng là gì, cách phát triển tư duy QA, các phương pháp kiểm thử cơ bản (Black Box, White Box), hay tầm quan trọng của kiểm thử thủ công, thì hôm nay, chúng ta sẽ đi sâu vào một công cụ cực kỳ mạnh mẽ và không thể thiếu đối với bất kỳ ai làm việc với ứng dụng web: Browser Developer Tools (Công cụ Dev Tools của Trình duyệt).
Trong vai trò là một Kỹ sư QA, đặc biệt là khi thực hiện kiểm thử chức năng hoặc kiểm thử trợ năng, việc chỉ dừng lại ở việc “nhìn thấy lỗi” là chưa đủ. Chúng ta cần hiểu *tại sao* lỗi xảy ra. Công cụ Dev Tools chính là cánh cửa giúp chúng ta khám phá sâu hơn về hoạt động của ứng dụng web ở phía client-side (trình duyệt), từ đó cung cấp thông tin chi tiết và chính xác hơn khi báo cáo kết quả kiểm thử cho nhà phát triển.
Bài viết này sẽ tập trung vào cách bạn, một QA, có thể khai thác tối đa sức mạnh của Dev Tools trên các trình duyệt phổ biến như Chrome, Firefox, Edge hay Safari. Hãy cùng bắt đầu nhé!
Mục lục
Công cụ Dev Tools là Gì và Tại Sao QA Cần Nắm Vững?
Browser Developer Tools là một bộ công cụ tích hợp sẵn trong hầu hết các trình duyệt web hiện đại. Nó cung cấp cho nhà phát triển (và QA) khả năng kiểm tra, gỡ lỗi và phân tích trang web ngay trong trình duyệt.
Đối với QA, Dev Tools không chỉ là công cụ để “soi” giao diện. Nó là một bộ vũ khí giúp bạn:
- Hiểu cấu trúc trang (HTML, CSS)
- Theo dõi luồng thực thi JavaScript và tìm lỗi
- Kiểm tra các yêu cầu mạng (API calls, tải tài nguyên)
- Xem và quản lý dữ liệu lưu trữ trong trình duyệt (Cookies, Local Storage)
- Mô phỏng các điều kiện khác nhau (thiết bị di động, tốc độ mạng chậm)
- Phân tích hiệu suất cơ bản
Việc thành thạo Dev Tools sẽ nâng tầm kỹ năng của bạn từ người kiểm thử chỉ tìm lỗi thành người kiểm thử có khả năng phân tích nguyên nhân gốc rễ (root cause analysis) ở mức độ client-side, giúp giao tiếp hiệu quả hơn với team phát triển và đóng góp giá trị lớn hơn vào quy trình Đảm bảo Chất lượng tổng thể.
Để mở Dev Tools, bạn thường có thể nhấn phím F12, hoặc nhấn chuột phải vào bất kỳ đâu trên trang và chọn “Inspect” (Kiểm tra) hoặc “Inspect Element” (Kiểm tra phần tử).
Khám Phá Các Panel Chính Cần Thiết cho QA
Dev Tools có nhiều panel khác nhau, mỗi panel phục vụ một mục đích riêng. Dưới đây là những panel quan trọng nhất mà một Kỹ sư QA nên tập trung vào:
Panel Elements (Các Phần tử)
Panel Elements cho phép bạn xem và tương tác với cấu trúc HTML (DOM – Document Object Model) của trang web và các kiểu dáng CSS áp dụng cho từng phần tử. Đây là nơi lý tưởng để:
- Kiểm tra cấu trúc HTML: Bạn có thể chọn bất kỳ phần tử nào trên trang để xem mã HTML tương ứng. Điều này giúp bạn hiểu cách các phần tử được sắp xếp và lồng nhau.
- Kiểm tra và gỡ lỗi CSS: Khi chọn một phần tử, panel Styles (Thẻ Styles, thường nằm bên cạnh panel Elements) sẽ hiển thị tất cả các quy tắc CSS đang áp dụng cho nó, bao gồm cả nguồn gốc của quy tắc (tệp CSS nào, dòng thứ mấy). Bạn có thể tạm thời bật/tắt hoặc thay đổi giá trị CSS ngay tại đây để kiểm tra xem sự thay đổi nào gây ra lỗi hiển thị. Điều này rất hữu ích khi kiểm thử các vấn đề về giao diện người dùng (UI).
- Tìm kiếm phần tử: Bạn có thể sử dụng tính năng tìm kiếm trong panel Elements (thường là Ctrl+F hoặc Cmd+F) để nhanh chóng định vị các phần tử dựa trên tag HTML, ID, class, hoặc text content.
Ví dụ sử dụng cho QA:
- Một nút bấm hiển thị sai màu. Bạn có thể chọn nút đó trong panel Elements, xem các style CSS đang áp dụng trong thẻ Styles. Có thể có một quy tắc CSS không mong muốn ghi đè lên style dự kiến. Bạn có thể chỉnh sửa trực tiếp style để xác nhận giả thuyết của mình trước khi báo bug.
- Một phần tử không hiển thị. Chọn phần tử đó, kiểm tra xem nó có thuộc tính CSS
display: none;hoặcvisibility: hidden;hay không. - Kiểm tra các thuộc tính HTML như
altcho ảnh (quan trọng cho kiểm thử trợ năng),hrefcho liên kết, hoặc các thuộc tính dữ liệu (data-*).
<!-- Ví dụ về cấu trúc HTML đơn giản -->
<div class="container">
<h1 id="pageTitle">Tiêu đề Trang</h1>
<button class="btn btn-primary">Click Me</button>
</div>
Bạn có thể chọn thẻ <button> trong Elements panel và xem tất cả các CSS rules áp dụng cho nó.
Panel Console (Bảng điều khiển)
Panel Console có lẽ là panel được sử dụng nhiều nhất. Nó hiển thị các thông báo log, cảnh báo (warnings) và lỗi (errors) từ mã JavaScript đang chạy trên trang. Đây là nơi đầu tiên bạn nên kiểm tra khi gặp sự cố bất thường trên trang web.
- Xem lỗi JavaScript: Khi có lỗi xảy ra trong mã JavaScript, một thông báo lỗi sẽ xuất hiện ở đây, thường bao gồm loại lỗi (ví dụ:
TypeError,ReferenceError), mô tả lỗi và dòng mã gây ra lỗi. Điều này cực kỳ hữu ích để xác định nguyên nhân gốc rễ của lỗi. - Xem thông báo log: Nhà phát triển thường sử dụng
console.log(),console.warn(),console.error()để in thông tin gỡ lỗi ra Console. QA có thể sử dụng các thông báo này để theo dõi luồng thực thi của ứng dụng hoặc kiểm tra giá trị của các biến tại các điểm nhất định. - Thực thi mã JavaScript: Bạn có thể nhập và chạy các dòng lệnh JavaScript trực tiếp trong Console. Điều này cho phép bạn tương tác với trang, kiểm tra giá trị của các biến global, gọi các hàm hoặc thử nghiệm các đoạn mã nhỏ.
Ví dụ sử dụng cho QA:
- Khi một tính năng không hoạt động như mong đợi (ví dụ: nhấn nút không làm gì cả), hãy mở Console. Có thể có một lỗi JavaScript ngăn chặn script thực thi.
- Đăng nhập vào hệ thống, kiểm tra xem có thông báo
console.log('User logged in successfully')xuất hiện không (nếu dev có log). - Sử dụng Console để kiểm tra xem một biến JavaScript có giá trị đúng sau một hành động nào đó không, ví dụ: nhập
localStorage.getItem('userId')để xem ID người dùng có được lưu đúng sau khi đăng nhập không.
// Ví dụ về mã JS có thể gây ra lỗi hoặc in log
function processData(data) {
if (!data) {
console.error("Error: Data is null or undefined!");
return; // Ngăn chặn lỗi tiếp theo
}
// Assume 'data' is an object and we expect 'data.items' to be an array
if (!Array.isArray(data.items)) {
console.warn("Warning: data.items is not an array.");
}
// Example of a potential runtime error
// data.items.forEach(item => { // If data.items is not an array, this will cause a TypeError
// console.log(item.name);
// });
console.log("Processing complete.");
// ... further processing
}
// Example call that might fail
processData(null);
// Example call that might work but issue a warning
processData({});
Khi chạy mã trên, bạn sẽ thấy các thông báo Error và Warning trong Console, giúp bạn nhanh chóng phát hiện vấn đề.
Panel Network (Mạng)
Panel Network là vô giá để theo dõi tất cả các yêu cầu mạng (requests) mà trình duyệt thực hiện khi tải và tương tác với trang web, cũng như các phản hồi (responses) nhận được từ máy chủ. Điều này bao gồm tải các tệp HTML, CSS, JavaScript, hình ảnh, font, và đặc biệt là các yêu cầu API (XHR hoặc Fetch).
- Xem tất cả yêu cầu: Khi bạn tải lại trang hoặc thực hiện một hành động kích hoạt giao tiếp với máy chủ (ví dụ: nhấn nút “Lưu”), panel Network sẽ ghi lại tất cả các yêu cầu.
- Kiểm tra trạng thái yêu cầu: Đối với mỗi yêu cầu, bạn có thể xem trạng thái HTTP code (ví dụ: 200 OK, 404 Not Found, 500 Internal Server Error). Đây là cách nhanh nhất để biết một API call có thành công hay không. (Bạn có thể kết nối kiến thức này với việc kiểm thử API bằng Postman).
- Xem chi tiết yêu cầu/phản hồi: Chọn một yêu cầu để xem chi tiết: Headers (thông tin về yêu cầu và phản hồi), Payload (dữ liệu được gửi đi trong yêu cầu POST, PUT, v.v.), Preview/Response (dữ liệu nhận được từ máy chủ).
- Lọc yêu cầu: Bạn có thể lọc các yêu cầu theo loại (XHR/Fetch, JS, CSS, Img, Media, v.v.) hoặc theo URL để dễ dàng tìm kiếm.
- Kiểm tra thời gian tải: Panel này hiển thị thời gian cần thiết để tải từng tài nguyên hoặc thực hiện từng yêu cầu API. Hữu ích cho việc xác định các vấn đề về hiệu suất (Kiểm thử Hiệu năng cơ bản).
- Mô phỏng tốc độ mạng: Hầu hết Dev Tools cho phép bạn mô phỏng kết nối internet chậm (ví dụ: 3G, Offline) để kiểm tra ứng dụng hoạt động thế nào trong các điều kiện mạng kém.
Ví dụ sử dụng cho QA:
- Khi bạn điền và gửi một form, kiểm tra panel Network để xem có yêu cầu POST hoặc PUT được gửi đi không, status code là gì (mong đợi 200 hoặc 201), và dữ liệu bạn nhập có được gửi đi đúng trong Payload không.
- Khi một phần dữ liệu không hiển thị trên trang (ví dụ: danh sách sản phẩm), kiểm tra xem có yêu cầu API nào bị lỗi (status code 4xx, 5xx) hoặc phản hồi có dữ liệu rỗng/sai định dạng không.
- Kiểm tra xem các tài nguyên lớn (ảnh, video) có mất quá nhiều thời gian để tải không, góp phần vào việc báo cáo vấn đề về hiệu suất trang.
// Ví dụ mô tả một yêu cầu API thành công (không phải mã thực thi, chỉ minh họa cấu trúc)
// Request URL: https://api.example.com/users/123
// Request Method: GET
// Status Code: 200 OK
// Request Headers:
// Accept: application/json
// Authorization: Bearer <token>
// ...
// Response Headers:
// Content-Type: application/json
// Date: Tue, 25 Jun 2024 10:00:00 GMT
// ...
// Response Body (Preview/Response tab):
// {
// "id": 123,
// "name": "John Doe",
// "email": "[email protected]"
// }
Bạn sẽ thấy cấu trúc tương tự này khi chọn một yêu cầu trong panel Network và xem các tab Headers, Payload, Preview/Response.
Panel Sources (Nguồn)
Panel Sources cho phép bạn xem mã nguồn của trang web (HTML, CSS, JavaScript), gỡ lỗi mã JavaScript bằng cách đặt các điểm dừng (breakpoints), và xem luồng thực thi của chương trình.
- Xem mã nguồn: Bạn có thể duyệt qua cấu trúc tệp của trang web và xem mã nguồn của các tệp tài nguyên.
- Đặt Breakpoints: Đây là tính năng gỡ lỗi mạnh mẽ nhất. Bạn có thể click vào số dòng trong tệp JavaScript để đặt breakpoint. Khi trình duyệt thực thi đến dòng đó, nó sẽ tạm dừng.
- Theo dõi luồng thực thi: Khi mã dừng tại breakpoint, bạn có thể bước qua từng dòng lệnh (step over, step into, step out), xem giá trị của các biến tại thời điểm đó trong panel Scope và Watch.
- Chỉnh sửa mã nguồn (tạm thời): Trong một số trường hợp đơn giản, bạn có thể chỉnh sửa mã JavaScript ngay trong panel Sources để thử nghiệm nhanh một fix tiềm năng.
Ví dụ sử dụng cho QA:
- Một phép tính ở client-side cho ra kết quả sai. Đặt breakpoint tại dòng mã thực hiện phép tính, chạy lại kịch bản, và xem giá trị của các biến đầu vào và đầu ra để xác định bước nào bị sai.
- Một hàm callback sau khi gọi API không được thực thi. Đặt breakpoint ở đầu hàm callback để xem liệu nó có được gọi đến không.
- Hiểu rõ hơn về luồng logic xử lý dữ liệu ở phía client khi gỡ lỗi các bug phức tạp.
// Ví dụ đặt breakpoint
function calculateTotal(price, quantity) {
const subtotal = price * quantity; // <-- Đặt breakpoint tại dòng này
const taxRate = 0.1;
const tax = subtotal * taxRate;
const total = subtotal + tax;
return total;
}
let itemPrice = 10;
let itemQuantity = 5;
let finalAmount = calculateTotal(itemPrice, itemQuantity);
console.log(finalAmount);
Khi bạn chạy mã này và breakpoint được đặt, trình duyệt sẽ dừng tại dòng const subtotal = price * quantity;. Bạn có thể xem giá trị của price và quantity, sau đó bước qua dòng đó để thấy giá trị của subtotal.
Panel Application (Ứng dụng)
Panel Application cung cấp thông tin về các tài nguyên và dữ liệu mà ứng dụng web lưu trữ trong trình duyệt của người dùng. Các phần chính mà QA nên quan tâm bao gồm:
- Local Storage và Session Storage: Lưu trữ dữ liệu dưới dạng key-value ngay trong trình duyệt. Local Storage tồn tại cho đến khi người dùng xóa cache, còn Session Storage chỉ tồn tại trong phiên làm việc hiện tại (khi đóng tab/trình duyệt thì dữ liệu sẽ mất). Hữu ích để kiểm tra xem dữ liệu người dùng (tùy chọn, trạng thái giỏ hàng, token đăng nhập) có được lưu trữ đúng cách không.
- Cookies: Các tệp nhỏ chứa dữ liệu mà máy chủ gửi đến trình duyệt. Thường được sử dụng để quản lý phiên làm việc, theo dõi người dùng. Kiểm tra cookies giúp bạn hiểu về trạng thái đăng nhập, thông tin theo dõi, v.v. (Lưu ý về bảo mật và dữ liệu nhạy cảm trong cookies).
- Cache Storage và IndexedDB: Các cơ chế lưu trữ phức tạp hơn, thường được sử dụng bởi Progressive Web Apps (PWA) hoặc các ứng dụng cần lưu trữ offline.
- Service Workers: Hữu ích để kiểm thử các tính năng offline hoặc background sync của PWA.
Ví dụ sử dụng cho QA:
- Đăng nhập vào ứng dụng. Kiểm tra Local Storage hoặc Cookies để xem token xác thực hoặc thông tin người dùng có được lưu trữ sau khi đăng nhập thành công không.
- Thêm sản phẩm vào giỏ hàng mà không đăng nhập. Kiểm tra Local Storage xem dữ liệu giỏ hàng có được lưu lại không để đảm bảo tính năng hoạt động khi chưa đăng nhập.
- Kiểm thử tính năng “Remember Me” (Ghi nhớ đăng nhập) bằng cách đóng và mở lại trình duyệt, sau đó kiểm tra lại Cookies hoặc Local Storage.
// Ví dụ về cách ứng dụng có thể sử dụng Local Storage
// Lưu thông tin người dùng sau khi đăng nhập
localStorage.setItem('userId', 'user-123');
localStorage.setItem('userName', 'Alice');
// Lấy thông tin khi tải lại trang
const userId = localStorage.getItem('userId');
const userName = localStorage.getItem('userName');
console.log("User ID from Local Storage:", userId);
console.log("User Name from Local Storage:", userName);
Bạn có thể mở Panel Application, vào mục Local Storage để xem các cặp key-value userId: "user-123" và userName: "Alice" sau khi mã trên được thực thi.
Tổng kết các Panel Quan trọng
Để dễ hình dung, đây là bảng tóm tắt các panel Dev Tools chính và công dụng của chúng đối với Kỹ sư QA:
| Panel | Công dụng chính cho QA | Ví dụ sử dụng thực tế |
|---|---|---|
| Elements | Kiểm tra cấu trúc HTML (DOM), xem và tạm thời chỉnh sửa CSS. | Kiểm tra vị trí, kích thước, màu sắc của phần tử; xem thuộc tính ẩn/hiện; xác định ID/Class để báo cáo bug UI chính xác. |
| Console | Xem lỗi JavaScript, cảnh báo, thông báo log; thực thi mã JS trực tiếp. | Tìm lỗi client-side khi tính năng không hoạt động; theo dõi thông báo log từ nhà phát triển; kiểm tra giá trị biến nhanh chóng. |
| Network | Theo dõi yêu cầu/phản hồi HTTP; kiểm tra status code, headers, payload, response; mô phỏng mạng chậm. | Kiểm tra API call thành công hay thất bại; xem dữ liệu gửi/nhận từ server; xác định nguyên nhân lỗi dữ liệu; kiểm thử dưới điều kiện mạng yếu. |
| Sources | Xem mã nguồn JavaScript; đặt breakpoint để gỡ lỗi từng bước; xem giá trị biến khi debug. | Debug logic xử lý ở client khi gặp bug tính toán hoặc luồng dữ liệu phức tạp; hiểu sâu hơn cách ứng dụng hoạt động. |
| Application | Xem và quản lý Local Storage, Session Storage, Cookies, Cache. | Kiểm tra trạng thái đăng nhập, thông tin người dùng lưu trữ cục bộ; kiểm thử tính năng ghi nhớ, giỏ hàng tạm thời; kiểm tra vấn đề cache. |
Đưa Dev Tools vào Quy Trình Kiểm Thử Hàng Ngày
Thay vì chỉ mở Dev Tools khi gặp bug, hãy cố gắng tích hợp việc sử dụng nó vào quy trình kiểm thử thủ công hàng ngày của bạn. Khi kiểm thử một tính năng mới:
- Bắt đầu với Console: Luôn mở Console. Nếu có lỗi JavaScript ngay khi tải trang hoặc khi tương tác, bạn sẽ thấy ngay lập tức.
- Kiểm tra Network khi có tương tác: Khi thực hiện một hành động gửi/nhận dữ liệu (nhấn nút Save, Search, Login), chuyển sang panel Network để xem yêu cầu API có được gửi đi đúng không, phản hồi có như mong đợi không.
- Sử dụng Elements cho UI/UX: Khi kiểm thử giao diện hoặc luồng người dùng, sử dụng Elements để kiểm tra các thuộc tính của phần tử, đặc biệt khi gặp vấn đề về hiển thị hoặc tương tác.
- Sử dụng Application cho dữ liệu client-side: Khi kiểm thử các tính năng liên quan đến quản lý phiên, lưu trữ tùy chọn, giỏ hàng, hãy kiểm tra Local Storage/Cookies/Session Storage trong panel Application.
- Sources khi cần debug sâu: Chỉ khi gặp các bug khó hiểu liên quan đến logic JavaScript, hãy sử dụng panel Sources để đặt breakpoint và debug từng bước.
Việc làm quen và sử dụng Dev Tools một cách thường xuyên sẽ giúp bạn nhanh chóng xác định loại bug (frontend hay backend, UI hay logic), cung cấp thông tin chi tiết hơn cho nhà phát triển, và nâng cao đáng kể khả năng gỡ lỗi của bản thân.
Kết luận
Công cụ Dev Tools của trình duyệt không chỉ dành cho nhà phát triển. Chúng là những trợ thủ đắc lực cho Kỹ sư QA, giúp chúng ta nhìn xuyên qua lớp giao diện để hiểu cách ứng dụng web thực sự hoạt động ở client-side.
Việc thành thạo các panel chính như Elements, Console, Network, Sources, và Application sẽ trang bị cho bạn khả năng gỡ lỗi mạnh mẽ, cải thiện chất lượng báo cáo bug, và giúp bạn trở thành một thành viên hiệu quả hơn trong đội phát triển. Đây là một kỹ năng nền tảng, song hành với các kiến thức về kiểm thử thủ công, kiểm thử chức năng, và cả khi bạn bắt đầu học về tự động hóa kiểm thử hoặc tìm hiểu về HTML, CSS, JavaScript.
Đừng ngần ngại mở Dev Tools trong mọi phiên kiểm thử. Thực hành là cách tốt nhất để làm quen với các công cụ này và khám phá thêm nhiều tính năng hữu ích khác mà bài viết chưa đề cập hết (như panel Performance, Lighthouse, Security, v.v.). Hãy biến Dev Tools trở thành một phần không thể thiếu trong bộ công cụ QA của bạn.
Hy vọng bài viết này mang lại cho các bạn những kiến thức bổ ích. Hẹn gặp lại các bạn trong các bài tiếp theo của series “Lộ trình Kỹ sư QA (Tester)”.
