Có gì mới trong DevTools của Chrome 78

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

eliminating render-blocking resources 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

Using the Request Blocking tab to block the problematic scripts. 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

The Performance score improved to 97 after enabling request blocking. 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

Recording Payment Handler events.

  1. 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)
  2. Khi có sự kiện Payment, từng dòng thông tin sẽ được lưu lại

Viewing a Payment Handler event.

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 screenshot of the 'Third-Party Usage' audit in the Lighthouse report UI.

Đứ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

The LCP marker in the Timings section.

Để 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ó

The Related Node section of the Summary tab.

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 Main Menu > Help > Report a DevTools issue.

Video

https://www.youtube.com/watch?v=VNkctDLYP6o