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

Thông tin về Web Vitals sẽ bật lên trong bảng điều khiển Hiệu suất

Di chuột qua điểm đánh dấu Web Vitals trong bảng điều khiển Hiệu suất để hiểu rõ chỉ báo này – liệu hiệu suất có tốt, cần cải thiện hay kém.

Vấn đề về Chromium: 1147872

Hình dung tính năng cuộn-nhấp CSS

Giờ đây, bạn có thể bật/tắt huy hiệu scroll-snap trong bảng điều khiển Elements (Thành phần) để kiểm tra chế độ căn chỉnh cuộn-nhanh CSS.

Khi một phần tử HTML trên trang của bạn (ví dụ: trang 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 Elements (Phần tử). Nhấp vào huy hiệu để bật/tắt chế độ hiển thị lớp phủ cuộn-chụp nhanh trên trang.

Trong ví dụ trên, bạn có thể thấy các dấu chấm trên các cạnh chụp nhanh. Cổng cuộn có đường viền liền mạch, còn các mục chụp nhanh có đường viền nét đứt. Khoảng đệm cuộn được tô màu xanh lục trong khi 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 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 rồi đặt điểm ngắt tại dòng 18.

Hãy làm mới trang. Mở rộng mục Phạm vi trong ngăn trình gỡ lỗi bên phải. Lưu ý biểu tượng mới bên cạnh giá trị vùng đệm. Nhấp vào mục đó để hiển thị Memory Inspector (Trình kiểm tra bộ nhớ).

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

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 phần Cài đặt huy hiệu trong bảng điều khiển Thành phần. Sử dụng tính năng này để tuỳ chỉnh và tập trung vào các huy hiệu quan trọng trong khi kiểm tra trang web.

Trong bảng điều khiển Elements (Phần tử), hãy nhấp chuột phải vào bất kỳ phần tử nào. Chọn Cài đặt huy hiệu trong 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 bất kỳ hộp đánh dấu nào để hiển thị/ẩ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 điều khiển Elements (Thành phần) sẽ hiển thị thêm thông tin về hình ảnh – kích thước kết xuất, tỷ lệ khung hình 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 và áp dụng tính năng tối ưu hoá nếu cần.

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

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

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

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

Thêm tuỳ chọn Accepted Content-Encodings (Bộ mã hoá nội dung được chấp nhận) mới vào thẻ Network conditions (Điều kiện mạng). Định cấu hình trình duyệt này để kiểm tra xem 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 khác trong tương lai hay không.

Vấn đề về Chromium: 1162042

Các tính năng nâng cao của ngăn Kiểu

Phím tắt mới để xem giá trị được tính toán 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 Styles (Kiểu) rồi chọn View computed value (Xem giá trị được tính toán) để xem giá trị CSS được tính toán.

Vấn đề về Chromium: 1076198

Hỗ trợ 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, 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.

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

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

Thẻ Vấn đề hiện phân loại các vấn đề thành lỗi trên trang, thay đổi có thể gây lỗi sắp tới và điểm cải tiến có thể có để cho biết mức độ nghiêm trọng một cách 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ó tác động tức thì đế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 có thể gây lỗi sắp tới (màu vàng). Các vấn đề thông báo về thay đổi không tương thích sắp tới của nền tảng web có thể dẫn đến việc mất chức năng của trang (ví dụ: cảnh báo về những thay đổi sắp tới đối với CORS RFC 1918).
• Những điểm có thể cải thiện (màu xanh dương). Có thể cải thiện trang nhưng hiện không ảnh hưởng đến chức năng cơ bản của trang (ví dụ: vấn đề về khả năng hỗ trợ tiếp cận)

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 Mã thông báo tin cậy, trong bảng điều khiển Ứng dụng.

Trust Token là một API mới giúp chống gian lận và phân biệt bot với người dùng thực, 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

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

Giờ đây, bạn có thể xem thông tin chi tiết về các tính năng bị chặn trong phần Chính sách về quyền trong chế độ xem Chi tiết về 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 phần Chính sách về quyền, hãy di chuyển đến thuộc tính 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 tính năng bị chặn. Nhấp vào biểu tượng bên cạnh từng chính sách để chuyển đến iframe hoặc yêu cầu mạng đã chặn tính năng đó.

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

Lọc thử nghiệm trong phần cài đặt Thử nghiệm

Tìm thử nghiệm nhanh hơn bằng bộ lọc thử nghiệm mới. Ví dụ: chuyển đến Settings (Cài đặt) > Experiments (Thử nghiệm), trong hộp văn bản Filter (Lọc), nhập "contrast" (độ tương phản) để lọc tất cả các thử nghiệm có từ "contrast".

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.

Vấn đề về Chromium: 1186049

Các điểm cải tiến về 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 kiểm tra thương hiệu riêng tư mới, 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 toán tử in để hỗ trợ việc kiểm thử các trường lớp riêng tư trên bất kỳ đối tượng nào.

Hãy thử tính năng này trong bảng điều khiển Console và Sources (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 mục Phạm vi trong ngăn trình gỡ lỗi.

Vấn đề về Chromium: 11374

Hỗ trợ nâng cao cho tính năng gỡ lỗi điểm ngắt

DevTools hiện đã đặt các điểm ngắt trong nhiều tập lệnh một cách chính xác. Các trình tạo gói JavaScript hiện đại (ví dụ: Webpack, Rollup) hỗ trợ tính năng phân tách mã – có những trường hợp 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 đ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, DevTools có thể đặt các điểm ngắt ở tất cả vị trí có liên quan một cách chính xác.

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

Hỗ trợ xem trước khi di chuột bằng ký hiệu []

DevTools hiện hỗ trợ tính năng xem trước khi di chuột trên các 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).

Vấn đề về Chromium: 1178305

Cải thiện bố cục của tệp HTML

Công cụ cho nhà phát triển hiện hỗ trợ tốt hơn cho các 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 bố cục mã bằng tổ hợp phím Cmd + Shift + O trên máy Mac hoặc Ctrl + Shift + O trên máy Windows.

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

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

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

DevTools hiện phân giải các lệnh gọi hàm nội tuyến 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 tệp tham chiếu Wasm chung trong dấu vết ngăn xếp Lỗi.

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, còn phiên bản mới ở bên phải thì có.

Vấn đề về Chromium: 1189161

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.