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ề Các chỉ số quan trọng về trang web bật lên trong bảng điều khiển Hiệu suất

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

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

Vấn đề với Chromium: 1147872

Trực quan hoá chế độ cuộn-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 Elements (Phần tử) để kiểm tra việc căn chỉnh scroll-snap của CSS.

Cuộn-snap CSS

Khi một phần tử HTML trên trang của bạn (ví dụ: trang bản minh hoạ này) áp dụng scroll-snap-type cho phần tử đó, 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ị lớp phủ cuộn-ảnh 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ủa chốt. 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 gạch ngang. 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ới 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 và đặt điểm ngắt ở 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 chú ý biểu tượng mới bên cạnh giá trị buffer. Nhấp vào đó để 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 JavaScript ArrayBuffer và WebAssembly.Memory bằng công cụ Trình kiểm tra bộ nhớ mới này.

Trình kiểm tra bộ nhớ

Vấn đề với 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 Cài đặt huy hiệu trong bảng Thành phần. Hãy 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 khi kiểm tra các 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, rồi ngăn cài đặt huy hiệu 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 các huy hiệu.

Vấn đề với Chromium: 1066772

Bản xem trước hình ảnh nâng cao với 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 Phần tử sẽ hiển thị nhiều thông tin hơn về hình ảnh – kích thước được hiển thị, tỷ lệ khung hình được hiển thị, kích thước hàm nội tại, tỷ lệ khung hình hàm 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 các biện pháp tối ưu hoá nếu cần.

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

Thông tin về tỷ lệ khung hình của hình ảnh cũng có trong bảng Mạng 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

Các sự cố với 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`

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

Thêm lựa chọn mới Mã hoá nội dung được chấp nhận vào thẻ Điều kiện mạng. Định cấu hình tệp 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 trong tương lai khác hay không.

Nút điều kiện mạng mới với các tuỳ chọn để định cấu hình Mã hoá nội dung

Vấn đề với 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 Styles (Kiểu) rồi chọn View đã tính giá trị để xem giá trị CSS đã tính toán.

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

Vấn đề với Chromium: 1076198

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

Giờ đây, giao diện người dùng tự động hoàn thành của ngăn Kiểu sẽ 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 trê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 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ới 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 trang, thay đổi có thể gây lỗi sắp tới và những điểm cần cải thiện để chỉ báo mức độ nghiêm trọng 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 đề ảnh hưởng ngay đến chức năng của trang, chẳng hạn như không đặt chính xác 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ề một thay đổi sắp tới và không tương thích của nền tảng web có thể khiến trang không hoạt động được (ví dụ: cảnh báo về những thay đổi sắp tới đối với tài khoản CORS RFC 1918).
Những điểm cải tiến có thể áp dụng (màu xanh dương). Những cải thiện tiềm năng trên trang, nhưng hiện không làm ả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)

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

Vấn đề với 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 Ứ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 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ới Chromium: 1126824

Xem thông tin về các tính năng bị chặn trong chế độ xem Chi tiết 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 ở chế độ xem Thông tin chi tiết về khung.

Mở trang bản 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 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 thị chi tiết để xem chi tiết về lý do tính năng này 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 này.

Chính sách quyền là một API nền tảng web mà 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.

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

Vấn đề với Chromium: 1158827

Lọc thử nghiệm trong chế độ 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 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ả 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.

Thay đổi cột tiêu đề

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

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 Scope (Phạm vi) của ngăn debugger (Trình gỡ lỗi).

Vấn đề với 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 đúng các điểm ngắt trong nhiều tập lệnh một cách chính xác. Các gói JavaScript hiện đại (ví dụ: Webpack, Rollup) hỗ trợ tính năng chia 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 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 các đ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 sự cố với Chromium: 1142705, 979000, 1180794

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

Công cụ cho nhà phát triển hiện hỗ trợ bản xem trước 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.

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

Vấn đề với Chromium: 1178305

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

Công cụ cho nhà phát triển hiện hỗ trợ phác thảo tốt hơn cho tệp HTML. Trong bảng 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 trong 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 sơ đồ. Trước đây, Công cụ cho nhà phát triển chỉ hiển thị một số chức năng.

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

Vấn đề với 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 giải quyết 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 tệp 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 cũ của Chrome ở 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ới Chromium: 1189161

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.