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

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

Di chuột lên một điểm đánh dấu Chỉ số quan trọng về trang web trong bảng Hiệu suất để tìm hiểu chỉ báo đó là gì – hiệu suất có tốt, cần cải thiện hay kém.

Vấn đề về Chromium: 1147872

Trực quan hoá CSS scroll-snap

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

Khi một phần tử HTML trên trang của bạn (ví dụ: trang demo này) có scroll-snap-type được áp dụng, 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 lớp phủ chụp nhanh khi cuộn 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 có thể di chuyển nhanh. Cổng cuộn có đường viền liền nét, trong khi 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, còn lề cuộn được tô màu cam.

Vấn đề về Chromium: 862450

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

Dùng Trình kiểm tra bộ nhớ mới để kiểm tra một ArrayBuffer trong JavaScript, cũng như bộ nhớ Wasm.

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

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 biểu tượng này để mở 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 JavaScript ArrayBuffer và WebAssembly.Memory 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 Chế độ cài đặt huy hiệu trong bảng Phần tử. Hãy 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 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 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/ẩ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 Elements (Phần tử) sẽ hiển thị thêm thông tin về hình ảnh – kích thước hiển thị, tỷ lệ khung hình hiển thị, 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 biện pháp 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 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 Mạng. Nhấp vào biểu tượng đó để mở thẻ Điều kiện mạng.

Một lựa chọn Accepted Content-Encodings (Mã hoá nội dung được chấp nhận) mới được thêm vào thẻ Network conditions (Điều kiện mạng). Định cấu hình để kiểm tra xem các phản hồi của máy chủ có được mã hoá đúng cách trong những trình duyệt không hỗ trợ gzip, brotli hoặc các Content-Encoding trong tương lai hay không.

Vấn đề về Chromium: 1162042

Các điểm cải tiến trong ngăn Kiểu

Phím tắt mới để xem giá trị được 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ị được tính để xem giá trị CSS được tính.

Vấn đề về Chromium: 1076198

Hỗ trợ từ khoá accent-color

Giờ đây, giao diện người dùng tự động hoàn thành của ngăn Styles (Kiểu) sẽ phát hiện từ khoá CSS accent-color. Nhờ đó, nhà phát triển web có thể chỉ định màu nhấn cho các chế độ đ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 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

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

Vấn đề về Chromium: 1183241

Xoá Trust Token

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 tokens (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 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 Trust Tokens.

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 mục Chính sách về quyền trong chế độ xem Chi tiết về khung hình.

Mở trang bản minh hoạ này. Chuyển đến bảng điều khiển Ứng dụng rồi chọn một khung hình. 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ị vô hiệu hoá. Nhấp vào Hiển thị 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 mỗi 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 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 hình 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 > Experiments (Cài đặt > Thử nghiệm), trong hộp văn bản Filter (Bộ lọc), hãy 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ải tiến bảng điều khiển Nguồn

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

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ợ kiểm thử các trường lớp riêng tư trên mọi đối tượng nhất định.

Hãy thử tính năng này trong bảng điều khiển Console (Bảng điều khiển) và Sources (Nguồn). Bạn cũng có thể kiểm tra các trường riêng tư trong mục Scope (Phạm vi) trong ngăn debugger (trình gỡ lỗi).

Vấn đề về Chromium: 11374

Tăng cường khả năng hỗ trợ gỡ lỗi điểm ngắt

Giờ đây, DevTools sẽ thiết lập điểm ngắt trong nhiều tập lệnh một cách chính xác. Các trình đóng 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 đường (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 ở 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 điểm ngắt ở tất cả các vị trí có liên quan một cách chính xác.

Các vấn đề về Chromium: 1142705, 979000, 1180794

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

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

Vấn đề về Chromium: 1178305

Cải thiện cấu trúc 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 Nguồn, hãy mở một tệp HTML. Bạn có thể bật/tắt đường viền mã bằng tổ hợp phím Cmd + Shift + O trên máy Mac hoặc Ctrl + Shift + O trên 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 đường viền. 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

Giờ đây, Công cụ cho nhà phát triển sẽ phân giải các lệnh gọi hàm nội tuyến và cho thấy 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 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 cho thấy vị trí nguồn (ví dụ: dsquare) trong Error stack traces (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 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 truy cập vào 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 các vấn đề trên trang web của mình trước khi người dùng tìm thấy!

Liên hệ với nhóm Chrome DevTools

Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng mới, nội dung cập nhật 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.
• Đăng bài trên X cho @ChromeDevTools.
• Hãy bình luận trên video "Có gì mới trong Công cụ cho nhà phát triển" trên YouTube hoặc video "Mẹo sử dụng Công cụ cho nhà phát triển" trên YouTube.

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.