- Highlight tất cả element đang áp dụng CSS
- Lighthouse
- Xem nội dung của WebSocket binary
- Chụp ảnh màn hình
- Bổ sung filter Service worker trong tab Network
- Performance recording
Highlight tất cả element đang áp dụng CSS
Khi hover lên một property CSS, giao diện sẽ được highlight những element nào đang chịu ảnh hưởng
Lighthouse
Thêm mục đánh giá Tap targets are not sized appropriately, đại khái là nó sẽ kiểm tra các element để user click, như là button, a, role=button, có được set kích thước phù hợp trên mobile hay chưa, các element có bị đặt gần nhau quá không, vì gần nhau quá user có thể vô tình click nhầm
Mục đánh giá cho PWA bây giờ được quánh giá theo cơ chế Badge, tức là anh đáp ứng đủ 9 tiêu chí nhận huân chương hạng B, 10 tiêu chí huân chương hạng A.
Xem nội dung của WebSocket binary
Mở tab Network, chọn filter WS để lọc các connection dạng WebSocket
Chọn vào tên WebSocket muốn xem
Mở tab Messages
Chọn vào binary message muốn xem, bạn có thể Copy vào clipboard , thay đổi kiểu định dạng sang Base64 hoặc UTF-8
Chụp ảnh màn hình
Tính năng này có lâu rồi, nhưng trước đây để access được hơi khó khăn vì bị ẩn đi, từ giờ nó sẽ được đưa vào Command Menu
Control+Shift+P
để mở Command Menu, gõ area
, chọn tiếp Capture area screenshots
Kéo thả vào vùng muốn chụp
Bổ sung filter Service worker trong tab Network
Gõ is:service-worker-initiated
hoặc is:service-worker-intercepted
trong tab Network để lọc tất cả request được khởi tạo hoặc khả năng bị modified bở service worker
Performance recording
Cửa sổ Performance sẽ có thêm phần Long Task, những task nào tốn quá nhiều thời gian sẽ được gắn thêm marker màu đỏ
Phần Timings cũng bổ sung mục First Pain
Initializing...