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

Sofia Emelianova
Sofia Emelianova
GitHub

Tìm quả trứng Phục sinh

Để chào mừng ngày Cá tháng Tư năm nay Vào ngày hôm đó, nhóm Công cụ cho nhà phát triển đã ẩn một quả trứng Phục sinh ở đâu đó trong Công cụ cho nhà phát triển.

Để tìm thấy biểu tượng cảm xúc này, hãy tìm một biểu tượng cảm xúc 💫 nhiều màu sắc.

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

Phiên bản này mang đến một số nội dung cập nhật cho bảng điều khiển Phần tử.

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

Phần tử > Thẻ Kiểu hiện có tuỳ chọn check_box Mô phỏng trang có tiêu điểm bên dưới nút Bật/tắt trạng thái thành phần (:hov). Trước đây, bạn chỉ có thể tìm thấy tuỳ chọn này trong bảng điều khiển 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 đượ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 trang được đặt tiêu điểm cho phép bạn gỡ lỗi phần tử như vậy như thể phần tử đó là tiêu điểm.

Trước và sau khi mô phỏng một trang được đặt tiêu điểm trong thẻ Kiểu.

Vấn đề về Chromium: 1468393.

Công cụ chọn màu, Đồng hồ góc và Trình chỉnh sửa tốc độ trong var() bản dự phòng

Để đơn giản hoá việc chỉnh sửa CSS, hãy nhấp vào Phần tử > Thẻ Kiểu hiện cho phép bạn sử dụng Công cụ chọn màu, Angle Clock và Easing Editor trong var() dự phòng.

Các công cụ trước và sau khi kết xuất Công cụ chọn màu, Đồng hồ góc và Trình chỉnh sửa Easing trong các bản dự phòng var().

Vấn đề về Chromium: 1520417.

Công cụ đo độ dài CSS không còn được dùng nữa

Công cụ ghi nhận độ dài của CSS đã ngừng hoạt động do 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ị từ 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ụ độ dài, hãy xoá phần cài đặt Cài đặt > Thử nghiệm > check_box Gỡ bỏ CSS <length> trong thẻ Kiểu.

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 muốn biết ý kiến của bạn và cách công cụ độ dài giúp bạn trong quy trình làm việc. Hãy để lại ý kiến phản hồi tại crbug/1522657.

Đã tắt thử nghiệm ngừng sử dụng.

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ài hát chính

Để giúp tìm kiếm dễ dàng hơn, biểu đồ hình ngọn lửa trong phần Hiệu suất > Giờ đây, kênh chính sẽ cho bạn thấy một cửa sổ bật lên ở đầu sự kiện tương ứng khi bạn duyệt xem các kết quả tìm kiếm.

Cửa sổ trước và sau khi hiển thị cửa sổ bật lên trên kết quả tìm kiếm đã chọn.

Vấn đề về Chromium: 1523279.

Nội dung cập nhật về bảng điều khiển mạng

Phiên bản này cung cấp một số nội dung cập nhật cho bảng điều khiển Network (Mạng).

Xoá nút và bộ lọc tìm kiếm trong phần Mạng > Thẻ EventStream

Mạng > Thẻ EventStream nhận được:

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

Trước và sau khi thêm nút Xoá và bộ lọc tìm kiếm.

Nhóm Công cụ cho nhà phát triển muốn cảm ơn Charles Vazac vì đã sử dụng được 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 tìm nạp/XHR, chứ không chỉ EventSource API. Hãy thử tính năng này trên trang minh hoạ.

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

Chú thích kèm theo lý do miễn trừ cho cookie của bên thứ ba trong phần Mạng > Bánh quy

Mạng > Thẻ Cookie giờ đây hiển thị chú thích giải thích với lý do miễn trừ bên cạnh các cookie mà lẽ ra đã bị chặn do việc loại bỏ cookie của bên thứ ba.

Phần trước và sau khi hiển thị chú giải công cụ, trong đó nêu lý do miễn 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:

Vấn đề về Chromium: 41491846.

Bật và tắt tất cả các điểm ngắt trong Nguồn

Nguồn > Phần Breakpoints (Điểm ngắt) sẽ đưa các lựa chọn Enable (Bật) và Disable all updatess (Tắt tất cả các điểm ngắt) trong trình đơn thả xuống của phần này. Trước đây, các lựa chọn này không còn được 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 Sources > (Nguồn) > Điểm ngắt rồi chọn mục tương ứng.

Trước và sau khi đưa trở lại các tuỳ chọn bật và tắt.

Vấn đề về Chromium: 1522037.

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

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

Trước và sau khi thêm thẻ Tập lệnh cùng một cây tập lệnh đã tải.

Vấn đề về Chromium: 1518364.

Lighthouse 11.5.0

Bảng điều khiển 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 giúp ước tính nguyên nhân gốc khiến bố cục thay đổi. Quá trình kiểm tra này thay thế việc kiểm tra các phần tử thay đổi bố cục vốn chỉ liệt kê những phần tử bị ảnh hưởng bởi việc thay đổi bố cục.

Một quá trình kiểm tra mới ước tính nguyên nhân gốc dẫn đến sự thay đổi bố cục.

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

Vấn đề về Chromium: 772558.

Hỗ trợ tiếp cận

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

  • Trình đọc màn hình giờ đây thông báo:
    • Văn bản 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 Máy ghi âm.
    • Khi không có thử nghiệm nào khớp với bộ lọc trong phần cài đặt Cài đặt > Thử nghiệm.
    • Xác nhận thao tác khi xoá, xác nhận hoặc khôi phục một lối tắt trong phần cài đặt Cài đặt > Lối tắt.
  • Bảng trong phần cài đặt Cài đặt > Giờ đây, Vị trí sẽ 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.

Vấn đề về Chromium: 1516957, 324282443, 324467508, 324930007.

Nội dung nổi bật khác

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

  • Cập nhật phông chữ trong Công cụ cho nhà phát triển để khớ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 tăng lên để mã dễ đọc hơn (1523640).
  • Mạng > Phản hồi: Khắc phục nhiều sự cố hiển thị với nhiều định dạng và phương thức mã hoá (1523128, 1509336, 1523128, 41481944, 1509336).

Tải kênh xem trước xuống

Hãy cân nhắc việc sử dụng Chrome Canary, Nhà phát triển hoặc Beta làm trình duyệt phát triển mặc định của bạn. 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 Công cụ cho nhà phát triển, kiểm thử các API nền tảng web tiên tiến và tìm ra các vấn đề trên trang web của bạn trước khi người dùng 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 để thảo luận về các tính năng và thay đổi mới trong bài đăng, 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 đề xuất hoặc phản hồi cho chúng tôi qua crbug.com.
  • Báo cáo sự cố Công cụ cho nhà phát triển bằng cách sử dụng Tuỳ chọn khác   Thêm > Trợ giúp > Báo cáo vấn đề về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
  • Tweet tại @ChromeDevTools.
  • Để 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 Mẹo video trên YouTube trong 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 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.