Tính năng mới trong Công cụ cho nhà phát triển (Chrome 90)

Công cụ gỡ lỗi hộp linh hoạt CSS mới

Công cụ cho nhà phát triển hiện có các công cụ gỡ lỗi hộp linh hoạt CSS chuyên dụng!

Khi một phần tử HTML trên trang của bạn có display: flex hoặc display: inline-flex được áp dụng cho phần tử đó, bạn có thể thấy huy hiệu flex bên cạnh huy hiệu đó trong bảng điều khiển Phần tử. Nhấp vào huy hiệu để bật/tắt chế độ hiển thị lớp phủ linh hoạt trên trang.

Trong ngăn Styles (Kiểu), bạn có thể nhấp vào biểu tượng mới bên cạnh display: flex hoặc display: inline-flex để mở trình chỉnh sửa Flexbox. Trình chỉnh sửa hộp linh hoạt cung cấp một cách nhanh chóng để chỉnh sửa các thuộc tính của flexbox. Hãy thử ngay nào!

Ngoài ra, ngăn Layout (Bố cục) có phần Flexbox (Flexbox), hiển thị tất cả thành phần flexbox trên . Bạn có thể bật/tắt lớp phủ của từng phần tử.

Vấn đề về Chromium: 1166710, 1175699

Lớp phủ mới Chỉ số quan trọng chính của trang web

Hiển thị trực quan và đo lường hiệu suất trang một cách hiệu quả hơn nhờ lớp phủ Core Web Vitals mới.

Chỉ số quan trọng chính của trang web là một sáng kiến của Google nhằm cung cấp hướng dẫn thống nhất về các tín hiệu chất lượng mà là rất cần thiết để cung cấp trải nghiệm người dùng tuyệt vời trên web.

Mở Trình đơn lệnh, chạy lệnh Show Rendering (Hiển thị kết xuất), sau đó bật Core Web Hộp đánh dấu Vitals.

Lớp phủ hiện hiển thị:

• Nội dung lớn nhất hiển thị (LCP): đo lường hiệu suất tải. Để cung cấp cho người dùng phù hợp LCP sẽ xảy ra trong vòng 2, 5 giây kể từ khi trang bắt đầu tải lần đầu tiên.
• Độ trễ đầu vào đầu tiên (FID): đo lường mức độ tương tác. Để cung cấp trải nghiệm tốt cho người dùng, trang phải có FID dưới 100 mili giây.
• Điểm số tổng hợp về mức thay đổi bố cục (CLS): đo lường độ ổn định của hình ảnh. Để cung cấp cho người dùng phù hợp trải nghiệm của bạn, trang nên duy trì CLS ở mức dưới 0,1.

Vấn đề về Chromium: 1152089

Cập nhật thẻ Vấn đề

Đã di chuyển số lượng vấn đề sang thanh trạng thái trên Console

Nút số lượng vấn đề mới hiện được thêm vào thanh trạng thái trên Bảng điều khiển để cải thiện khả năng hiển thị các cảnh báo về sự cố. Thao tác này sẽ thay thế thông báo vấn đề trong Bảng điều khiển.

Vấn đề về Chromium: 1140516

Báo cáo sự cố về Hoạt động đáng tin cậy trên web

Giờ đây, thẻ Vấn đề sẽ báo cáo các vấn đề về Hoạt động đáng tin cậy trên web. Mục đích của quy tắc này là giúp các nhà phát triển tìm hiểu và khắc phục các vấn đề về Hoạt động đáng tin cậy trên web trên trang web của họ, nhờ đó cải thiện chất lượng .

Mở một Hoạt động đáng tin cậy trên web. Sau đó, hãy mở thẻ Vấn đề bằng cách nhấp vào Số lượng vấn đề trong thanh trạng thái của Bảng điều khiển để xem các vấn đề. Xem bài nói chuyện này của Andre để tìm hiểu tìm hiểu thêm về cách tạo và triển khai Hoạt động đáng tin cậy trên web.

Vấn đề về Chromium: 1147479

Định dạng chuỗi dưới dạng giá trị cố định chuỗi JavaScript (hợp lệ) trong Console

Hiện tại, Bảng điều khiển định dạng các chuỗi dưới dạng giá trị cố định dạng chuỗi JavaScript hợp lệ trong Bảng điều khiển. Trước đây, Bảng điều khiển sẽ không thoát khỏi dấu ngoặc kép khi in chuỗi.

Vấn đề về Chromium: 1178530

Ngăn Mã thông báo tin cậy mới trong bảng điều khiển Application (Ứng dụng)

Giờ đây, Công cụ cho nhà phát triển hiển thị tất cả Mã thông báo tin cậy có sẵn trong ngữ cảnh duyệt web hiện tại trong API Tin cậy Ngăn Mã thông báo, trong bảng điều khiển Application (Ứng dụng).

