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 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, 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 trong bảng 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 các chế độ ghi đè cục bộ, thì Công cụ cho nhà phát triển sẽ bật các chế độ này. Nếu bạn chưa thiết lập, thì Công cụ cho nhà phát triển sẽ nhắc bạn trong thanh thao tác ở trên cùng. Chọn một thư mục để lưu trữ các chế độ ghi đè và cho phép Công cụ cho nhà phát triển truy cập vào thư mục đó.

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

Xin lưu ý rằng các tài nguyên bị ghi đè được biểu thị bằng trong bảng Mạng. Di chuột qua biểu tượng để xem những thông tin bị ghi đè.

Các vấn đề về Chromium: 1465785, 1470532, 1469359.

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

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

Công cụ cho nhà phát triển hiện hỗ trợ tính năng 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, Công cụ cho nhà phát triển sẽ chuyển lựa chọn Ghi đè nội dung sang màu xám đối với các loại không được hỗ trợ.

Các vấn đề về Chromium: 792101, 1469776.

Ẩn các yêu cầu về tiện ích Chrome

Để giúp bạn tập trung vào mã mà bạn tạo 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

Giờ đây, Mã trạng thái trong tiêu đề của yêu cầu sẽ hiển thị văn bản dễ đọc bên cạnh mã trạng thái HTTP, nhờ đó bạn có thể nhanh chóng biết được đ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 văn bản tương tự.

Vấn đề về Chromium: 1153956.

In phản hồi theo cách dễ đọc cho các kiểu phụ JSON

Giờ đây, thẻ Response (Phản hồi) của một yêu cầu có application/[subtype]+json MIME subtype (ví dụ: ld+json, hal+json và các loại khác) sẽ phân tích cú pháp phản hồi một cách chính xác và cho phép bạn định dạng 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 sẽ cho thấy 2 trường ưu tiên trong phần Tóm tắt của một sự kiện trong dấu vết Mạng: Mức độ ưu tiên ban đầu và Mức độ ưu tiên (cuối cùng), thay vì chỉ có một 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à điều 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 Fetch Priority API.

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

Các vấn đề về Chromium: 1463901, 1380964.

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

Giờ đây, tuỳ chọn Settings > Preferences > Code folding (Cài đặt > Lựa chọn ưu tiên > Thu gọn mã) đượ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 phần đầu của 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, chế độ 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 quy trình gỡ lỗi các vấn đề về cookie của bên thứ ba

Trong nỗ lực xây dựng một mạng riêng tư hơn và song song với các bản cập nhật của những 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 giúp tăng cường đáng kể quyền riêng tư trên web và có thể duy trì một web mở lành mạnh, được quảng cáo hỗ trợ theo cách sẽ 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ó lộ trình loại bỏ dần để bạn có thể thoải mái thích ứng với những 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 qua 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 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 có hộp đánh dấu Bao gồm các 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 đó, 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 cung cấp sắp tới.
• Các vấn đề liên quan đến cookie của bên thứ ba.

Nếu muốn thấy cảnh báo về cookie liên quan đến việc ngừng hỗ trợ sắp tới khi là người dùng Chrome hiện tại, hãy nhớ đánh dấu vào hộp này.

Để kiểm thử, 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 để cho thấy rõ rằng bộ lọc này chỉ hiển thị các cookie phản hồi bị chặn.

Các vấn đề về Chromium: 1458839, 1462693, 1466310.

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

Nhóm Chrome đang đưa tính năng kết xuất trước toàn bộ trở lại cho những trang mà người dùng có khả năng sẽ chuyển đến. Để 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. Tính năng 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 Speculation Rules API thay vì gợi ý về tài nguyên dựa trên đường liên kết.

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

• Speculation Rules (Quy tắc suy đoán) liệt kê tất cả các bộ quy tắc được tìm thấy trên trang hiện tại.
• Tải trước liệt kê tất cả các URL được tìm nạp trước và hiển thị trước từ các bộ quy tắc.
• 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 biệt về việc gỡ lỗi các quy tắc suy đoán.

Vấn đề về Chromium: 1410709.

Màu mới

Có thể bạn đã nhận thấy rằng DevTools 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 thiện hơn về trải nghiệm người dùng cho Công cụ cho nhà phát triển, cả những điểm đã đề cập và những điểm được 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 Lighthouse hiện chạy Lighthouse 10.4.0. Đáng chú ý nhất là phiên bản này bổ sung các hoạt động kiểm tra mới về khả năng hỗ trợ tiếp cận cho những nội dung sau:

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

Ví dụ:

Bạn cũng có thể xem danh sách đầy đủ các thay đổi. Để tìm hiểu những kiến thức cơ bản về cách sử dụng bảng 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 là nguồn mở

Tiện ích gỡ lỗi WebAssembly C/C++ cho Công cụ cho nhà phát triển hiện là mã nguồn mở và nằm trong kho lưu trữ giao diện người dùng Công cụ cho nhà phát triển. Tiện ích này cho phép các chức 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 thành WebAssembly. Để biết thêm thông tin, hãy xem phần Gỡ lỗi WebAssembly C/C++.

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

Vấn đề về Chromium: 1410709.

Thông tin nổi bật khác

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

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

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

Tính năng mô phỏng hiển thị mới: prefers-reduced-transparency

Người dùng trang web của bạn có thể bắt đầu bật prefers-reduced-transparencytính năng truyền thông CSS 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 tính đến lựa chọn ưu tiên này để tăng khả năng tiếp cận của trang web. Để hỗ trợ bạn, thẻ ngăn kéo Kết xuất hiện có thể mô phỏng chế độ cài đặt prefers-reduced-transparency: reduce. Nhờ đó, bạn có thể tạo mẫu giải pháp và kiểm thử cách trang web của bạn 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 Experimental Web Platform features (Các 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

Chrome DevTools sử dụng Giao thức Chrome DevTools (CDP) để đo lường, kiểm tra, gỡ lỗi và lập hồ sơ cho trình duyệt Chrome. Nếu là nhà phát triển Chromium hoặc DevTools, bạn có thể dùng Trình giám sát giao thức để xem tất cả các yêu cầu và phản hồi CDP do DevTools thực hiện, cũng như gửi các lệnh CDP.

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

Ở góc dưới cùng bên phải của thẻ ngăn kéo 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 lệnh đượ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 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.
• Để lại 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 về 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.