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

Sofia Emelianova
Sofia Emelianova

Ghi đè tiêu đề phản hồi mạng

Giờ đây, bạn có thể ghi đè tiêu đề phản hồi trong bảng điều khiển Mạng. Trước đây, bạn cần có quyền truy cập vào máy chủ web để thử nghiệm với các tiêu đề phản hồi HTTP.

Với tính năng ghi đè tiêu đề phản hồi, bạn có thể tạo bản sửa lỗi nguyên mẫu cục bộ cho nhiều tiêu đề, bao gồm nhưng không giới hạn ở:

Để ghi đè một tiêu đề, hãy chuyển đến Mạng > Tiêu đề > Tiêu đề phản hồi, di chuột qua giá trị của một tiêu đề, nhấp vào Chỉnh sửa. rồi chỉnh sửa tiêu đề đó.

Lỗi CORS được khắc phục bằng cách ghi đè tiêu đề.

Bạn cũng có thể thêm tiêu đề tuỳ chỉnh.

Thêm tiêu đề tuỳ chỉnh.

Để chỉnh sửa tất cả các chế độ ghi đè ở cùng một nơi, hãy chỉnh sửa tệp .headers trong Sources (Nguồn) > Overrides (Chế độ ghi đè). Tại đó, bạn cũng có thể nhấp vào Thêm quy tắc ghi đè để ghi đè nhiều yêu cầu bằng ký tự đại diện (*).

Chỉnh sửa tất cả các cơ chế ghi đè.

Vấn đề về Chromium: 1288023.

Cải tiến tính năng gỡ lỗi Nuxt, Vite và Rollup

Để giúp bạn xác định nhanh hơn các vấn đề trong quá trình gỡ lỗi, dấu vết ngăn xếp nâng cao hiện sẽ ẩn các khung đến từ các nguồn do Nuxt 3.3 trở lên tạo ra. Công cụ cho nhà phát triển sẽ bỏ qua các khung hình như vậy:

Dấu vết ngăn xếp trước và sau khi bật tính năng bỏ qua trang thông tin của bên thứ ba.

Để mang đến cho bạn những điểm cải tiến này, các nhóm DevTools, Nuxt, Vite và Rollup đã cộng tác để sử dụng tiện ích bản đồ nguồn x_google_ignoreList:

Nhóm DevTools xin cảm ơn các nhóm Nuxt, Vite và Rollup đã giúp chúng tôi thực hiện được điều này. Chúng tôi rất cảm ơn bạn đã nỗ lực và hợp tác. Đó là yếu tố quan trọng giúp quá trình triển khai này thành công. Một lần nữa, cảm ơn bạn đã đóng góp!

Các điểm cải tiến về CSS trong phần Elements (Phần tử) > Styles (Kiểu)

Thuộc tính và giá trị CSS không hợp lệ

Để giúp bạn chẩn đoán các vấn đề về CSS nhanh hơn, ngăn Kiểu hiện sẽ gạch ngang:

  • Toàn bộ nội dung khai báo CSS (thuộc tính giá trị) khi thuộc tính CSS không hợp lệ.
  • Chỉ giá trị khi thuộc tính CSS hợp lệ nhưng giá trị không hợp lệ.

Tên thuộc tính và giá trị thuộc tính không hợp lệ.

Nhóm DevTools xin gửi lời cảm ơn đến Yisi(一丝) vì đã mang đến điểm cải tiến này.

Đường liên kết đến các khung hình chính trong thuộc tính viết tắt ảnh động

Thuộc tính CSS viết tắt animation hiện chứa các đường liên kết đến @keyframes at-rules tương ứng, nhờ đó bạn có thể di chuyển nhanh hơn trong ngăn Styles (Kiểu).

Đường liên kết đến các khung hình chính trong thuộc tính viết tắt ảnh động.

Vấn đề về Chromium: 1420656.

Chế độ cài đặt mới trong Console: Tự động hoàn thành khi nhấn Enter

Kể từ phiên bản trước (112), bạn có thể định cấu hình Console (Bảng điều khiển) của DevTools để áp dụng đề xuất tự động hoàn thành khi nhấn Enter.

Theo mặc định, để chấp nhận nội dung đề xuất tự động hoàn thành, bạn có thể nhấn Tab hoặc Arrow right. Để tự động hoàn thành bằng Enter, hãy bật Cài đặt. Cài đặt > Bảng điều khiển > Hộp đánh dấu. Chấp nhận đề xuất tự động hoàn thành khi nhấn Enter.

Hộp đánh dấu tương ứng trong phần Cài đặt.

Ngoài ra, văn bản của một chế độ cài đặt khác hiện thân thiện hơn với người dùng: Hộp đánh dấu. Coi việc đánh giá mã là hành động của người dùng.

Vấn đề về Chromium: 1276960.

Trình đơn lệnh nhấn mạnh các tệp do tác giả tạo

Hộp thoại mở nhanh trong Trình đơn lệnh hiện chuyển sang màu xám cho các tệp của bên thứ ba được đưa vào danh sách bỏ qua để làm nổi bật các tệp mà bạn đã tạo.

Một tập lệnh trong danh sách bỏ qua trong hộp thoại mở nhanh trước và sau khi thay đổi.

Vấn đề về Chromium: 1424345.

Ngừng sử dụng Trình phân tích tài nguyên JavaScript: Giai đoạn hai

Ngay từ Chrome 58, nhóm Công cụ cho nhà phát triển đã lên kế hoạch ngừng sử dụng Trình phân tích tài nguyên JavaScript và yêu cầu các nhà phát triển Node.js và Deno sử dụng bảng điều khiển Hiệu suất để phân tích hiệu suất CPU JavaScript.

DevTools phiên bản 113 bắt đầu giai đoạn hai của quy trình ngừng sử dụng Trình phân tích tài nguyên JavaScript gồm 4 giai đoạn. Trong giai đoạn này, bạn vẫn có thể mở bảng điều khiển nhưng giao diện người dùng của bảng điều khiển đó không còn hoạt động nữa.

Để phân tích hiệu suất CPU, hãy nhấp vào Chuyển đến bảng điều khiển Hiệu suất.

Ngừng sử dụng Trình phân tích tài nguyên JavaScript.

Vấn đề về Chromium: 1354548.

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

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

  • Khắc phục lỗi khiến tính năng in đẹp trong bảng điều khiển Sources (Nguồn) xử lý không chính xác tên biến có ký tự Unicode (1425055).
  • Thẻ Vấn đề đã thêm một thông báo mới cho các vấn đề về tính năng Tự động điền liên quan đến các giá trị HTML không chuẩn (1399414).

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.