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

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

DevTools hiện có các công cụ gỡ lỗi CSS flexbox chuyên dụng!

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ủ flex 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 Flexbox cung cấp một cách nhanh chóng để chỉnh sửa các thuộc tính flexbox. Hãy tự mình trải nghiệm!

Ngoài ra, ngăn Bố cục có phần Flexbox (Hộp xếp linh hoạt), hiển thị tất cả phần tử hộp xếp linh hoạt trên trang. 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 về Các chỉ số quan trọng về trang web

Hình dung và đo lường hiệu suất của trang hiệu quả hơn bằng lớp phủ mới về Các chỉ số quan trọng về trang web.

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ề những tín hiệu chất lượng cần thiết để mang lại trải nghiệm người dùng tuyệt vời trên web.

Mở Command Menu (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 (Chỉ số quan trọng chính của trang web).

Lớp phủ hiện 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. Để đem lại trải nghiệm tốt cho người dùng, LCP phải xảy ra trong vòng 2,5 giây kể từ khi trang bắt đầu tải lần đầu.
• 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.
• Mức thay đổi bố cục tích luỹ (CLS): đo lường độ ổn định của hình ảnh. Để mang lại trải nghiệm tốt cho người dùng, các trang phải duy trì CLS dưới 0,1.

Vấn đề về Chromium: 1152089

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

Chuyển số lượng vấn đề sang thanh trạng thái của Bảng điều khiển

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

Vấn đề về Chromium: 1140516

Báo cáo vấn đề về tính năng Hoạt động đáng tin cậy trên web

Thẻ Vấn đề hiện báo cáo các vấn đề về Hoạt động đáng tin cậy trên web. Mục đích của việc này là 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 của ứ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 đề trong thanh trạng thái Console để xem các vấn đề. Xem buổi trò 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.

Vấn đề về Chromium: 1147479

Định dạng chuỗi dưới dạng giá trị cố định (hợp lệ) của chuỗi JavaScript trong Bảng điều khiển

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

Vấn đề về Chromium: 1178530

Ngăn mới về Mã thông báo tin cậy trong Bảng điều khiển ứng dụng

Giờ đây, DevTools hiển thị tất cả mã thông báo đáng tin cậy có sẵn trong ngữ cảnh duyệt web hiện tại trong ngăn Trust Token (Mã thông báo đáng tin cậy) mới, 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 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.

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

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

Vấn đề về Chromium: 1073887

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

Giờ đây, DevTools 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.

Ngăn Tệp kê khai hiện hiển thị thông báo cảnh báo nếu nội dung mô tả của tệp kê khai vượt quá 324 ký tự.

Ngoài ra, ngăn Tệp kê khai hiện hiển thị thông báo 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.

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 của mạng của từng 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 mở Công cụ cho nhà phát triển hiện đã được cải thiện. Trong một số trường hợp cực đoan, chúng tôi nhận thấy hiệu suất cải thiện gấp 10 lần.

DevTools thu thập dấu vết ngăn xếp và đính kèm các dấu vết đó vào thông báo của bảng điều khiển hoặc tác vụ không đồng bộ để nhà phát triển sử dụng sau này trong trường hợp xảy ra 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 DevTools đang mở. Chúng tôi đã giảm đáng kể mức hao tổn của việc 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 kỹ thuật để biết 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 khung

Chế độ xem chi tiết về khung hiện hiển thị danh sách các 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 kiểm soát.

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

Vấn đề về Chromium: 1158827

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

Ngăn Cookies trong bảng điều khiển Ứng dụng hiện 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 một cookie có được đưa 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.

Vấn đề về Chromium: 1161427

Ngừng hỗ trợ fn.displayName không chuẩn

Không còn hỗ trợ 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 để nhà phát triển kiểm soát tên gỡ lỗi cho các hàm xuất hiện trong error.stack và trong dấu vết ngăn xếp DevTools. Trong ví dụ trên, Ngăn xếp lệnh gọi trước đây sẽ hiển thị noLongerSupport.

Thay thế fn.displayName bằng fn.name chuẩn, đượ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.

Tính năng hỗ trợ 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. Điều này làm chậm quá trình 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 hay 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

Chế độ cài đặt Don't show Chrome Data Saver warning bị xoá vì Trình tiết kiệm dữ liệu của Chrome đã ngừng hoạt động.

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 đã thêm tính năng hỗ trợ thử nghiệm để tự động 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 hỗ trợ tiếp cận phổ biến nhất có thể phát hiện tự động 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 dễ dàng phát hiện các vấn đề này hơn.

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 đề trong thanh trạng thái Console để 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ể chuyển đổi để xem chế độ xem cây hỗ trợ tiếp cận toàn trang mới và 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ị hạn chế các nút của ngăn, 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. 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 trở nên dễ khám phá, hữu ích và dễ sử dụng hơn cho nhà phát triể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 Elements (Phần tử). Hãy nhấp vào nút này để 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 ở 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 các 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 cho phép bạn sử dụng các tính năng mới nhất của DevTools, kiểm thử các API nền tảng web tiên tiến và giúp bạn tìm thấy vấn đề trên trang web của mình trước khi người dùng phát hiện ra!

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

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

• Gửi ý kiến phản hồi và yêu cầu về tính năng cho chúng tôi tại 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 biểu tượng more_vert Tuỳ chọn khác > Trợ giúp > Báo cáo sự cố của Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
• Gửi tweet đến @ChromeDevTools.
• Để lại bình luận trên video YouTube về tính năng mới trong DevTools hoặc video YouTube về mẹo sử dụng DevTools.

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

Danh sách tất cả nội dung đã được đề cập trong loạt bài Tính năng mới trong DevTools.