Trust Token là một API mới giúp chống lại hành vi lừa đảo và phân biệt bot với người thật mà không bị động theo dõi. Tìm hiểu cách bắt đầu sử dụng Mã thông báo tin cậy.

Vấn đề về Chromium: 1126824

Mô phỏng tính năng đa phương tiện color-gamut của CSS

Truy vấn nội dung nghe nhìn color-gamut cho phép bạn kiểm thử khoảng màu gần đúng được hỗ trợ bởi trình duyệt và thiết bị đầu ra. Ví dụ: nếu truy vấn phương tiện color-gamut: p3 trùng khớp, thì có nghĩa là thiết bị của người dùng hỗ trợ hệ màu Display-P3.

Mở Trình đơn lệnh, chạy lệnh Show Rendering (Hiển thị kết xuất), sau đó đặt Emulate CSS (Mô phỏng CSS) trình đơn thả xuống color-gamut của tính năng đa phương tiện.

Vấn đề về Chromium: 1073887

Cải thiện công cụ Ứng dụng web tiến bộ

Giờ đây, Công cụ cho nhà phát triển sẽ hiển thị thông báo cảnh báo chi tiết hơn về khả năng cài đặt Ứng dụng web tiến bộ (PWA) trong Bảng điều khiển, kèm theo đường liên kết đến tài liệu.

Giờ đây, ngăn Manifest (Tệp kê khai) sẽ hiển thị một cảnh báo nếu nội dung mô tả của tệp kê khai vượt quá 324 ký tự ký tự.

Ngoài ra, giờ đây, ngăn Manifest (Tệp kê khai) sẽ hiện một thông báo cảnh báo nếu ảnh chụp màn hình của PWA không xuất hiện phù hợp với các yêu cầu. Tìm hiểu thêm về thuộc tính ảnh chụp màn hình của PWA và các yêu cầu của thuộc tính này vào đây.

Vấn đề về Chromium: 1146450, 1169689, 965802

Cột Remote Address Space mới trong bảng điều khiển Mạng

Sử dụng cột Remote Address Space mới trong bảng điều khiển Mạng để xem không gian địa chỉ IP mạng của mỗi tài nguyên mạng.

Vấn đề về Chromium: 1128885

Điểm cải tiến về hiệu suất

Hiệu suất tải trang khi Công cụ cho nhà phát triển đang mở hiện đã được cải thiện. Trong một số trường hợp đặc biệt, chúng tôi nhận thấy tăng gấp 10 lần hiệu suất.

Công cụ cho nhà phát triển thu thập dấu vết ngăn xếp và đính kèm chúng vào thông báo trên bảng điều khiển hoặc các tác vụ không đồng bộ để dùng sau này mức sử dụng của nhà phát triển trong trường hợp xảy ra sự cố. Vì sự kiện thu thập này phải diễn ra đồng bộ trong công cụ trình duyệt, việc thu thập dấu vết ngăn xếp chậm có thể làm chậm đáng kể tốc độ trang, Công cụ cho nhà phát triển đang mở. Chúng tôi đã giảm đáng kể chi phí thu thập dấu vết ngăn xếp.

Hãy chú ý theo dõi bài đăng chi tiết hơn trên blog về kỹ thuật có giải thích về cách triển khai.

Vấn đề về Chromium: 1069425, 1077657

Hiển thị các tính năng được phép/không được phép trong chế độ xem chi tiết của Khung

Giờ đây, chế độ xem chi tiết khung hiển thị danh sách tính năng trình duyệt được phép và không được phép do Chính sách về quyền.

Chính sách về quyền là một API nền tảng web giúp một trang web có thể cho phép hoặc chặn việc sử dụng các tính năng của trình duyệt trong khung của chính trình duyệt hoặc trong iframe mà trình duyệt nhúng.

Vấn đề về Chromium: 1158827

Cột SameParty mới trong ngăn Cookie

Lúc này, ngăn Cookie trong bảng điều khiển Application (Ứng dụng) hiển thị thuộc tính SameParty của các cookie. Chiến lược phát hành đĩa đơn Thuộc tính SameParty là một thuộc tính boolean mới cho biết có nên đưa cookie vào hay không các yêu cầu đến nguồn gốc của cùng một Nhóm bên thứ nhất.

Vấn đề về Chromium: 1161427

Ngừng sử dụng tính năng hỗ trợ không chuẩn cho fn.displayName

Ngừng hỗ trợ cho fn.displayName không chuẩn. Thay vào đó, hãy sử dụng fn.name.

