Chào bạn đọc lại là bản thân đây, lần này quay trở lại với một chủ đề bắt đầu nhưng ko lạ
1. Lời mở đầu
Bạn đã khi nào tò tìm rằng trang web bạn sẽ kiểm demo có cấu trúc như cố nào, hoàn toàn có thể xem text, màu, phong cách chữ 1 cách nhanh giường thay vì chưng dùng thêm một trong những phần mềm hoặc lạch cạnh đi hỏi mấy ông developer.
Bạn đang xem: Cách kiểm tra phần tử
Bạn vẫn muốn biết từng kích hoạt mà bạn click, request gởi đi thảm bại hay thành công
Hay bạn có nhu cầu biết một số lỗi bởi server và muốn cung cấp dev của chúng ta tìm lỗi.
Tôi vẫn biết một cách đơn giản là kiểm tra phần tử hay còn được gọi là Inspect element
1. Elements
Muốn xem cấu tạo trang web 1 cách nhanh độc nhất trên Chrome các bạn làm như sau:
Click con chuột phảiChọn InspectLúc này cấu trúc Inspect element vẫn hiển thị bao hàm các tab chính
ElementsConsoleSourceNetworkPerformanceMemoryApplicationSecurityAuditsNgoài ra còn 1 số ít tab nhỏ khác và chọn kiểu hiển thị (mobile hay website)Đầu tiên là tab Elements (hình như dưới)
Ví dụ:
Bạn muốn biến hóa text để chạy thử hiển thị thì cũng cứ bạo dạn nhập thôi vày nếu code giỏi thì đều thứ bạn nghịch nó sẽ không lưu đâu, code nhưng lởm thì đó là bug rồi
Hay bạn muốn lấy mã màu chính xác của 1 vùng trên website ta triển khai như sau
Click vào vùng ô vuông cất màu vào tab Style (vùng khoanh đỏ)
Hover chuột trên màn hình vào khoanh vùng cần rước màu và bấm vào trái
Tại đây màu sắc và mã màu được hiển thị, việc của bạn chỉ việc đối chiếu thôi
Xem thêm: Cách Mở File Raw Trong Photoshop Cs6, Introduction To Camera Raw Files For Photoshop Cc
2. Console
Đây là nơi kết cấu dữ liệu sẽ triển khai như nàokiểu như
Điều này sẽ hữu dụng cho các bạn hơn khi chúng ta biết về kỹ thuật, bạn sẽ hiểu cấu trúc dữ liệu tất cả đúng hay là không đồng thời cung cấp dev làm việc kết quả hơn.
Cũng là địa điểm lỗi đã hiển thị là nơi bản nhìn thấy. Khi gồm lỗi chúng ta không cần quan tâm nó là gì , cũng không đề nghị hiểu nó không đúng ở đâu. Việc của bạn là copy mẫu đoạn lỗi đó và gửi mang đến dev thôi.
Ví dụ như:
3. Sources
Khi các bạn test 1 màn hình hay như là 1 function như thế nào đó, để giúp dev log bug đó ở class làm sao cho cấp tốc gọn hơn thế thì bạn lựa chọn tab Source. Tại đây bạn có thể biết được bug đang xẩy ra tại class nào. Dẫu vậy đây chỉ là khám nghiệm thôi, chứ nguồn gốc bug vạc sinh gồm phải vày class đó hay class cha của nó hay không thì cứ nhằm dev, chuyên môn của bọn họ sâu hơn đã hiểu cùng biết vì sao nhanh hơnPhần này hay thì Tester cũng chỉ quan sát thôi chứ cũng không làm những gì được
4. Network
Tab này khá quan trọng, đây là nơi ta hiểu rằng request mình gửi đi có xúc tiến thành công tuyệt thất bại, thời gian request là bao lâu, repone trả về là gì.
Như hình ảnh trên ta rất có thể nhìn thấy những request gửi đi sẽ có hiệu quả là 200 thành côngTương ứng với các respone:
1xx: Informational – Yêu ước (request) đã có được nhận, liên tục tiến trình xử lí2xx: Success/Unsuccess – Thành công/ ko thành công3xx: Redirection – chuyển hướng4xx: Client Error – Yêu mong sai cú pháp hoặc ko thỏa đáng5xx: vps Error – thiết bị chủ gặp gỡ lỗiTa có thể đọc được từng request nào thì gặp gỡ lỗi gì, việc biết chi tiết đó là bug vì chưng đâu cũng thuận lợi giúp chúng ta log bug hợp lý hơn5. Kết luận
Trên đây mình chỉ liệt kê 4 tab đầu , hết sức cơ bạn dạng của vấn đề Inspect cơ mà mình đã từng có lần được trải nhiệm qua. Nó khá đơn giản dễ dàng mà ai làm nghiệp vụ test cũng đều cần biết. Nếu có thời gian khám phá thì lần sau mình đã viết thêm về chủ đề này.Mong rằng phần nhiều trải nhiệm vẫn tồn tại non nớt của bản thân mình sẽ giúp bạn áp dụng được điều nào đó vào trong công việc của mình.
