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

Sofia Emelianova
Sofia Emelianova

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

Để chào mừng 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 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

Thẻ Phần tử > Kiểu hiện có tuỳ chọn check_box Mô phỏng trang được đặt tiêu điểm bên dưới nút Bật/tắt trạng thái của các 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 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, 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 giảm 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 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 Ngừng sử dụng công cụ ghi <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 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ản nhạc chính

Để giúp bạn tìm kiếm dễ dàng hơn, giờ đây, biểu đồ hình ngọn lửa trong bảng Hiệu suất > 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 thẻ Mạng > EventStream

Thẻ Network > 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ừ đối với cookie của bên thứ ba trong phần Mạng > Cookie

Thẻ Mạng > Cookie giờ đây hiển thị chú thích giải thích về các lý do miễn trừ bên cạnh những cookie đáng lẽ phải bị chặn theo 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

Phần Sources (Nguồn) > Breakpoints (Điểm ngắt) sẽ đưa tuỳ 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. 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 > Breakpoints (Điểm ngắt) rồi chọn lựa chọn 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

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 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:

  • 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 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 hành động 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 > 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.

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 vấn đề 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 cứ 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ố trong 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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

Chrome 101

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