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

Sofia Emelianova

Cải tiến về bảng điều khiển mạng

Ghi đè nội dung trên web cục bộ nhanh hơn nữa

Tính năng ghi đè cục bộ hiện được tinh giản, vì vậy bạn có thể dễ dàng mô phỏng tiêu đề phản hồi và nội dung web của tài nguyên từ xa từ bảng điều khiển Network (Mạng) mà không cần truy cập vào chúng.

Để ghi đè nội dung trên web, hãy mở bảng điều khiển Mạng, nhấp chuột phải vào một yêu cầu rồi chọn Ghi đè nội dung.

Các lựa chọn ghi đè trong trình đơn thả xuống của yêu cầu.

Nếu bạn đã thiết lập tính năng ghi đè cục bộ nhưng bị tắt, Công cụ cho nhà phát triển sẽ bật các chế độ đó. Nếu bạn chưa thiết lập, Công cụ cho nhà phát triển sẽ nhắc bạn trong thanh hành động ở trên cùng. Chọn một thư mục để lưu trữ chế độ ghi đè và cho phép Công cụ cho nhà phát triển truy cập vào thư mục đó.

Chọn một thư mục và cho phép truy cập vào thư mục đó trong thanh tác vụ ở trên cùng.

Sau khi thiết lập chế độ ghi đè, Công cụ cho nhà phát triển sẽ chuyển bạn đến Nguồn > Ghi đè > Trình chỉnh sửa để cho phép bạn ghi đè nội dung web.

Lưu ý rằng các tài nguyên bị ghi đè được biểu thị bằng trong bảng điều khiển Network (Mạng). Hãy di chuột qua biểu tượng này để xem nội dung bị ghi đè.

Vấn đề về Chromium: 1465785, 1470532, 1469359.

Ghi đè nội dung của XHR và yêu cầu tìm nạp

Giờ đây, bạn có thể ghi đè nội dung của XHR và tìm nạp các yêu cầu ngoài tiêu đề phản hồi của chúng. Với cơ chế ghi đè như vậy, bạn có thể mô phỏng phản hồi của API để gỡ lỗi trang web ngay cả khi chương trình phụ trợ và API của bạn chưa sẵn sàng.

Công cụ cho nhà phát triển hiện hỗ trợ ghi đè nội dung cho các loại yêu cầu sau: hình ảnh (ví dụ: avif, png), phông chữ, tìm nạp và XHR, tập lệnh (css và js) và tài liệu (html). Công cụ cho nhà phát triển giờ đây sẽ chuyển tuỳ chọn Ghi đè nội dung đối với các loại không được hỗ trợ.

Vấn đề về Chromium: 792101, 1469776.

Ẩn các yêu cầu đối với tiện ích của Chrome

Để giúp bạn tập trung vào mã bạn viết và lọc ra các yêu cầu không liên quan do tiện ích bạn có thể đã cài đặt trong Chrome gửi, bảng điều khiển Mạng sẽ có bộ lọc mới.

Để lọc ra mọi yêu cầu gửi đến URL chrome-extension://, hãy đánh dấu vào ô Ẩn URL của tiện ích.

URL của tiện ích bị ẩn khỏi bảng yêu cầu.

Vấn đề về Chromium: 1257885, 1458803.

Mã trạng thái HTTP mà con người có thể đọc được

Giờ đây, Mã trạng thái trong tiêu đề của yêu cầu sẽ hiển thị văn bản mà con người có thể đọc được bên cạnh các mã trạng thái HTTP, nhờ đó, bạn có thể tìm ra điều gì đã xảy ra với yêu cầu nhanh hơn.

Trước và sau khi hiển thị mã trạng thái HTTP mà con người có thể đọc được.

Bạn cũng có thể di chuột qua mã trạng thái trong bảng yêu cầu để xem nội dung tương tự.

Vấn đề về Chromium: 1153956.

Tạo phản hồi tạo bản in đẹp cho các loại phụ JSON

Thẻ Response (Phản hồi) của yêu cầu có loại phụ MIME application/[subtype]+json (ví dụ: ld+json, hal+json và các loại khác) giờ đây sẽ phân tích cú pháp phản hồi chính xác và cho phép bạn làm đẹp phản hồi đó.

