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 đ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 tử > Kiểu

Thẻ Phần tử > Kiểu hiện có lựa chọn Mô phỏng một trang được lấy làm tiêu điểm trong nút 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.

Trạng thái trước và sau khi mô phỏng một trang được đặt tiêu điểm trong thẻ Styles (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 đường cong tăng tốc 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 Công cụ chọn màu, Đồng hồ góc và Trình chỉnh sửa gia tốc trong các lệnh dự phòng var().

Công cụ Chọn màu, Đồng hồ góc và Trình chỉnh sửa chuyển động chậm trước và sau khi kết xuất trong các 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á Cài đặt > Thử nghiệm > Không dùng công cụ tạo <length> CSS 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 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.

Thử nghiệm ngừng sử dụng đã bị tắt.

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 nhạc 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 qua các kết quả tìm kiếm.

Hình ảnh trước và sau khi một cửa sổ bật lên xuất hiện trên kết quả tìm kiếm đã chọn.

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 Xoá để xoá các sự kiện đã ghi lại trong bảng.
  • Bộ lọc tìm kiếm có thể hiểu được biểu thức chính quy.

Hình ảnh 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 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 những sự kiện mà máy chủ gửi thông qua fetch/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 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 giai đoạn loại bỏ cookie của bên thứ ba.

Hình ảnh trước và sau cho thấy một chú thích có lý do miễn trừ cho 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 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.

Hình ảnh trước và sau khi khôi phục các lựa chọn bật và tắt.

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.

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

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ử gây ra sự thay đổi bố cục) chỉ liệt kê những phần tử chịu ảnh hưởng của sự thay đổi bố cục.

Một quy trình kiểm tra mới ước tính các nguyên nhân gốc gây ra sự 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 > 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 > Lối tắt.
  • Bảng trong phần 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.

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.