Trang này được dịch bởi Cloud Translation API.

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

Jecelyn Yeen

Công cụ gỡ lỗi CSS flexbox mới

Công cụ cho nhà phát triển hiện có các công cụ gỡ lỗi CSS flexbox chuyên dụng!

Công cụ gỡ lỗi CSS flexbox

Khi một phần tử HTML trên trang của bạn được áp dụng display: flex hoặc display: inline-flex, bạn có thể thấy huy hiệu flex bên cạnh phần tử đó 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 hộp linh hoạt. Hãy thử ngay!

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

Phần Hộp linh hoạt trong ngăn Bố cục

Các sự cố với Chromium: 1166710, 1175699

Lớp phủ Các chỉ số quan trọng về trang web mới

Dễ dàng trực quan hoá và đo lường hiệu suất trang bằng lớp phủ Các chỉ số quan trọng về trang web mới.

Các chỉ số quan trọng về 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 cần thiết để mang lại trải nghiệm chất lượng cao cho người dùng trên web.

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

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

Thời gian hiển thị nội dung lớn nhất (LCP): đo lường hiệu suất tải. Để mang lại trải nghiệm tốt cho người dùng, LCP nên diễn ra trong vòng 2,5 giây kể từ khi trang bắt đầu tải lần đầu tiên.
Thời gian phản hồi lần tương tác đầu tiên (FID): đo lường tính tương tác. Để mang lại trải nghiệm tốt cho người dùng, các 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 về hình ảnh. Để cung cấp trải nghiệm tốt cho người dùng, các trang nên duy trì điểm CLS thấp hơn 0,1.

Lớp phủ Các chỉ số quan trọng về trang web

Vấn đề với Chromium: 1152089

Thông tin cập nhật về thẻ Vấn đề

Di chuyển số lượng vấn đề sang thanh trạng thái trên Bảng điều khiển

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

Số lượng vấn đề trong thanh trạng thái của Play Console

Vấn đề với Chromium: 1140516

Báo cáo vấn đề 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. Điều này nhằm giúp nhà phát triển hiểu và khắc phục các vấn đề về Hoạt động đáng tin cậy trên web của trang web, qua đó cải thiện chất lượng ứng dụ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 nút Số lượng vấn đề trên thanh trạng thái của Bảng điều khiển để xem các vấn đề. Hãy xem bài nói chuyện này của Andre để 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.

Các vấn đề về Hoạt động đáng tin cậy trên web trong thẻ Vấn đề

Vấn đề với Chromium: 1147479

Định dạng 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

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, Console (Bảng điều khiển) không thoát khỏi dấu ngoặc kép khi in chuỗi.

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

Vấn đề với Chromium: 1178530

