Chrome DevTools của Google Chrome 78 có gì mới?

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

1. Mở DevTools, vào tab Application
2. Chọn Payment Handler trong cột bên trái
3. 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
4. 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)
5. 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

1. Click vào cái marker LCP
2. 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