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

Sofia Emelianova
Sofia Emelianova

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 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 tuỳ chọn ghi đè trong trình đơn thả xuống của một yêu cầu.

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ác công cụ này, DevTools 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 tệp ghi đè và cho phép DevTools 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 thao tác ở trên cùng.

Sau khi thiết lập chế độ ghi đè, DevTools sẽ đưa bạn đến Sources (Nguồn) > Overrides (Ghi đè) > Editor (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 Đã lưu. trong bảng điều khiển Mạng. Di chuột qua biểu tượng để xem nội dung bị ghi đè.

Biểu tượng ghi đè bên cạnh một yêu cầu trong bảng điều khiển Mạng.

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

Ghi đè nội dung của XHR và các 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 của tiện ích 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 Hộp đánh dấu. Ẩ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

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.

Trước và sau khi hiển thị mã trạng thái HTTP mà con người đọ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 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 đó.

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

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

Bảng điều khiển Hiệu suất hiện hiển thị hai trường mức độ ưu tiên trong phần Tóm tắt của một sự kiện trong kênh Mạng: Mức độ ưu tiên ban đầuMức độ ưu tiên (cuối cùng), thay vì chỉ một 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.

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ó 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) Hộp đánh dấu. đ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: Gập mã và tự động hiển thị tệp

Tuỳ chọn Cài đặt. Cài đặt > Lựa chọn ưu tiên > Hộp đánh dấu. Thu gọn mã hiện được bật theo mặc định. Tuỳ chọn này cho phép bạn gập 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 Thu gọn.. Nhấp vào {...} để mở rộng khối đó một lần nữa.

Ngoài ra, tuỳ chọn Cài đặt. Cài đặt > Lựa chọn ưu tiên > Hộp đánh dấu. 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 nỗ lực xây dựng một môi trường web riêng tư hơn và song song với các 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 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 loại bỏ dần để bạn có thể dễ dàng 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 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 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.
  • 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.

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 Hộp đánh dấu. 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 này chỉ hiển thị các 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 ứng dụng

Nhóm Chrome sẽ khôi phục tính năng kết xuất trước toàn bộ các trang trong tương lai mà người dùng có thể 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 suy đ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 Application (Ứng dụng) > Preloading (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à hiển thị trước từ các 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

Có thể bạn đã nhận thấy rằng Công cụ dành 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.

Hình ảnh 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 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 thêm các quy trình kiểm tra mới về hỗ trợ tiếp cận cho những nội dung sau:

Ví dụ:

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

Xem thêm danh sách đầy đủ các thay đổi. Để tìm hiểu kiến thức 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 Công cụ cho nhà phát triển 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 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 đừng ngạ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 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 đã chuyển sang Ứng dụng > Bộ nhớ > Mục bộ nhớ đệm (1462622).
  • Một số văn bản và chú giải công cụ trên giao diện người dùng được cải thiện: Chú giải công cụ về đồng thời phần cứng, Văn bản bộ lọc mạng và tuỳ chọn trình đơn chính, viết hoa trong Chế độ xem 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 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 DevTools, Trình giám sát giao thức sẽ cung cấp cho bạn cách xem tất cả các yêu cầu và phản hồi CDP do DevTools thực hiện, đồng thời 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 tạo và gửi 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 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 Bảng điều khiển bên trái đang mở. Show CDP command editor (Hiển thị 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 Gửi. Send command (Gửi lệnh) (Ctrl/Cmd + Enter).

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

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

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.