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 91)

Jecelyn Yeen

Thông tin về Chỉ số quan trọng của trang web xuất hiện trong bảng điều khiển Hiệu suất

Hãy di chuột lên điểm đánh dấu Các chỉ số quan trọng về trang web trong bảng Hiệu suất để biết chỉ báo liên quan đến điều gì, cho dù hiệu suất ở mức tốt, cần cải thiện hay kém.

Cửa sổ bật lên thông tin Chỉ số quan trọng của trang web

Vấn đề về Chromium: 1147872

Trực quan hoá scroll-snap của CSS

Giờ đây, bạn có thể bật/tắt huy hiệu scroll-snap trong bảng điều khiển Phần tử để kiểm tra việc căn chỉnh ảnh cuộn-snap của CSS.

Scroll-snap của CSS

Khi một phần tử HTML trên trang của bạn (ví dụ: trang bản minh hoạ này) được áp dụng scroll-snap-type, bạn có thể thấy huy hiệu scroll-snap 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ị của lớp phủ cuộn trên trang.

Trong ví dụ trên, bạn có thể thấy dấu chấm ở cạnh chụp. Cổng cuộn có đường viền đồng nhất trong khi các mục chụp nhanh có đường viền gạch ngang. Khoảng đệm cuộn được tô màu xanh lục còn lề cuộn được tô màu cam.

Vấn đề về Chromium: 862450

Trình kiểm tra bộ nhớ mới

Sử dụng Memory Inspector (Trình kiểm tra bộ nhớ) mới để kiểm tra ArrayBuffer trong JavaScript, cũng như bộ nhớ Wasm.

Mở trang minh hoạ này. Trong bảng điều khiển Sources (Nguồn), hãy mở tệp demo-js.js và đặt điểm ngắt tại dòng 18.

Hãy làm mới trang. Mở rộng phần Scope (Phạm vi) trong ngăn debugger (trình gỡ lỗi) bên phải. Hãy lưu ý biểu tượng mới bên cạnh giá trị buffer. Nhấp vào đó để hiển thị Công cụ kiểm tra bộ nhớ.

Hãy xem tài liệu để tìm hiểu thêm về cách kiểm tra JavaScript ArrayBuffer và WebAssembly.Memory bằng Trình kiểm tra bộ nhớ mới này.

Trình kiểm tra bộ nhớ

Vấn đề về Chromium: 1166577

Ngăn cài đặt huy hiệu mới trong bảng điều khiển Phần tử

Giờ đây, bạn có thể chọn bật hoặc tắt huy hiệu thông qua mục Cài đặt huy hiệu trong bảng điều khiển Phần tử. Hãy dùng tính năng này để tuỳ chỉnh và tập trung vào những huy hiệu quan trọng khi kiểm tra trang web.

Trong bảng điều khiển Phần tử, hãy nhấp chuột phải vào một phần tử bất kỳ. Chọn Cài đặt huy hiệu từ trình đơn theo bối cảnh, ngăn cài đặt huy hiệu sẽ xuất hiện ở trên cùng. Bật hoặc tắt một hộp đánh dấu bất kỳ để hiện/ẩn huy hiệu.

Vấn đề về Chromium: 1066772

Bản xem trước hình ảnh nâng cao có thông tin về tỷ lệ khung hình

Giờ đây, bản xem trước hình ảnh trong bảng Phần tử sẽ hiển thị thêm thông tin về kích thước kết xuất hình ảnh, tỷ lệ khung hình được kết xuất, kích thước nội tại, tỷ lệ khung hình nội tại và kích thước tệp.

Thông tin này giúp bạn hiểu rõ hơn về hình ảnh của mình và áp dụng chế độ tối ưu hoá nếu cần.

Bản xem trước hình ảnh có thông tin về tỷ lệ khung hình

Thông tin về tỷ lệ khung hình của hình ảnh sẽ có trong bảng điều khiển Mạng cũng như khi bạn nhấp để xem trước hình ảnh.

Thông tin về tỷ lệ khung hình của hình ảnh trong bảng điều khiển Mạng

Vấn đề về Chromium: 1149832, 1170656

Nút Điều kiện mạng mới với các lựa chọn để định cấu hình `Content-Encoding`