Loại đối tượng trước và sau khi phân tích cú pháp loại ứng dụng/json phụ trong bản xem trước phản hồi mạng.

Vấn đề về Chromium: 406900.

Hiệu suất: Xem những thay đổi về mức độ ưu tiên tìm nạp cho các sự kiện mạng

Giờ đây, bảng Hiệu suất hiển thị hai trường mức độ ưu tiên trong mục Tóm tắt của một sự kiện trên kênh Mạng: Mức độ ưu tiên ban đầu và Mức độ ưu tiên cuối cùng, thay vì chỉ Mức độ ưu tiên. Với trường bổ sung này, giờ đây bạn có thể biết liệu mức độ ưu tiên tìm nạp của sự kiện có thay đổi hay không và tinh chỉnh thứ tự tải xuống. Để biết thêm thông tin, hãy xem bài viết Tối ưu hoá việc tải tài nguyên bằng API Tìm nạp mức độ ưu tiên.

Trước và sau khi hiển thị các thay đổi về mức độ ưu tiên tìm nạp.

Ngoài ra, bạn cũng có thể tìm thấy thông tin tương tự trong cột Mức độ ưu tiên của bảng Mạng khi chế độ cài đặt Hàng yêu cầu lớn đang bật.

Cột Mức độ ưu tiên trong bảng điều khiển Mạng.

Vấn đề về Chromium: 1463901, 1380964.

Chế độ cài đặt nguồn được bật theo mặc định: Thu gọn mã và tự động hiện tệp

Tuỳ chọn Settings > Preferences > Thu gọn mã hiện được bật theo mặc định. Tuỳ chọn này cho phép bạn thu gọn các khối mã.

Để gập một khối mã, hãy di chuột qua số dòng bên cạnh phần đầu khối rồi nhấp vào biểu tượng thu gọn . Nhấp vào {...} để mở rộng lại khối.

Ngoài ra, Settings > Preferences > Tự động hiển thị tệp trong thanh bên giờ đây cũng được bật theo mặc định.

Chế độ cài đặt này tạo cây tệp trong Nguồn > Trang, chọn tệp hiện tại đang mở trong Trình chỉnh sửa khi bạn chuyển đổi thẻ.

Vấn đề về Chromium: 1459193, 1336599.

Cải thiện tính năng gỡ lỗi các vấn đề về cookie của bên thứ ba

Nh��m giúp xây dựng một web riêng tư hơn và song song với bản cập nhật của các trình duyệt khác, Chrome đã ra mắt sáng kiến Hộp cát về quyền riêng tư. Sáng kiến này về cơ bản giúp tăng cường quyền riêng tư trên web và có thể duy trì một môi trường web lành mạnh, được quảng cáo hỗ trợ theo cách khiến cookie của bên thứ ba trở nên lỗi thời. Hộp cát về quyền riêng tư có tiến trình từng bước một để bạn có thể thoải mái thích ứng với các thay đổi.

Bạn có thể thử nghiệm cách hoạt động của Chrome sau khi Google loại bỏ cookie của bên thứ ba. Để thực hiện việc này, hãy chạy Chrome từ dòng lệnh bằng cờ --test-third-party-cookies-phaseout. Để tìm hiểu chức năng của cờ này, hãy xem phần Gỡ lỗi cookie.

Bất kể bạn chạy Chrome theo cách nào (có hoặc không có cờ), thẻ Vấn đề giờ đây sẽ có hộp đánh dấu Bao gồm vấn đề về cookie của bên thứ ba được bật theo mặc định cho tất cả người dùng Chrome mới và do đó, sẽ có các báo cáo:

Cảnh báo về sự thay đổi có thể gây lỗi về việc loại bỏ sắp tới.
Các vấn đề liên quan đến cookie của bên thứ ba.

Nếu đang là người dùng Chrome hiện tại thì nếu bạn muốn xem cảnh báo về cookie về việc loại bỏ dần sắp tới, hãy nhớ đánh dấu vào hộp này.

