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 trứng phục sinh

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

Để tìm biểu tượng này, hãy tìm biểu tượng 💫 nhiều màu sắc.

Nội dung cập nhật về 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 Elements (Thành phần).

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

Thẻ Elements (Thành phần) > Styles (Kiểu) hiện có tuỳ chọn Emulate a focused page (Mô phỏng một trang được lấy làm tâm điểm) trong nút Toggle elements state (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 Rendering (Hiển thị).

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ố thành phần 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 một trang được đặt tiêu điểm cho phép bạn gỡ lỗi một phần tử như thể phần tử đó đang được đặt 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 chuyển động trong dự phòng var()

Để đơn giản hoá việc chỉnh sửa CSS, thẻ Elements (Thành phần) > 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 chuyển động mượt) trong các phương án dự phòng var().

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

Vấn đề về Chromium: 1520417.

Không dùng công cụ chiều dài CSS nữa

Công cụ tạo độ dài CSS không còn được dùng nữa do nhận đượ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 được nữa. Thay vào đó, hãy nhấp đúp vào giá trị đó rồi nhập giá trị mới.

Để bật lại công cụ chiều dài, hãy xoá Settings (Cài đặt) > Experiments (Thử nghiệm) > Deprecate CSS <length> authoring tool in the Styles tab (Ngừng sử dụng công cụ tạo 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ụ đo độ dài giúp bạn trong quy trình làm việc. Vui lòng để lại ý kiến phản hồi trong crbug/1522657.

Thử nghiệm về việc ngừng sử dụng đã tắt.

Cửa sổ bật lên cho kết quả tìm kiếm đã chọn trong mục Hiệu suất > Luồng chính

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

Trước và sau khi hiển thị một 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 mang đến một số nội dung 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ẻ Network (Mạng) > EventStream (Luồng sự kiện)

Thẻ Network (Mạng) > EventStream (Luồng sự kiện) 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 hiểu đượ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ụ dành cho nhà phát triển xin cảm ơn Charles Vazac đã ra mắt 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ính năng 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ú giải công cụ có lý do miễn trừ cho cookie của bên thứ ba trong phần Mạng > Cookie

Thẻ Mạng > Cookie hiện hiển thị chú giải công cụ với lý do miễn trừ bên cạnh những cookie lẽ ra đã bị chặn do việc ngừng sử dụng cookie của bên thứ ba.

Hình ảnh trước và sau khi hiển thị chú giải công cụ 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 tất cả các điểm ngắt trong phần Nguồn

Phần Sources (Nguồn) > Breakpoints (Điểm ngắt) sẽ đưa các tuỳ 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, các tuỳ chọn này bị bỏ qua trong quá trình 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) > Breakpoints (Điểm ngắt) rồi chọn tuỳ chọn tương ứng.

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

Vấn đề về Chromium: 1522037.

Xem các tập lệnh đã tải trong DevTools cho Node.js

DevTools cho Node.js hiện hiển thị các tập lệnh đã tải trong cây điều hướng trong Sources (Nguồn) > Scripts (Tập lệnh).

Trước và sau khi thêm thẻ Tập lệnh có 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 ướ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 phần tử thay đổi bố cục chỉ liệt kê các phần tử chịu ảnh hưởng của thay đổi bố cụ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.

Để tìm hiểu kiến thức 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ề hỗ trợ tiếp cận sau:

  • 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 phần Cài đặt > Thử nghiệm.
    • Thông báo xác nhận hành động khi xoá, xác nhận hoặc khôi phục lối tắt trong phần 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 sửa lỗi và cải tiến đá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 để 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 qua tiến trình (1519469).
  • Nguồn: Chiều cao dòng trong Trình chỉnh sửa được tăng lên để dễ đọc mã hơn (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à cách 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 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.

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.