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

Tìm điều thú vị ẩn giấu

Để kỷ niệm Ngày Cá tháng Tư năm nay, nhóm Công cụ cho nhà phát triển đã giấu một quả trứng Phục sinh ở đâu đó trong Công cụ cho nhà phát triển.

Để tìm biểu tượng này, hãy tìm biểu tượng cảm xúc 💫 đầy màu sắc.

Nội dung cập nhật cho bảng điều khiển Phần tử

Phiên bản này có một số điểm cập nhật cho bảng Phần tử.

Mô phỏng một trang được đặt tiêu điểm trong phần Elements (Phần tử) > Styles (Kiểu)

Thẻ Elements (Phần tử) > Styles (Kiểu) hiện có lựa chọn check_box Emulate a focused page (Mô phỏng một trang được lấy tiêu điểm) trong nút Toggle elements state (Chuyển đổi trạng thái phần tử) (:hov). Trước đây, bạn chỉ có thể tìm thấy lựa chọn này trong bảng điều khiển Rendering (Kết xuất).

Nếu bạn chuyển tiêu điểm từ trang sang Công cụ cho nhà phát triển, một số phần tử lớp phủ sẽ tự động ẩn nếu chúng được kích hoạt bằng tiêu điểm. Ví dụ: danh sách thả xuống, trình đơn hoặc bộ chọn ngày. Tuỳ chọn Mô phỏng một trang được đặt tiêu điểm cho phép bạn gỡ lỗi một phần tử như vậy giống như khi phần tử đó đang được lấy tiêu điểm.

Vấn đề về Chromium: 1468393.

Công cụ chọn màu, Đồng hồ góc và Trình chỉnh sửa hiệu ứng chuyển động trong các thành phần dự phòng var()

Để đơn giản hoá việc chỉnh sửa CSS, thẻ Elements (Phần tử) > Styles (Kiểu) hiện cho phép bạn sử dụng Color Picker (Bộ chọn màu), Angle Clock (Đồng hồ góc) và Easing Editor (Trình chỉnh sửa hiệu ứng chuyển động) trong các lệnh dự phòng var().

Vấn đề về Chromium: 1520417.

Công cụ chiều dài CSS không được dùng nữa

Công cụ tạo độ dài CSS không còn được dùng nữa do có ý kiến phản hồi rằng công cụ này làm chậm quy trình làm việc và không mang lại nhiều giá trị.

Bạn không thể kéo để điều chỉnh giá trị hoặc chọn loại đơn vị trong trình đơn thả xuống nữa. Thay vào đó, hãy nhấp đúp vào giá trị rồi nhập một giá trị mới.

Để bật lại công cụ chiều dài, hãy xoá settings Cài đặt > Thử nghiệm > check_box Không dùng công cụ tạo <length> CSS trong thẻ Kiểu nữa.

Nếu bạn vẫn muốn sử dụng công cụ này, nhóm Công cụ cho nhà phát triển rất mong nhận được ý kiến của bạn và biết được công cụ đo chiều dài giúp bạn như thế nào trong quy trình làm việc. Bạn có thể gửi ý kiến phản hồi tại crbug/1522657.

Cửa sổ bật lên cho kết quả tìm kiếm đã chọn trong phần Hiệu suất > Bản phát hành chính

Để giúp bạn tìm kiếm dễ dàng hơn, biểu đồ ngọn lửa trong mục Hiệu suất > Chính hiện sẽ cho bạn thấy một cửa sổ bật lên ở trên cùng của sự kiện tương ứng khi bạn chuyển đổi qua các kết quả tìm kiếm.

Vấn đề về Chromium: 1523279.

Nội dung cập nhật của bảng điều khiển Mạng

Phiên bản này có một số điểm cập nhật cho bảng điều khiển Mạng.

Nút xoá và bộ lọc tìm kiếm trong thẻ Mạng > EventStream

Thẻ Network > EventStream sẽ nhận được:

• Nút chặn Xoá để xoá các sự kiện đã ghi nhận trong bảng.
• Bộ lọc tìm kiếm có thể hiểu được biểu thức chính quy.

Nhóm Công cụ cho nhà phát triển xin cảm ơn Charles Vazac vì đã triển khai tính năng này.