Để kiểm tra điều này, hãy kiểm tra cookie tại trang minh hoạ này.

Các vấn đề về cookie của bên thứ ba được báo cáo trong thẻ Vấn đề.

Ngoài ra, bộ lọc Cookie phản hồi bị chặn trong bảng điều khiển Mạng đã được diễn đạt lại để làm rõ rằng bộ lọc chỉ hiển thị cookie phản hồi bị chặn.

Hộp đánh dấu này được bật và chỉ hiển thị các yêu cầu có cookie phản hồi bị chặn.

Vấn đề về Chromium: 1458839, 1462693, 1466310.

Gỡ lỗi tải trước trong bảng điều khiển Application (Ứng dụng)

Nhóm Chrome đang khôi phục đầy đủ tính năng hiển thị trước các trang trong tương lai mà người dùng có khả năng sẽ truy cập. Để cho phép bạn gỡ lỗi này, Công cụ cho nhà phát triển sẽ thêm mục Tải trước vào bảng điều khiển Ứng dụng. Quá trình tìm nạp trước và kết xuất trước mới (gọi chung là "tải trước điều hướng") sử dụng API Quy tắc suy đoán thay vì gợi ý tài nguyên dựa trên liên kết.

Trên trang minh hoạ này, trong phần Ứng dụng > Tải trước, bạn có thể kiểm tra:

Quy tắc suy đoán liệt kê tất cả các bộ quy tắc có trên trang hiện tại.
Tải trước liệt kê tất cả URL được tìm nạp trước và kết xuất trước từ bộ quy tắc.
Trang này liệt kê trạng thái được kết xuất trước của trang hiện tại.

Để biết thêm thông tin, hãy tham khảo bài đăng chuyên biệt về quy tắc gỡ lỗi suy đoán.

Vấn đề về Chromium: 1410709.

Màu mới

Bạn có thể nhận thấy Công cụ cho nhà phát triển hiện đã có giao diện mới phù hợp hơn với Chrome. Một yếu tố góp phần quan trọng là bảng phối màu mới.

Trước và sau khi áp dụng màu mới.

Phiên bản này (117) mang đến nhiều điểm cải tiến hơn về trải nghiệm người dùng cho Công cụ cho nhà phát triển, cả đã được đề cập và liệt kê thêm, bao gồm một số văn bản giao diện người dùng được cải thiện.

Vấn đề về Chromium: 1456677.

Lighthouse 10.4.0

Bảng điều khiển Lighthouse hiện chạy phiên bản Lighthouse 10.4.0. Đáng chú ý nhất là phiên bản này bổ sung các bước kiểm tra khả năng hỗ trợ tiếp cận mới cho những nội dung sau:

Ví dụ:

Không kiểm tra được màu sắc của các đường liên kết khiến chúng không phân biệt được.

Ngoài ra, hãy xem danh sách đầy đủ các thay đổi. Để tìm hiểu thông tin cơ bản về cách sử dụng bảng điều khiển Lighthouse trong Công cụ cho nhà phát triển, hãy xem bài viết Lighthouse: Tối ưu hoá tốc độ trang web.

Vấn đề về Chromium: 772558.

Tiện ích gỡ lỗi C/C++ WebAssembly cho Công cụ cho nhà phát triển hiện là nguồn mở

Tiện ích gỡ lỗi C/C++ WebAssembly cho Công cụ cho nhà phát triển hiện là nguồn mở và nằm trong kho lưu trữ giao diện người dùng DevTools. Tiện ích này bật tính năng gỡ lỗi trong Công cụ cho nhà phát triển đối với các chương trình C++ được biên dịch sang WebAssembly. Để biết thêm thông tin, hãy xem bài viết Gỡ lỗi C/C++ WebAssembly.

Tìm hiểu cách tạo, chạy và thử nghiệm tiện ích, cũng như thoải mái đóng góp.

Vấn đề về Chromium: 1410709.

Nội dung nổi bật khác

Dưới đây là một số nội dung sửa lỗi và cải tiến đáng chú ý trong bản phát hành này:

