Master chrome devtool là cần thiết cho một frontend developer, mình sẽ bắt đầu series cập nhập những tính năng mới nhất của Chrome, theo như lộ trình định sẵn thì cứ 6 tuần nó sẽ có bản cập nhập mới cho Chrome
Kết hợp Audit với các tính năng khác
Bên trong cửa sổ Audit, chúng ta có thể dùng kết hợp với các tính năng khác của DevTools như Request blocking (để chặn request đến một resource nào đó) và Local Overrides (cho phép dùng một file dưới local để thay cho file đang chạy thực tế)
Ví dụ, Audits cho kết quả 70 điểm hiệu năng, nó đề nghị chúng ta bỏ qua một sổ resource block lại quá trình render
Hình 1 – Nhận được 70 điểm hiệu năng
Hình 2 – Có 3 đoạn script đang ảnh hưởng đến render
Giờ trong cửa sổ Audit này, chúng ta mở cửa sổ request blocking
Hình 3 – Sử dụng Request blocking để chặn, ko load các đoạn script là nguyên nhân của block render
Hình 4 – Sau khi đã bỏ qua các đoạn script này, chúng ta nhận được kết quả điểm Audit là 97
Bạn có thể tự làm lại để nhớ cho lâu
Công cụ debug Payment Handler
Payment Handler là một một API mới của web để xử lý các thao tác liên quan đến tiền trao, cháo múc. Bạn có thể đọc thêm về Payment Handler API ở đây
Trong phần Background services của cửa sổ Application sẽ có thêm công cụ để debug API này
- Mở DevTools, vào tab Application
- Chọn Payment Handler trong cột bên trái
- Click Record. DevTools sẽ lưu lại các sự kiện của Payment Handler trong 3 ngày, ngay cả khi đã đóng DevTools
- Bật Show events from other domains nếu các sự kiện Payment xảy ra trên các tên miền khác (thường là vậy, chúng ta dùng dịch vụ của bên thứ 3 như Visa)
- Khi có sự kiện Payment, từng dòng thông tin sẽ được lưu lại
Lighthouse 5.2
Audit sử dụng phiên bản Lighthouse 5.2 (thật ra được đưa vào từ Chrome 77, nhưng mấy bạn ở Google quên note lại cho bà con, giờ mới note lại)
Bổ sung chẩn đoán Third-Party Usage cho chúng ta dánh sách các file đang được request từ bên ngoài và đoạn code đó nó ảnh hưởng thế nào lên main thread khi trang được load
Đứa nào chiếm Contentful Paint lớn nhất
Khi đánh giá hiệu năng của trang trong tab Performance, chổ Timings sẽ có một ô đánh dấu là LCP (Largest Contentful Paint), nó là thời gian render của element kích thước lớn nhất trên viewport
Để biết nó là DOM nào
- Click vào cái marker LCP
- Chổ Related Node trong phần Summary bên dưới, click vào element đang có
Gửi issue của DevTools cho team Google
Nếu bạn phát hiện bất kỳ con bug nào của DevTools, hoặc yêu cầu một tính năng nào đó cần thiết cho DevTools, gửi ngay cho team này ở Google.
Main Menu > Help > Report a DevTools issue
