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 đè các 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 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 mẫu cục bộ các bản sửa lỗi 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 đề Permissions-Policy
• Tiêu đề cách ly nhiều nguồn gốc

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

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

Để chỉnh sửa tất cả các chế độ ghi đè ở một nơi, hãy chỉnh sửa tệp .headers trong Sources (Nguồn) > Overrides (Ghi đè). Tại đây, 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 thiện khả năng gỡ lỗi Nuxt, Vite và Rollup

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

• Trong dấu vết Console, bên dưới đường liên kết Show N more frames (Hiện thêm N khung hình).
• Trong Sources (Nguồn) > Call Stack (Ngăn xếp lệnh gọi), trong phần Show ignore-listed frames (Hiện các khung hình 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 để áp dụng tiện ích bản đồ nguồn x_google_ignoreList:

• Bản phát hành Nuxt 3.3
• Các lựa chọn về máy chủ Vite
• Các lựa chọn cấu hình tổng hợp

Nhóm Công cụ cho nhà phát triển xin gửi lời cảm ơn đến các nhóm Nuxt, Vite và Rollup vì đã giúp chúng tôi thực hiện được điều này. Chúng tôi trân trọng những nỗ lực và sự hợp tác của bạn, đây là những yếu tố cần thiết để triển khai thành công. Một lần nữa, cảm ơn bạn đã đóng góp!

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

Giá trị và thuộc tính 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 gạch ngang:

• Toàn bộ 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 Công cụ cho nhà phát triển xin gửi lời cảm ơn đến Yisi(一丝) vì đã thực hiện cải tiến này.

Liên kết đến các khung hình chính trong thuộc tính viết tắt của ảnh động

Giờ đây, thuộc tính CSS viết tắt animation chứa các đường liên kết đến các quy tắc @keyframes@ tương ứng, nhờ đó bạn có thể điều hướng nhanh hơn trong ngăn Kiểu.

Vấn đề về Chromium: 1420656.

Chế độ cài đặt Bảng điều khiển mới: 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 Bảng điều khiển của Công cụ cho nhà phát triển để áp dụng một đề xuất tự động hoàn thành khi bạn nhấn Enter.

Theo mặc định, để chấp nhận một 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 Settings (Cài đặt) > Console (Bảng điều khiển) > Accept autocomplete suggestion on Enter (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 làm nổi bật các tệp do người dùng tạo

Hộp thoại mở nhanh trong Trình đơn lệnh hiện làm mờ các tệp của bên thứ ba nằm trong danh sách bỏ qua để nhấn mạnh hơn vào các tệp mà bạn đã tạo.

Vấn đề về Chromium: 1424345.

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

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

DevTools phiên bản 113 bắt đầu giai đoạn hai của quá trình ngừng sử dụng Trình phân tích tài nguyên JavaScript gồm bốn 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 sẽ không còn nữa.

Để lập hồ sơ 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ố điểm sửa lỗi đáng chú ý trong bản phát hành này:

• Đã khắc phục một lỗi khiến tính năng in đẹp trong bảng Nguồn xử lý tên biến có ký tự Unicode không chính xác (1425055).
• Thẻ Vấn đề đã thêm một thông báo mới về các vấn đề 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 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.