Ngoài ra, thẻ EventStream hiện cũng ghi lại các sự kiện mà máy chủ gửi thông qua lệnh tìm nạp/XHR, chứ không chỉ EventSource API. Hãy thử trên trang minh hoạ này.

Vấn đề về Chromium: 1488863, 40659493.

Chú thích có lý do miễn trừ cho cookie của bên thứ ba trong phần Network > Cookies (Mạng > Cookie)

Thẻ Network (Mạng) > Cookies (Cookie) hiện cho thấy chú thích có lý do miễn trừ bên cạnh những cookie lẽ ra phải bị chặn do việc ngừng sử dụng cookie của bên thứ ba.

Cookie của bên thứ ba có thể được cho phép vì những lý do sau:

• Chính sách của Chrome Enterprise
• Storage Access API hoặc Storage Access API cấp cao nhất
• Chương trình dùng thử ngừng sử dụng loại bỏ cookie của bên thứ ba hoặc thời gian gia hạn của chương trình này
• Phương thức suy đoán loại bỏ cookie của bên thứ ba
• Tùy chọn người dùng

Vấn đề về Chromium: 41491846.

Bật và tắt mọi điểm ngắt trong phần Nguồn

Mục Sources (Nguồn) > Breakpoints (Điểm ngắt) sẽ đưa các lựa chọn Enable (Bật) và Disable all breakpoints (Tắt tất cả điểm ngắt) trở lại trình đơn thả xuống. Trước đây, những lựa chọn này đã bị bỏ qua trong thiết kế lại điểm ngắt.

Để bật hoặc tắt tất cả các điểm ngắt, hãy nhấp chuột phải vào một điểm ngắt trong Nguồn > Điểm ngắt rồi chọn lựa chọn tương ứng.

Vấn đề về Chromium: 1522037.

Xem các tập lệnh đã tải trong Công cụ cho nhà phát triển cho Node.js

Giờ đây, DevTools cho Node.js sẽ hiển thị các tập lệnh đã tải trong cây điều hướng trong phần Nguồn > Tập lệnh.

Vấn đề về Chromium: 1518364.

Lighthouse 11.5.0

Bảng Lighthouse hiện chạy Lighthouse 11.5.0. Xem danh sách đầy đủ các thay đổi.

Trong số những thay đổi đáng chú ý, có một quy trình kiểm tra mới ước tính nguyên nhân gốc rễ của các thay đổi về bố cục. Quy trình kiểm tra này thay thế quy trình kiểm tra layout-shift-elements (các phần tử thay đổi bố cục) chỉ liệt kê những phần tử chịu ảnh hưởng của các thay đổi bố cục.

Để tìm hiểu những kiến thức cơ bản về cách sử dụng bảng 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.

Hỗ trợ tiếp cận

Phiên bản này có những điểm cải thiện sau đây về khả năng hỗ trợ tiếp cận:

• Giờ đây, trình đọc màn hình sẽ thông báo:
  • Văn bản đường liên kết Tìm hiểu thêm bên cạnh các loại bộ chọn trong bảng điều khiển Trình ghi.
  • Khi không có thử nghiệm nào khớp với bộ lọc trong cài đặt Cài đặt > Thử nghiệm.
  • Xác nhận hành động khi xoá, xác nhận hoặc khôi phục một lối tắt trong cài đặt Cài đặt > Lối tắt.
• Bảng trong phần cài đặt Cài đặt > Vị trí hiện hiển thị chính xác dưới dạng bảng cho các công cụ hỗ trợ tiếp cận.

Các vấn đề về Chromium: 1516957, 324282443, 324467508, 324930007.

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

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

• Phông chữ trong Công cụ cho nhà phát triển được cập nhật cho phù hợp với Chrome (1523538).
• Hiệu suất: Khắc phục lỗi hiển thị ảnh chụp màn hình khi di chuột lên dòng thời gian (1519469).
• Nguồn: Chiều cao dòng trong Trình chỉnh sửa được tăng lên để cải thiện khả năng đọc mã (1523640).
• Mạng > Phản hồi: Đã khắc phục nhiều vấn đề về hiển thị với nhiều định dạng và phương thức mã hoá (1523128, 1509336, 1523128, 41481944, 1509336).

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.