Theo truyền thống, Chrome hỗ trợ thuộc tính fn.displayName không chuẩn làm một cách để để kiểm soát tên gỡ lỗi cho các hàm xuất hiện trong error.stack và trong ngăn xếp Công cụ cho nhà phát triển dấu vết. Trong ví dụ trên, Ngăn xếp lệnh gọi trước đó sẽ hiển thị noLongerSupport.

Thay thế fn.displayName bằng fn.name tiêu chuẩn có thể được định cấu hình (thông qua Object.defineProperty) trong ECMAScript 2015 để thay thế thuộc tính fn.displayName không chuẩn.

fn.displayName hỗ trợ không đáng tin cậy và không nhất quán trên các công cụ trình duyệt. Nó chậm thu thập dấu vết ngăn xếp, một chi phí mà nhà phát triển luôn phải trả bất kể họ có thực sự sử dụng fn.displayName hoặc không.

Vấn đề về Chromium: 1177685

Ngừng sử dụng Don't show Chrome Data Saver warning trong trình đơn Cài đặt

Cài đặt Don't show Chrome Data Saver warning bị xóa do Trình tiết kiệm dữ liệu Chrome đã không dùng nữa.

Vấn đề về Chromium: 1056922

Các tính năng thử nghiệm

Tự động báo cáo vấn đề về độ tương phản thấp trong thẻ Vấn đề

Công cụ cho nhà phát triển đã tự động thêm tính năng hỗ trợ thử nghiệm để báo cáo các vấn đề về độ tương phản trong thẻ Vấn đề.

Văn bản có độ tương phản thấp là vấn đề về khả năng tiếp cận có thể phát hiện tự động phổ biến nhất trên web. Việc hiển thị các vấn đề này trong thẻ Vấn đề giúp nhà phát triển phát hiện những vấn đề này dễ dàng hơn.

Mở một trang có vấn đề về độ tương phản thấp (ví dụ: demo này). Sau đó, hãy mở thẻ Vấn đề bằng cách nhấp vào nút Số lượng vấn đề trong thanh trạng thái của Bảng điều khiển để xem các vấn đề.

Vấn đề về Chromium: 1155460

Chế độ xem dạng cây hỗ trợ tiếp cận đầy đủ trong bảng điều khiển Phần tử

Giờ đây, bạn có thể bật/tắt để xem một trang ở chế độ xem dạng cây hỗ trợ tiếp cận đầy đủ mới và đã cải tiến.

Ngăn hỗ trợ tiếp cận hiện tại cung cấp một màn hình giới hạn các nút, chỉ hiển thị chuỗi đối tượng cấp trên trực tiếp từ nút gốc đến nút được kiểm tra. Mục đích của chế độ xem dạng cây hỗ trợ tiếp cận mới để cải thiện điều đó và giúp cây hỗ trợ tiếp cận trở nên dễ khám phá, hữu ích và dễ dàng hơn cho các nhà phát triển để sử dụng.

Sau khi bật thử nghiệm, một nút mới sẽ xuất hiện trong bảng Thành phần. Bạn có thể nhấp vào để chuyển đổi giữa cây DOM hiện tại và cây hỗ trợ tiếp cận đầy đủ.

Xin lưu ý rằng đây là một thử nghiệm đang ở giai đoạn đầu. Chúng tôi dự định cải thiện và mở rộng chức năng này theo thời gian.

Vấn đề về Chromium: 887173

Tải kênh xem trước xuống

Hãy cân nhắc việc sử dụng Chrome Canary, Nhà phát triển hoặc Beta làm trình duyệt phát triển mặc định của bạn. Các kênh xem trước này cho phép bạn truy cập vào các tính năng mới nhất của Công cụ cho nhà phát triển, kiểm thử các API nền tảng web tiên tiến và tìm ra các vấn đề trên trang web của bạn trước khi người dùng làm điều đó!

Liên hệ với nhóm Công cụ của Chrome cho nhà phát triển

Sử dụng các lựa chọn sau để thảo luận về các tính năng và thay đổi mới trong bài đăng, hoặc bất cứ nội dung nào khác liên quan đến Công cụ cho nhà phát triển.

• Gửi đề xuất hoặc phản hồi cho chúng tôi qua crbug.com.
• Báo cáo sự cố Công cụ cho nhà phát triển bằng cách sử dụng Tuỳ chọn khác   > Trợ giúp > Báo cáo vấn đề về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
• Tweet tại @ChromeDevTools.
• Để lại bình luận về Tính năng mới trong Video trên YouTube của Công cụ cho nhà phát triển hoặc Mẹo video trên YouTube trong Công cụ cho nhà phát triển.

Tính năng mới trong Công cụ cho nhà phát triển

Danh sách mọi nội dung được đề cập trong loạt bài Tính năng mới trong Công cụ cho nhà phát triển.