Một nút điều kiện mạng mới sẽ được thêm vào bảng điều khiển Network (Mạng). Nhấp vào đó để mở thẻ Điều kiện mạng.

Chế độ Mã hoá nội dung được chấp nhận mới được thêm vào thẻ Điều kiện mạng. Hãy định cấu hình tệp này để kiểm tra xem các phản hồi của máy chủ có được mã hoá chính xác trong các trình duyệt không hỗ trợ gzip, brotli hoặc các Content-Encoding trong tương lai hay không.

Nút điều kiện mạng mới có các lựa chọn để định cấu hình Content-Encoding

Vấn đề về Chromium: 1162042

Cải tiến ngăn Kiểu

Lối tắt mới để xem giá trị đã tính trong ngăn Kiểu

Giờ đây, bạn có thể nhấp chuột phải vào một thuộc tính CSS trong ngăn Kiểu rồi chọn Xem giá trị đã tính toán để xem giá trị CSS đã tính toán.

Lối tắt mới để xem giá trị đã tính

Vấn đề về Chromium: 1076198

Hỗ trợ cho từ khoá `accent-color`

Giao diện người dùng tự động hoàn thành của ngăn Kiểu hiện phát hiện từ khoá CSS accent-color. Từ khoá này cho phép nhà phát triển web chỉ định màu nhấn cho các thành phần điều khiển giao diện người dùng (ví dụ: hộp đánh dấu, nút chọn) do phần tử tạo ra.

Thuộc tính CSS accent-color hiện đang ở giai đoạn thử nghiệm. Vui lòng bật chrome://flags/#enable-experimental-web-platform-features để kiểm tra.

màu nhấn

Vấn đề về Chromium: 1092093

Phân loại các loại vấn đề bằng màu sắc và biểu tượng

Giờ đây, thẻ Vấn đề sẽ phân loại các vấn đề theo lỗi trang, thay đổi có thể gây lỗi sắp tới và những điểm có thể cải thiện để đưa ra chỉ báo mức độ nghiêm trọng chính xác hơn. Bạn có thể mở thẻ Vấn đề bằng cách nhấp vào nút số lượng vấn đề trong Bảng điều khiển.

Lỗi trang (màu đỏ). Các vấn đề có ảnh hưởng ngay lập tức đến chức năng của trang, chẳng hạn như không đặt đúng tiêu đề CORS, v.v.
Những thay đổi sắp tới có thể gây lỗi (màu vàng). Các vấn đề thông báo về một thay đổi sắp tới và không tương thích trên nền tảng web có thể khiến chức năng của trang bị mất (ví dụ: cảnh báo về các thay đổi sắp tới trong tiêu chuẩn CORS RFC 1918).
Các điểm cải thiện có thể áp dụng (màu xanh dương). Có thể cải thiện trang, nhưng hiện không làm suy giảm chức năng cơ bản của trang (ví dụ: vấn đề về khả năng hỗ trợ tiếp cận)

Phân loại các loại vấn đề bằng màu sắc và biểu tượng

Vấn đề về Chromium: 1183241

Xoá mã thông báo tin cậy

Giờ đây, bạn có thể xoá mã thông báo tin cậy bằng nút xoá mới trong ngăn Trust Token (Mã thông báo tin cậy) 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 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.

Xoá mã thông báo tin cậy

Vấn đề về Chromium: 1126824

Xem thông tin chi tiết về các tính năng bị chặn trong chế độ xem Chi tiết khung hình

Giờ đây, bạn có thể xem thông tin chi tiết về các tính năng bị chặn trong mục Chính sách về quyền trên chế độ xem Chi tiết của khung.

Mở trang minh hoạ này. Chuyển đến bảng điều khiển Application (Ứng dụng) rồi chọn một khung. Trong mục Chính sách về quyền, hãy di chuyển đến thuộc tính Các tính năng bị tắt. Nhấp vào Hiện chi tiết để xem thông tin chi tiết về lý do chặn tính năng. Nhấp vào biểu tượng bên cạnh mỗi chính sách để chuyển đến iframe hoặc yêu cầu mạng đã chặn tính năng này.

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 riêng hoặc trong các iframe mà trang web đó nhúng.

Các tính năng bị chặn trong chế độ xem chi tiết Khung

Vấn đề về Chromium: 1158827

Lọc thử nghiệm trong chế độ cài đặt Thử nghiệm