Lồng ghép CSS: Bảng Phần tử hiện hiển thị toàn bộ chuỗi bộ chọn cho các phần tử con được lồng (1172985).
Ứng dụng > Tệp kê khai hiện có phần Lớp phủ điều khiển cửa sổ để kiểm tra xem giá trị display_override có trong Tệp kê khai hay không và cung cấp đường liên kết đến tài liệu có liên quan.
Giờ đây, cây Nguồn > Trang sẽ thực hiện những việc sau, bao gồm nhưng không giới hạn ở (1442863):
- Các thư mục sẽ chuyển sang màu xám nếu toàn bộ nội dung của các thư mục đó nằm trong danh sách bỏ qua.
- Thư mục Màu sắc có màu cam nếu tất cả nội dung của thư mục đó là từ một bản đồ nguồn.
Hiệu suất: Giờ đây, phần Cài đặt quay sẽ tự động ẩn khi bạn bắt đầu quay (1455498).
Nguồn > Trình chỉnh sửa đã khôi phục hành vi Ctrl + Mũi tên (Win) và Opt + Mũi tên (MacO) (1468208).
Nút bật/tắt Ảnh động > Tạm dừng tất cả hiện giữ nguyên trạng thái trong khi tải trang (1446046).
Ứng dụng > Bộ nhớ > Bộ nhớ đệm được chuyển sang Ứng dụng > Bộ nhớ > Phần bộ nhớ đệm (1462622).
Cải thiện một số văn bản và chú thích cho giao diện người dùng: Chú thích về cơ chế đồng thời phần cứng, Văn bản lọc mạng và tuỳ chọn trình đơn chính, viết hoa trong Chế độ xem dạng cây ứng dụng, Mạng > Văn bản tiêu đề, Nguồn > Ghi đè và Văn bản hệ thống tệp.

Các tính năng thử nghiệm mới

Mô phỏng kết xuất mới: `prefers-reduced-transparency`

Người dùng trang web của bạn có thể bắt đầu bật tính năng đa phương tiện CSS prefers-reduced-transparency thử nghiệm mới trên thiết bị của họ để cho biết họ muốn giảm hiệu ứng trong suốt. Bạn có thể xem xét tùy chọn này để tăng khả năng truy cập của trang web của mình. Để hỗ trợ bạn, thẻ ngăn Hiển thị hiện có thể mô phỏng chế độ cài đặt prefers-reduced-transparency: reduce, nhờ đó, bạn có thể tạo nguyên mẫu cho một giải pháp và kiểm thử cách trang web của mình hoạt động trong trường hợp này.

Để thử nghiệm tính năng này trong Chrome, hãy bật các tính năng của Nền tảng web thử nghiệm trong chrome://flags.

Vấn đề về Chromium: 1424879.

Giám sát Giao thức nâng cao

Công cụ của Chrome cho nhà phát triển sử dụng Giao thức Chrome Công cụ cho nhà phát triển (CDP) để đo lường, kiểm tra, gỡ lỗi và phân tích tài nguyên trình duyệt Chrome. Nếu bạn là nhà phát triển Chromium hoặc Công cụ cho nhà phát triển, thì Trình giám sát giao thức sẽ cung cấp cho bạn cách xem tất cả yêu cầu và phản hồi CDP do Công cụ cho nhà phát triển đưa ra cũng như gửi lệnh CDP.

Trình giám sát giao thức có giao diện mới để cho phép bạn tạo và gửi các lệnh CDP dễ dàng hơn. Giờ đây, bạn không phải tìm kiếm các lệnh và tham số của chúng trong tài liệu, Công cụ cho nhà phát triển sẽ đề xuất chúng cho bạn.

Ở góc dưới cùng bên phải của thẻ ngăn Giao thức giám sát, hãy nhấp vào Hiện trình chỉnh sửa lệnh CDP, chọn mục tiêu, bắt đầu nhập lệnh, chọn một trong các mục đề xuất (nếu cần), chỉ định giá trị thông số rồi nhấp vào Gửi lệnh (Ctrl/Cmd + Enter).

Chỉ định và gửi lệnh CDP.

Vấn đề về Chromium: 1469345.

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.