CÁCH SỬ DỤNG F12 CHROME

Nhiều website về cơ phiên bản là khối hệ thống phức tạp văn minh với html, css, website services, tin tức liên lạc được mã hóa, kịch bản trình duyệt/ ứng dụng/ một tủ sách được triển lẵm (giống như javascript, flash…), sự phong phú của các ứng dụng/ thư viện/ kho dữ liệu có thể chạy ngơi nghỉ phía sever thêm vào đó là sự việc cân bởi tải…, có rất nhiều máy công ty và trình trông nom khác nhau, điện thoại cảm ứng di cồn và nền hệ thống, từng phiên bạn dạng khác nhau, giữa chúng bao gồm sự khác biệt bé dại nhưng đôi khi là xứng đáng kể, sự chuyển đổi trong vận tốc kết nối, chuyển đổi công nghệ một biện pháp nhanh chóng, và những tiêu chuẩn, những giao thức không giống nữa. Mặc dù sự demo nghiệm thuở đầu của các trang web là kha khá đơn giản, kiểm tra những trang website của khối hệ thống front end, back-end, lớp trung gian, dịch vụ web, các đại lý dữ liệu, bảo mật, hiệu năng…, có thể phức tạp hoặc là hơn như bất kỳ loại không giống nào của ứng dụng.

Bạn đang xem: Cách sử dụng f12 chrome

Để hỗ trợ cho câu hỏi kiểm tra những trang web trải qua giao diện giao diện của nó, tương đối nhiều trình chăm nom web thông dụng thường bao gồm 1 tập hợp những “Developer Tools”, nó là hữu dụng trong việc testing (đối cùng với Tester) cùng debugging (đối cùng với Developer) và trong sự trở nên tân tiến của các kịch bạn dạng test trường đoản cú động. Nó bao gồm các tập đúng theo như sau:

DevTool ChromeFirefox developer toolsIE- Use the F12 developer toolsSafari for developers – We Inspector.

Để biết thêm thông tin hãy xem các phần liên quan đến việc kiểm tra những nguồn Web không giống nhau (Mobile Testing Resources, web Resources QA và Testing, kiểm tra an ninh tài nguyên Web, khoáng sản web khả dụng…) vào SoftwareQATest.com the "other Resources ".

Hôm nay tôi sẽ trình làng với chúng ta về cách vận dụng DevTools Chrome vào câu hỏi test.

Tổng quan về Chrome DevTools

Chrome Developer Tools (gọi tắt là DevTools), là một trong tập hợp các tác mang web và điều khoản debugging được tích hợp vào Google Chrome. DevTools cung cấp cho các Web developers truy vấn sâu rộng vào bên trong trình để ý và áp dụng web của họ. áp dụng DevTools có tính năng theo dõi một cách tác dụng các vấn đề về bố trí để có thể giảm thiểu những vấn đề đó trong phần mềm, đặt những điểm giới hạn JavaScript và có được hiểu biết để buổi tối ưu hóa cho code.

Cách truy cập DevTools

Để truy cập đến DevTools, mở một trang web hoặc vận dụng Web trong Google Chrome, ví dụ như sau:

Chọn thực đơn Chrome ở phía bên trên góc phải cửa sổ trình chuyên chú của bạn, tiếp nối chọn Tools -> Developer Tools.

*

•Trên một trang bất kỳ, nhấp phải chuột trên một nhân tố và chọn Inspect Element.

•Cửa sổ DevTools sẽ tiến hành mở ở bên dưới trình trông nom của bạn

Một số phím tắt hữu dụng cho bài toán mở DevTools:

•Sử dụng Ctrl+Shift+I (hoặc Cmd+Opt+I bên trên Mac) nhằm mở DevTools.

•Sử dụng Ctrl+Shift+J (hoặc Cmd+Opt+J bên trên Mac) để mở DevTools và tập trung đến Console.

•Sử dụng Ctrl+Shift+C (hoặc Cmd+Shift+C bên trên Mac) nhằm mở DevTools vào Inspect Element mode, hoặc tắt Inspect Element mode nếu DevTools đang được mở.

Cửa sổ DevTools

DevTools được tổ chức thành các nhóm task theo định hướng trong thanh chế độ ở phía bên trên cùng của cửa ngõ sổ. Mỗi thanh hình thức và bảng tinh chỉnh và điều khiển tương ứng cho phép bạn thao tác làm việc với một loại hình ví dụ của trang hoặc tin tức ứng dụng bao gồm cả những yếu tố DOM, resources, và sources.

*

Nhìn chung bao gồm 8 đội Tool chính là có sẵn nhằm view Developer Tools:

