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

Sofia Emelianova
Sofia Emelianova
GitHub

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 tinh giản để 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 từ 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.

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

Nếu bạn đã thiết lập chế độ ghi đè cục bộ nhưng bị tắt, thì 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, 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 đó.

Chọn một thư mục rồi cấp quyền 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 đè, Công cụ cho nhà phát triển sẽ đưa 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 Đã lưu. trong bảng điều khiển Network (Mạng). Di chuột qua biểu tượng này để xem nội dung nào bị ghi đè.

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

Các sự cố với 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 các yêu cầu đó. Với 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 phần 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 hiện chuyển tuỳ chọn Ghi đè nội dung cho các loại không được hỗ trợ.

Các sự cố với Chromium: 792101, 1469776.

Ẩn các yêu cầu tiện ích của Chrome

Để giúp bạn tập trung vào 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 đ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 chrome-extension:// URL, hãy đánh dấu vào ô Hộp đánh dấu. Ẩn URL của phần mở rộng.

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

Vấn đề với 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à người dùng có thể đọc được bên cạnh mã trạng thái HTTP, nhờ đó bạn có thể tìm hiểu đ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 văn bản tương tự.

Sự cố Chromium: 1153956.

Tạo bản in phản hồi đẹp mắt 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 phần tử khác) giờ đây 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 làm đẹp.

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

Vấn đề với 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 giờ đây 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 đầu và Mức độ ưu tiên (cuối cùng) thay vì chỉ Mức độ ưu tiên riêng. 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 phần Tối ưu hóa việc tải tài nguyên bằng API ư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ũ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 điều khiển Mạng khi bật chế độ cài đặt Hộp đánh dấu. Hàng có yêu cầu lớn.

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

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

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

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 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 điểm bắt đầu khối mã rồi nhấp vào biểu tượng thu gọn Thu gọn.. Nhấp vào {...} để mở rộng lại khối.

Hơn nữa, 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 sẽ làm cho cây tệp trong Nguồn > Trang chọn tệp hiện tại sẽ mở trong Trình chỉnh sửa khi bạn chuyển đổi giữa các thẻ.

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

Trong nỗ lực xây dựng 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 đã cho ra mắt sáng kiến Hộp cát về quyền riêng tư. Về cơ bản, sáng kiến này 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ó hỗ trợ quảng cáo theo cách làm cho 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ể thích ứng với các thay đổi một cách thoải mái.

Bạn có thể thử nghiệm 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 Gỡ lỗi cookie.

Bất kể bạn chạy Chrome theo cách nào (có hay không có cờ), thẻ Vấn đề hiện đều có 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 được bật theo mặc định cho tất cả người dùng Chrome mới. Nhờ đó, các báo cáo sẽ:

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

Nếu bạn muốn xem cảnh báo cookie về việc loại bỏ sắp tới với tư cách là người dùng Chrome hiện tại, hãy nhớ chọn hộp kiểm 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 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 được bật và chỉ hiển thị các yêu cầu có cookie phản hồi bị chặn.

Các sự cố với 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 hiển thị lại tính năng kết xuất trước đầy đủ của 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 thêm phần 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 ý về 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 bộ quy tắc được tìm thấy trên trang hiện tại.
  • Hoạt động tải trước liệt kê tất cả URL được tìm nạp trước và URL được 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 riêng về quy tắc suy đoán để gỡ lỗi.

Sự cố Chromium: 1410709.

Màu mới

Bạn có thể đã nhận thấy rằng Công cụ cho nhà phát triển hiện có giao diện được làm 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 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ả hai đều đã đượ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ới 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 quy trình kiểm tra mới về khả năng hỗ trợ tiếp cận cho những nội dung sau:

Ví dụ:

Không thể kiểm tra màu của các đường liên kết khiến chúng không thể 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.

Sự cố 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 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 bài viết Gỡ lỗi C/C++ WebAssembly.

Tìm hiểu cách phát triển, chạy và thử nghiệm tiện ích, cũng như vui lòng đóng góp.

Sự cố Chromium: 1410709.

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

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

  • CSS Nesting: 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).
  • Ứng dụng > Tệp kê khai hiện có mục Lớp phủ điều khiển cửa sổ kiểm tra xem giá trị display_override có xuất hiện trong Tệp kê khai hay không và cung cấp các đường liên kết đến tài liệu liên quan.
  • Cây Nguồn > Trang hiện có những chức năng sau, bao gồm nhưng không giới hạn ở (1442863):
    • Chuyển các thư mục sang màu xám nếu tất cả nội dung của các thư mục đó được liệt kê trong danh sách bỏ qua.
    • Tô màu các thư mụ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, Cài đặt chế độ ghi hình sẽ tự động ẩn khi bạn bắt đầu quay video (1455498).
  • Nguồn > Trình chỉnh sửa đã khôi phục hành vi Ctrl + Mũi tên (Chiến thắng) và Opt + Mũi tên (MacO) (1468208).
  • Nút bật/tắt Ảnh động > Tạm dừng tất cả sẽ giữ nguyên trạng thái của các lượt 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).
  • Một số văn bản và chú giải công cụ về giao diện người dùng đã được cải thiện: Chú giải công cụ đồ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 dạng cây ứng dụng, Mạng > Văn bản tiêu đề, Nguồn > Ghi đè và Văn bản trong 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ó thể bắt đầu bật tính năng thử nghiệm mới về nội dung đa phương tiện của CSS prefers-reduced-transparency 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 xem xét tuỳ chọn này để tăng khả năng truy cập cho trang web của mình. Để giúp bạn, thẻ ngăn Hiển thị hiện có thể mô phỏng chế độ cài đặt prefers-reduced-transparency: reduce để 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.

Để 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ới Chromium: 1424879.

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

Dịch vụ Công cụ của Chrome cho nhà phát triển sử dụng Giao thức 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, 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 Công cụ cho nhà phát triển thực hiện đồng thời 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 xây dựng và gửi các lệnh CDP dễ dàng hơn. Giờ đây, bạn không phải tra cứu lệnh và thông số của chúng trong tài liệu nữa. Công cụ cho nhà phát triển sẽ đề xuất các lệnh đó cho bạn.

Ở góc dưới cùng bên phải của thẻ ngăn 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ở. 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 lệnh được đề xuất (nếu cần), chỉ định giá trị tham số rồi nhấp vào Gửi. Gửi lệnh (Ctrl/Cmd + Enter).

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

Vấn đề với Chromium: 1469345.

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   Thêm   > 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.

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 video Tính năng mới trong Công cụ cho nhà phát triển.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Kiến thức cơ bản về Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 đã bị huỷ.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59