Tìm các thử nghiệm nhanh hơn nhờ bộ lọc thử nghiệm mới. Ví dụ: chuyển đến phần Cài đặt > Thử nghiệm, trong hộp văn bản Bộ lọc, hãy nhập "độ tương phản" để lọc tất cả các thử nghiệm có từ "tương phản".

Lọc thử nghiệm trong chế độ cài đặt Thử nghiệm

Cột `Vary Header` mới trong ngăn Bộ nhớ đệm

Sử dụng cột Vary Header mới trong ngăn Bộ nhớ đệm để xem tiêu đề phản hồi HTTP Vary.

Cột Vary Tiêu đề

Vấn đề về Chromium: 1186049

Cải tiến bảng điều khiển Nguồn

Hỗ trợ các tính năng JavaScript mới

Công cụ cho nhà phát triển hiện hỗ trợ tính năng ngôn ngữ JavaScript mới là kiểm tra thương hiệu riêng tư, còn gọi là #foo in obj.

Tính năng kiểm tra thương hiệu riêng tư này mở rộng trong toán tử để hỗ trợ việc kiểm thử các trường lớp riêng tư trên một đối tượng nhất định bất kỳ.

Hãy dùng thử trong bảng điều khiển Bảng điều khiển và Nguồn. Bạn cũng có thể kiểm tra các trường riêng tư trong phần Phạm vi trong ngăn trình gỡ lỗi.

Vấn đề về Chromium: 11374

Hỗ trợ nâng cao cho việc gỡ lỗi điểm ngắt

Công cụ cho nhà phát triển hiện đã đặt chính xác các điểm ngắt trong nhiều tập lệnh. Các trình gói JavaScript hiện đại (ví dụ: Webpack, Cuộn lên) hỗ trợ tính năng phân tách mã – có những trường hợp trong đó một thành phần dùng chung có thể được đưa vào nhiều tuyến (phân tách mã).

Trước đây, Công cụ cho nhà phát triển chỉ có thể đặt các điểm ngắt trên một vị trí thô. Với điểm cải tiến mới nhất này, Công cụ cho nhà phát triển có thể đặt chính xác các điểm ngắt ở tất cả vị trí liên quan.

Vấn đề về Chromium: 1142705, 979000, 1180794

Hỗ trợ bản xem trước khi di chuột có ký hiệu `[]`

Công cụ cho nhà phát triển hiện hỗ trợ tính năng xem trước khi di chuột trên biểu thức thành viên JavaScript sử dụng ký hiệu [] trong bảng điều khiển Sources (Nguồn).

Hỗ trợ bản xem trước khi di chuột có ký hiệu '[]'

Vấn đề về Chromium: 1178305

Cải thiện đường viền của tệp HTML

Công cụ cho nhà phát triển hiện đã hỗ trợ tốt hơn cho tệp HTML. Trong bảng điều khiển Sources (Nguồn), hãy mở một tệp HTML. Bạn có thể bật/tắt đường viền mã bằng bàn phím Cmd + Shift + O trên máy Mac hoặc Ctrl + Shift + O trong Windows.

Trong ví dụ bên dưới, Công cụ cho nhà phát triển hiện liệt kê chính xác tất cả các hàm trong phần phác thảo. Trước đây, Công cụ cho nhà phát triển chỉ hiển thị một số hàm.

Cải thiện đường viền của tệp HTML

Vấn đề về Chromium: 761019, 1191465

Dấu vết ngăn xếp lỗi thích hợp để gỡ lỗi Wasm

Công cụ cho nhà phát triển hiện sẽ phân giải các lệnh gọi hàm cùng dòng và hiển thị dấu vết ngăn xếp lỗi thích hợp để gỡ lỗi Wasm.

Trước đây, Công cụ cho nhà phát triển chỉ hiển thị các lượt tham chiếu Wasm chung trong dấu vết ngăn xếp Lỗi.

Dấu vết ngăn xếp lỗi thích hợp để gỡ lỗi Wasm

Phiên bản Chrome cũ ở bên trái không hiển thị vị trí nguồn (ví dụ: dsquare) trong dấu vết ngăn xếp Lỗi, trong khi phiên bản mới ở bên phải thì có.

Vấn đề về Chromium: 1189161

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ố trong 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.