Một vài thay đổi đáng chú ý của Chrome 90

Công cụ debug CSS Flexbox xịn xò hơn

Công cụ debug CSS Flexbox xịn xò hơn

Giờ nếu có một HTML element có dạng display: flex hoặc display: inline-flex, bạn sẽ thấy một cái nút bé bé flex trên cái Element panel

Bên dưới Style panel, sẽ có thêm một icon nhỏ kế bên display: flex, click vào đó sẽ mở ra một menu để lựa chọn như trên hình.

Trong Layout Panel sẽ có thêm một khu vực cho Flexbox liệt kê tất cả các element đang có dạng hiển thị flex

Đo performance bằng Core Web Vitals

Core web vitals là một bộ hướng dẫn do google khởi xướng để đánh giá thế nào là một trang web xịn xò.

Ctrl + Shift + P để mở Command menu trong DevTools, tìm mục Show Rendering, click vào checkbox Core Web Vitals

Một ô màu đen nho nhỏ sẽ xuất hiện chứa các thông tin quan trọng sau:

Đo performance bằng Core Web Vitals

Tab Issue

Tab Issue

Số issue có trên trang được move lên trên cùng của Console Panel để nhắc nhở chúng ta ngày này quá tháng nọ.

Bổ sung Trusted Web Activity, lại nhắc nhẹ chúng ta về chất lượng của ứng dụng

Trusted web activity

Xem thêm video này của Andre để hiểu thêm

Định dạng lại chuỗi trong console

Chuỗi trong console sẽ được định dạng theo chuẩn JS string literal, nó sẽ escape ký tự "

Định dạng lại chuỗi trong console

Trust token panel trong Application

Bên trong tab Application, có thêm mục mới Trust Tokens

Trust Token là một API mới giúp chống gian lận, phân biệt người thật với bot, tìm hiểu thêm

New Trust Tokens pane

Ngưng support fn.displayName

Example usage of displayName

Trước đây Chrome vẫn cho phép sử dụng fn.displayName để có dễ trace lỗi lúc debug. Giờ sẽ được thay thế bằng fn.name

Xem toàn bộ các thay đổi khác