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

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

Highlight tất cả element đang áp dụng CSS

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

Tap targets are not sized appropriately

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

WebSocket binary message viewer

Mở tab Network, chọn filter WS để lọc các connection dạng WebSocket

WebSocket binary message viewer

Chọn vào tên WebSocket muốn xem

WebSocket binary message viewer

Mở tab Messages

WebSocket binary message viewer

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

WebSocket binary message viewer

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

Chụp ảnh màn hình

Kéo thả vào vùng muốn chụp

Kéo thả vào vùng muốn chụp

Bổ sung filter Service worker trong tab Network

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

Bổ sung filter Service worker trong tab Network

Bổ sung filter Service worker trong tab Network

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 đỏ

Performance recording

Phần Timings cũng bổ sung mục First Pain

Phần Timings cũng bổ sung mục First Pain

What's New In DevTools (Chrome 74)