Ngăn New Trust Tokens (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 ngăn Mã thông báo tin cậy mới, thuộc bảng điều khiển Ứng dụng.

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

Ngăn mới "Trust Tokens" (Mã thông báo tin cậy)

Vấn đề với 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 trình duyệt và thiết bị đầu ra hỗ trợ. Ví dụ: nếu truy vấn nội dung nghe nhìn color-gamut: p3 khớp, tức là thiết bị của người dùng hỗ trợ không gian màu Display-P3.

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

Vấn đề với Chromium: 1073887

Cải thiện công cụ của Ứ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 một đường liên kết đến tài liệu.

Cảnh báo về khả năng cài đặt PWA

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

Cảnh báo cắt bớt nội dung mô tả về PWA

Ngoài ra, ngăn Manifest (Tệp kê khai) giờ đây sẽ hiển thị cảnh báo nếu ảnh chụp màn hình của PWA không khớ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 tại đây.

Cảnh báo ảnh chụp màn hình PWA

Sự cố 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 từng tài nguyên mạng.

Cột "Không gian địa chỉ từ xa" mới

Vấn đề với 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 được 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 hiệu suất đã cải thiện 10 lần.

Công cụ cho nhà phát triển thu thập dấu vết ngăn xếp và đính kèm 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ộ để nhà phát triển sử dụng sau này trong trường hợp có sự cố. Vì quá trình thu thập này phải diễn ra đồng bộ trong công cụ trình duyệt, nên việc thu thập dấu vết ngăn xếp chậm có thể làm chậm đáng kể trang khi mở DevTools. Chúng tôi đã tìm cách giảm đáng kể mức hao tổn của tính năng 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 về kỹ thuật trên blog được giải thích về cách triển khai.

Các sự cố với Chromium: 1069425, 1077657

Hiện các tính năng được cho phép/không được phép trong chế độ xem Chi tiết khung

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

Chính sách quyền là một API nền tảng web cho phép một trang web 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 nó hoặc trong iframe mà trang web đó nhúng.

Tính năng được phép/không được phép dựa trên Chính sách về quyền

Vấn đề với Chromium: 1158827

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

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

Cột SameParty

Vấn đề với Chromium: 1161427

Đã ngừng hỗ trợ `fn.displayName` không chuẩn

Chúng tôi đã ngừng hỗ trợ fn.displayName không chuẩn. Sử dụng fn.name thay thế.

Ví dụ về cách sử dụng của displayName

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

Thay thế fn.displayName bằng fn.name tiêu chuẩn. Bạn có thể đị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.

Dịch vụ hỗ trợ dành cho fn.displayName không đáng tin cậy và không nhất quán trên các công cụ trình duyệt. Tính năng này làm chậm quá trình thu thập dấu vết ngăn xếp – một khoản 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 hay không.

Ví dụ về cách sử dụng tên

Vấn đề với Chromium: 1177685

Không dùng `Don't show Chrome Data Saver warning` trong trình đơn Cài đặt nữa

Chế độ cài đặt Don't show Chrome Data Saver warning bị xoá vì Trình tiết kiệm dữ liệu Chrome không còn được dùng nữa.

Đã ngừng sử dụng chế độ cài đặt "Không hiện cảnh báo của Trình tiết kiệm dữ liệu trên Chrome"

Vấn đề với Chromium: 1056922

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

Tự động báo cáo sự cố có độ 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 cho các vấn đề về độ tương phản báo cáo trong thẻ Vấn đề.

Văn bản có độ tương phản thấp là vấn đề thường gặp nhất về hỗ trợ tiếp cận tự động phát hiện trên web. Việc hiển thị những vấn đề này trong thẻ Vấn đề sẽ giúp nhà phát triển dễ dàng tìm thấy những vấn đề này.

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

Tự động báo cáo sự cố có độ tương phản thấp

Vấn đề với Chromium: 1155460

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

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

Ngăn hỗ trợ tiếp cận hiện tại cung cấp chế độ hiển thị 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 đã kiểm tra. Chế độ xem dạng cây hỗ trợ tiếp cận mới nhằm cải thiện điều đó và giúp cây hỗ trợ tiếp cận dễ khám phá, hữu ích và dễ sử dụng hơn.

Sau khi bật thử nghiệm, một nút mới sẽ xuất hiện trong bảng điều khiển Phần tử, hãy nhấp để chuyển đổi giữa cây DOM hiện có 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.

Chế độ xem dạng cây đầy đủ về khả năng hỗ trợ tiếp cận

Vấn đề với Chromium: 887173

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

Hãy cân nhắc sử dụng Chrome Canary, Dev hoặc Beta làm trình duyệt phát triển mặc định. Các kênh xem trước này cung cấp cho bạn quyề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, thử nghiệm API nền tảng web tiên tiến và tìm ra sự cố trên trang web của bạn trước khi người dùng của bạn 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 đây để thảo luận về các tính năng mới và thay đổi trong bài đăng hoặc bất cứ vấn đề nào khác liên quan đến Công cụ cho nhà phát triển.

Hãy 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ủa Công cụ cho nhà phát triển bằng cách sử dụng phần Tuỳ chọn khác > Trợ giúp > Báo cáo sự cố về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
Tweet tại @ChromeDevTools.
Hãy để 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 video trên YouTube.