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

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

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

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

Để 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.

Nếu bạn đã thiết lập nhưng tắt chế độ ghi đè cục bộ, thì DevTools sẽ bật chế độ này. 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ữ các tệp ghi đè và cho phép DevTools truy cập vào thư mục đó.

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.

Xin 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 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à các yêu cầu tìm nạp ngoài tiêu đề phản hồi của chúng. Với các cơ chế ghi đè như vậy, bạn có thể mô phỏng phản hồi API để gỡ lỗi trang web ngay cả khi phần phụ trợ và API chưa sẵn sàng.

Công cụ dành 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). Giờ đây, DevTools sẽ chuyển tuỳ chọn Override content (Ghi đè nội dung) sang màu xám đố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ã mà bạn viết và lọc ra các yêu cầu không liên quan do các tiện ích mà bạn có thể đã cài đặt trong Chrome gửi, bảng điều khiển Mạng sẽ có một bộ lọc mới.

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

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

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

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

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

Vấn đề về Chromium: 1153956.

In đẹp phản hồi cho các loại phụ JSON

Thẻ Phản hồi của một 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) hiện 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 đó.

Vấn đề về Chromium: 406900.

Hiệu suất: Xem các 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ể xem liệu mức độ ưu tiên tìm nạp của sự kiện có thay đổi hay không và điều chỉnh thứ tự tải xuống. Để biết thêm thông tin, hãy xem phần Tối ưu hoá việc tải tài nguyên bằng API mức độ ưu tiên tìm nạp.

Ngoài ra, bạn có thể tìm thấy cùng một thông tin trong cột Mức độ ưu tiên của bảng điều khiển Mạng, với chế độ cài đặt Big request rows (Hàng yêu cầu lớn) đang bật.

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

Chế độ cài đặt Nguồn được bật theo mặc định: Gập mã và tự động hiển thị tệp

Tuỳ chọn Cài đặt > Lựa chọn ưu tiên > 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ã.

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

Ngoài ra, Settings (Cài đặt) > Preferences (Lựa chọn ưu tiên) > Automatically reveal files in the sidebar (Tự động hiển thị tệp trong thanh bên) hiện cũng được bật theo mặc định.

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

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

Cải thiện khả 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ể kiểm thử cách Chrome hoạt động sau khi 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 tác dụng của cờ này, hãy xem bài viết 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 đề hiện đã bật hộp đánh dấu Bao gồm các vấn đề về cookie của bên thứ ba theo mặc định cho tất cả người dùng Chrome mới và do đó, báo cáo:

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

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

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

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.

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. Để giúp bạn gỡ lỗi vấn đề 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. Tính năng tải 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 dự đoán thay vì gợi ý tài nguyên dựa trên đường 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 nhóm 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.
• This Page (Trang này) liệt kê trạng thái 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 sâu về cách gỡ lỗi quy tắc 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 là bảng phối màu mới.

Phiên bản này (117) mang đến nhiều điểm cải tiến về trải nghiệm người dùng cho DevTools, cả những điểm đã đượ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 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:

• aria-dialog-name
• aria-text
• link-in-text-block
• select-name

Ví dụ:

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 WebAssembly C/C++ cho Công cụ cho nhà phát triển hiện đã có nguồn mở

Tiện ích gỡ lỗi WebAssembly C/C++ cho DevTools hiện là nguồn mở và nằm trong kho lưu trữ giao diện người dùng của DevTools. Tiện ích này cho phép các tính năng gỡ lỗi trong DevTools cho các chương trình C++ được biên dịch thành 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à kiểm thử tiện ích, đồng thời đừng ngại đóng góp.

Vấn đề về Chromium: 1410709.

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

Sau đây là một số điểm 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 điều khiển Elements (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).
• Application (Ứng dụng) > Manifest (Tệp kê khai) hiện có mục Window Controls Overlay (Lớp phủ điều khiển cửa sổ) để kiểm tra xem tệp kê khai có giá trị display_override hay không và cung cấp đường liên kết đến tài liệu 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):
  • Đổi màu thư mục thành màu xám nếu tất cả nội dung của thư mục đó đều nằm trong danh sách bỏ qua.
  • Thư mục màu có màu cam nếu tất cả nội dung của thư mục đó đều đến từ một bản đồ nguồn.
• Hiệu suất: Giờ đây, Capture Settings (Cài đặt quay video) sẽ tự động ẩn khi bạn bắt đầu quay video (1455498).
• Sources (Nguồn) > Editor (Trình chỉnh sửa) đã khôi phục hành vi Ctrl + Arrow (Mũi tên) (Win) và Opt + Arrow (Mũi tên) (MacOs) (1468208).
• Nút bật/tắt Animations (Ảnh động) > Pause all (Tạm dừng tất cả) hiện giữ trạng thái của nó trong các lần 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.

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 nội dung nghe nhì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ể cân nhắc việc xem xét lựa chọn ưu tiên này để tăng khả năng hỗ trợ tiếp cận của trang web. Để giúp bạn, thẻ ngăn Rendering (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 hoạt động của trang web trong trường hợp này.

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

Vấn đề về Chromium: 1424879.

Công cụ 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 của Công cụ của Chrome cho nhà phát triển (CDP) để đo lường, kiểm tra, gỡ lỗi và lập hồ sơ cho 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 cần phải tra cứu các lệnh và tham số của lệnh trong tài liệu, DevTools sẽ đề xuất các lệnh và tham số đó cho bạn.

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

Vấn đề về Chromium: 1469345.

Tải các 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á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 phản hồi và yêu cầu tính năng cho chúng tôi tại 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 more_vert > Trợ giúp > Báo cáo sự cố trong 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.