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

Sofia Emelianova

Jecelyn Yeen

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 ở:

• Tiêu đề Chia sẻ tài nguyên trên nhiều nguồn gốc (CORS)
• Tiêu đề chính sách về quyền
• Tiêu đề tách biệt giữa các nguồn gốc

Để 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 rồi chỉnh sửa tiêu đề đó.

Bạn cũng có thể 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 (*).

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:

• Trong dấu vết Console, trong đường liên kết Hiển thị thêm N khung hình.
• Trong Sources (Nguồn) > Call Stack (Ngăn xếp lệnh gọi), trong Show ignore-listed frames (Hiển thị các khung trong danh sách bỏ qua).

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

• Bản phát hành Nuxt 3.3
• Tuỳ chọn máy chủ Vite
• Các lựa chọn cấu hình cuộn lên

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 tử > 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 và 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ệ.

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 quy tắc tại @keyframes tương ứng, nhờ đó bạn có thể di chuyển nhanh hơn trong ngăn Kiểu.

Vấn đề về Chromium: 1420656.

Chế độ cài đặt mới của 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 > Bảng điều khiển > Chấp nhận đề xuất tự động hoàn thành khi nhấn Enter.

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

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.

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.

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