ElementsResourcesNetworkSourcesTimelineProfilesAuditsConsole

=> bạn cũng có thể sử dụng tổng hợp phím Ctrl+< hoặc Ctrl + > để dịch rời giữa những tab điều khiển.

#1. Elements và Style

1.1 . Elements

Tab này hiển thị HTML của những element trong trang web. Trước lúc có Developer Tools, ta phải sửa CSS, save lại rồi refresh lại page. Ngày nay, ta hoàn toàn có thể sửa thẳng CSS của 1 element vào form phía bên phải, xem công dụng ngay lập tức.

Ngoài ra, ví như phải xây đắp web responsive, ta cũng có thể click vào icon mobile nhằm test trang web trên màn hình các device với độ phân giải khác nhau.

Xem thêm: Sim Số Đẹp Mobi Trả Sau Viettel, Mobi, Vina Số Đẹp Giá Rẻ Nhất

*

Ứng dụng vào Testing

Với các trường gồm chỉ định maxlenght và chặn không có thể chấp nhận được nhập maxlenght, mặc dù nếu chạm mặt phải tài liệu migration (không chặn maxlenght lúc import tài liệu vào), hôm nay nếu code không có thông báo thì đã dẫn mang lại bug dữ liệu. Vị vậy, để ngăn ngừa bug này tester rất cần được xóa maxlenght vào Element và thực hiện nhập thừa maxlenght và check xem hệ thống có xử lý thông báo lỗi giỏi không? Nếu không tồn tại hoặc báo lỗi không nên thì chính là bug rồi đấy.

Với những web tất cả yêu cầu check về responsive họ cũng rất có thể thực hiện bằng phương pháp click vào icon mobile như trên với các độ sắc nét khác nhau nhằm từ đó hoàn toàn có thể tìm ra được các bug về vỡ layout trên những device với độ sắc nét khác nhau: Mobile, PC với từng màn hình...

1.2. Style

Sử dụng tab này bạn có thể kiểm tra được mã màu và định dạng về kiến thiết concept của trang web như sau:

background-color:

color:

font-size:

font...

*

=> nhờ tab này bạn có thể kiểm tra một cách chính xác về mã màu, màu sắc nền, font chữ của đối tượng mà mắt thường không nhìn đúng chuẩn được.

#2. Networks

Ở Tab này, ta hoàn toàn có thể xem toàn thể những lắp thêm được trình duyệt thiết lập về từ server: HTML, CSS, hình ảnh, JS...Tôi thường được sử dụng Tab này để kiểm tra thời gian tải trang, nhằm mục tiêu phát hiện nay ra các bug về performance.

*

Các Ajax request cũng hiện trong Tabs này. Chúng ta có thể click chuột từng request riêng nhằm xem thời gian request chạy, request đang gửi gì lên server, tác dụng trả về từ server. Trường đoản cú đây rất có thể tìm ra được các bug đã sử dụng Ajax nhưng lại code ko chạy báo để Dev khẳng định bug xẩy ra ở client giỏi server.

*

#3. Sources

Tab này hay được áp dụng cho bên Dev nhằm debug.

*

#4. Timeline và Profile

Hai Tab này cũng tương đối ít được sử dụng, đa phần dùng mang lại Dev lúc Javascript chạy quá chậm rãi để tìm hiểu chức năng nào chạy chậm rì rì để từ đó có giải pháp tăng tốc cho website của bạn.

Timeline

*

Profile

*

#5. Resources

Tab resoueces để hiển thị ra những tin tức được lưu trữ trong WebSQL, LocalStorage, Cookies.

*

#6. Audits

Tab này có tính năng kiểm duyệt vận tốc của Website.

Cách sử dụng: Vào Tab này và bấm Run, Developer Tool sẽ tiến hành đo đạc, so sánh vận tốc load của Website để lấy ra bí quyết tăng tốc cho Web khi Web chậm.

*

#7. Console

Tab này vẫn hiển thị phần đông lỗi tương quan tới javascript như: không load được, thiếu thốn mở đóng góp ngoặc, chấm phẩy...Chúng ta rất có thể nhập trực tiếp javascript vào tab này để chạy.

*

Kết luận:

Trên đấy là cách sử dụng các Tab vào DevTool để thực hiện vào bài toán Test một số viewpoint mang lại Web áp dụng trình chăm nom Chrome. Bao gồm thể chúng ta trong chúng ta đã biết nhưng có thể nó là vấn đề cần kiếm tìm và có ích đối với chúng ta mới tiếp cận với việc Test web.