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

Sofia Emelianova
Sofia Emelianova

Tìm trứng Phục sinh

Để kỷ niệm ngày Cá tháng Tư năm nay, 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 biểu tượng này, hãy tìm một biểu tượng cảm xúc 💫 nhiều màu sắc.

Cập nhật 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 điều khiển Elements (Phần tử).

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

Thẻ Phần tử > Kiểu hiện có tuỳ chọn check_box Mô phỏng một trang được đặt tiêu điểm trong nút Bật/tắt trạng thái phần tử (: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 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ố 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 như thể phần tử đó nằm trong 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ới Chromium: 1468393.

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

Để đơn giản hoá việc chỉnh sửa CSS, thẻ Phần tử > Kiểu hiện cho phép bạn sử dụng Công cụ chọn màu, Đồng hồ gócTrình chỉnh sửa gia tốc 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 gia tốc trong phương án dự phòng var().

Vấn đề với Chromium: 1520417.

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

Công cụ ghi lại độ dài CSS không đượ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 còn có thể kéo để điều chỉnh giá trị hoặc chọn một loại đơn vị từ trình đơn thả xuống. 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 Ngừng sử dụng công cụ tác giả <length> CSS trong thẻ Kiểu.

Nếu bạn vẫn muốn sử dụng công cụ này, nhóm phụ trách 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 tại crbug/1522657.

Thử nghiệm về việc 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 kênh Hiệu suất > 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 giờ đây sẽ hiển thị một cửa sổ bật lên phía trên sự kiện tương ứng khi bạn đi qua các kết quả tìm kiếm.

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

Sự cố 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 vài điểm cập nhật cho bảng điều khiển Network (Mạng).

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

Thẻ Mạng > EventStream sẽ có:

  • Nút Chặn Xóa để xóa các sự kiện đã ghi trong bảng.
  • Bộ lọc tìm kiếm hiểu 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 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, không chỉ EventSource API. Hãy thử trên trang minh hoạ này.

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

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

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

Trước và sau khi hiển thị chú giải công cụ với lý do miễn trừ 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ới Chromium: 41491846.

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

Phần Nguồn > Điểm ngắt đưa các tùy chọn BậtTắt tất cả các điểm ngắt trở lại vào trình đơn thả xuống. Trước đây, thiết kế lại điểm ngắt đã bỏ qua các tuỳ chọn này.

Để 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 điểm ngắt trong Nguồn > Điểm ngắt rồi chọn lựa chọn tương ứng.

Trước và sau khi kích hoạt lại các tuỳ chọn bật và tắt.

Sự cố Chromium: 1522037.

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

Công cụ cho nhà phát triển cho Node.js hiện 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ó cây tập lệnh đã tải.

Sự cố 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.

Một trong những thay đổi đáng chú ý là một quy trình kiểm tra mới ước tính nguyên nhân gốc khiến bố cục thay đổi. Quy trình kiểm tra này thay thế quy trình kiểm tra các phần tử thay đổi bố cục chỉ liệt kê các phần tử bị ảnh hưởng bởi việc thay đổi bố cục.

Một quy trình kiểm tra mới ước tính nguyên nhân gốc khiến bố cục thay đổi.

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

Sự cố 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 đây:

  • Giờ đây, trình đọc màn hình sẽ thông báo:
    • Văn bản liên kết Tìm hiểu thêm bên cạnh 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.
  • Giờ đây, bảng trong phần cài đặt Cài đặt > Vị trí sẽ hiển thị chính xác dưới dạng một bảng cho các công cụ hỗ trợ tiếp cận.

Sự cố với Chromium: 1516957, 324282443, 324467508, 324930007.

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

Dưới đây là một số bản 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 để phù hợp với Chrome (1523538).
  • Hiệu suất: Hiển thị ảnh chụp màn hình cố đị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 để dễ đọc mã 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à mã hoá (1523128, 1509336, 1523128, 41481944, 1509336).

Tải 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 cung cấp cho bạn quyề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, thử nghiệm API nền tảng web tiên tiến và tìm ra sự cố trên trang web của bạn trước khi người dùng của bạn 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 đây để thảo luận về các tính năng mới và thay đổi trong bài đăng hoặc bất cứ vấn đề nào khác liên quan đến Công cụ cho nhà phát triển.

  • Hãy 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ủa Công cụ cho nhà phát triển bằng cách sử dụng phần Tuỳ chọn khác   Thêm   > Trợ giúp > Báo cáo sự cố về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
  • Tweet tại @ChromeDevTools.
  • Hãy để 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 video 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 video Tính năng mới trong Công cụ cho nhà phát triển.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Kiến thức cơ bản về Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 đã bị huỷ.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59