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

Sofia Emelianova
Sofia Emelianova
GitHub

Bộ sưu tập chính thức của các tiện ích cho Trình ghi đã ra mắt

Bộ sưu tập chính thức gồm các tiện ích Recorder (Trình ghi) để xuất và phát lại hiện đã hoạt động.

Để mở bộ sưu tập trực tiếp từ Trình ghi, hãy chọn Xuất > Tải tiện ích bổ sung... trên thanh thao tác ở đầu bảng điều khiển Trình ghi.

Cải tiến mạng

Phiên bản này mang đến một số điểm cải tiến cho bảng điều khiển Mạng.

Lý do không thành công trong cột Trạng thái

Cột Trạng thái hiện luôn hiển thị lý do không thành công. Trước đây, bạn phải bật Big request rows (Hàng yêu cầu lớn) hoặc chọn yêu cầu trong bảng.

Trước và sau khi hiển thị lý do không đạt trong cột Trạng thái.

Vấn đề về Chromium: 1506760.

Cải thiện trình đơn phụ Sao chép

Trình đơn con Sao chép của một yêu cầu hiện được sắp xếp hợp lý hơn.

Trình đơn con Sao chép trước và sau khi cải tiến.

Ngoài ra, tuỳ chọn Sao chép dưới dạng cURL hiện sẽ sao chép đúng lệnh vào bảng nhớ tạm trên Windows.

Vấn đề về Chromium: 1267033, 1276452, 798498.

Điểm cải tiến về hiệu suất

Phiên bản này mang đến một số điểm cải tiến cho bảng điều khiển Hiệu suất.

Đường dẫn trong Dòng thời gian

Giờ đây, Dòng thời gian ở đầu bảng điều khiển Hiệu suất cho phép bạn đặt các dấu vết và chuyển đổi giữa các dấu vết đó.

Để đặt một chuỗi liên kết, hãy chọn một phạm vi trên Dòng thời gian, di chuột qua phạm vi đó rồi nhấp vào nút N ms . Bạn có thể tạo nhiều chuỗi liên kết lồng nhau liên tiếp. Để chuyển đổi giữa các mức thu phóng, hãy nhấp vào đường dẫn tương ứng trong chuỗi ở đầu Dòng thời gian. Hãy xem video tiếp theo để xem cách hoạt động của các chuỗi liên kết.

Vấn đề về Chromium: 1467739.

Trình khởi tạo sự kiện trong kênh Chính

Theo mặc định, kênh Hiệu suất > Chính hiện hiển thị các mũi tên kết nối trình khởi tạo và các sự kiện sau đây mà trình khởi tạo đó gây ra.

  • Lỗi vô hiệu hoá kiểu hoặc bố cục -> Tính toán lại kiểu hoặc Bố cục
  • Yêu cầu khung ảnh động -> Khung ảnh động đã kích hoạt
  • Yêu cầu lệnh gọi lại ở trạng thái rảnh -> Kích hoạt lệnh gọi lại ở trạng thái rảnh
  • Install Timer (Cài đặt bộ hẹn giờ) -> Timer Fired (Đã kích hoạt bộ hẹn giờ)
  • Tạo WebSocket -> Gửi... và Nhận giao thức bắt tay của WebSocket hoặc Huỷ bỏ WebSocket

Để xem các mũi tên, hãy tìm một sự kiện như vậy trong dấu vết rồi nhấp vào sự kiện đó. Trước đây, tính năng này là một thử nghiệm.

Một mũi tên từ yêu cầu và kích hoạt lệnh gọi lại ở trạng thái rảnh.

Vấn đề về Chromium: 1434596.

Trình đơn bộ chọn thực thể máy ảo JavaScript cho Công cụ phát triển Node.js

Trong bảng điều khiển Hiệu suất của Công cụ dành cho nhà phát triển Node.js, giờ đây, bạn có thể chọn một thực thể máy ảo JavaScript trong trình đơn thả xuống tương ứng trên thanh thao tác. Một tính năng tương tự đã có trong Trình phân tích tài nguyên JavaScript sắp ngừng hoạt động.

Trước và sau khi thêm trình đơn mới cho phép bạn chọn một thực thể máy ảo JavaScript.

Vấn đề về Chromium: 1511813.

Cải tiến thành phần

Phiên bản này mang đến một số điểm cải tiến cho bảng điều khiển Elements (Thành phần).

Ngoài hai tính năng tiếp theo, bảng điều khiển Elements (Thành phần) hiện sẽ ghi nhớ thẻ gần đây nhất mà bạn đã mở, chẳng hạn như Computed (Đã tính toán) hoặc Properties (Thuộc tính).

Giờ đây, bạn có thể chỉnh sửa phần tử giả ::view-transition trong phần Kiểu

Giờ đây, bạn có thể chỉnh sửa các phần tử giả lập CSS ::view-transition trong Kiểu bằng cách sử dụng trang tính kiểu của trình kiểm tra.

Trước và sau khi chỉnh sửa hỗ trợ các phần tử giả chuyển đổi chế độ xem.

Để biết thêm thông tin, hãy xem bài viết Chuyển đổi mượt mà và đơn giản bằng API Chuyển đổi thành phần hiển thị.

Vấn đề về Chromium: 1511233.

Hỗ trợ thuộc tính align-content cho vùng chứa khối

Thuộc tính align-content hiện hoạt động với mọi vùng chứa khối, bao gồm cả table-caption và table-cell. Trước đây, thuộc tính này chỉ hoạt động với lưới và flex.

Hỗ trợ căn chỉnh nội dung trước và sau trong vùng chứa khối.

Vấn đề về Chromium: 1500511.

Lối tắt và lệnh mới trong phần Nguồn

Giờ đây, bạn có thể nhấn tổ hợp phím Cmd (Mac) / Ctrl (Win) + Shift + nhấp vào số dòng trong Sources (Nguồn) để tạo một điểm ghi nhật ký. Phím tắt này là bổ sung cho tổ hợp phím Cmd (Mac) / Ctrl (Win) + nhấp hiện có cho các điểm ngắt có điều kiện.

Command Menu (Trình đơn lệnh) nhận được lệnh Reveal active file in navigator sidebar (Hiển thị tệp đang hoạt động trong thanh bên của trình điều hướng) mới. Lệnh này hoạt động giống như tuỳ chọn tương ứng trong trình đơn thả xuống của Editor (Trình chỉnh sửa).

Lệnh mới để hiển thị tệp đang hoạt động trong thanh bên của trình điều hướng.

Vấn đề về Chromium: 1486933, 1467464.

Hỗ trợ tư thế cho các thiết bị có thể gập lại được mô phỏng

Chế độ thiết bị hiện cho phép bạn đặt tư thế của một thiết bị có thể gập lại được mô phỏng: Liên tục hoặc Gập lại. Tư thế liên tục đề cập đến vị trí "phẳng" và khi gập lại sẽ tạo thành một góc giữa các phần của màn hình.

Trình đơn thả xuống có các lựa chọn về tư thế.

Ngoài ra, danh sách Thiết bị sẽ có một thiết bị có thể gập lại được mô phỏng mới: Asus Zenbook Fold.

Vấn đề về Chromium: 1066842.

Giao diện động

Công cụ cho nhà phát triển hiện tự động khớp với giao diện màu của Chrome. Cách đặt giao diện:

  1. Mở một thẻ mới rồi nhấp vào biểu tượng Tuỳ chỉnh Chrome ở góc dưới cùng bên phải.
  2. Trong phần Giao diện, hãy chọn một giao diện thông qua Thay đổi giao diện hoặc chọn một bảng màu.

Công cụ cho nhà phát triển sẽ khớp với giao diện màu được chọn trong phần Giao diện.

Vấn đề về Chromium: 1483276.

Cảnh báo về việc ngừng sử dụng cookie của bên thứ ba trong bảng điều khiển Mạng và Ứng dụng

Giờ đây, cả bảng điều khiển Mạng và Ứng dụng đều làm nổi bật và hiển thị cảnh báo bên cạnh các cookie chịu ảnh hưởng của các quy định hạn chế của bên thứ ba trong Biện pháp chống theo dõi.

Trong mục Network (Mạng), hãy tìm một yêu cầu có biểu tượng cảnh báo , nhấp vào yêu cầu đó rồi mở thẻ Cookies (Cookie).

Trước và sau khi ghi lại cookie của bên thứ ba trong bảng điều khiển Mạng.

Trong Application (Ứng dụng), hãy chuyển đến Storage (Bộ nhớ) > Cookies (Cookie) rồi nhấp vào một miền. Cookie được đánh dấu bằng màu vàng không được lưu trữ trong trình duyệt.

Trước và sau khi làm nổi bật cookie của bên thứ ba trong bảng điều khiển Ứng dụng.

Di chuột lên biểu tượng cảnh báo để xem chú giải mô tả các vấn đề, rồi nhấp vào biểu tượng đó để mở thẻ Vấn đề có thêm thông tin.

Ngoài ra, các cookie trong bảng hiện được sắp xếp theo tên theo mặc định.

Vấn đề về Chromium: 1506225, 1503961.

Lighthouse 11.4.0

Bảng điều khiển Lighthouse hiện chạy Lighthouse 11.4.0. Xem danh sách đầy đủ các thay đổi. Trong số những thay đổi đáng chú ý có quy trình kiểm tra mới giúp bạn phát hiện xem trang web của mình có còn sử dụng cookie của bên thứ ba hay không.

Quy trình kiểm tra phát hiện cookie của bên thứ ba.

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

  • Khi bạn mở phần Cài đặt > Thử nghiệm, hộp Tìm kiếm sẽ tự động được lấy tiêu điểm.
  • Nút (huỷ) Clear input (xoá dữ liệu đầu vào) trong phần Network (Mạng) > Filter (Bộ lọc) hiện có thể lấy tiêu điểm.
  • Cây tệp trong Sources (Nguồn) > Page (Trang) hiện hiển thị chính xác ở chế độ tương phản cao.
  • Giờ đây, trình đọc màn hình sẽ thông báo chính xác những nội dung sau:
    • Trạng thái của hộp đánh dấu trong Sources (Nguồn) > Breakpoints (Điểm ngắt).
    • Thông tin về vị trí và chỉ mục cho danh sách đề xuất.
    • Kết quả của hành động khi thêm hoặc xoá một vị trí trong phần Cài đặt > Vị trí.
    • Nhóm quy tắc loại trừ (chung hoặc tuỳ chỉnh) trong phần Cài đặt > Danh sách bỏ qua.

Các vấn đề về Chromium: 1504938, 1499868, 1512161, 1515224, 1515418, 1516998, 1517015.

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:

  • Ảnh động:
    • Khắc phục lỗi hiển thị cửa sổ bật lên ảnh chụp màn hình nằm ngoài giới hạn (1506991).
    • Khắc phục lỗi các nút ảnh động đã xoá không được đánh dấu là đã xoá (1506561).
  • Mạng:
    • Ghi đè tiêu đề: Khắc phục lỗi biểu tượng dấu chấm màu tím giả trong thẻ Tiêu đề (1507856).
    • Bản xem trước: Khắc phục lỗi giải mã kép không cần thiết (1509336).
    • Khắc phục lỗi khiến các yêu cầu ngắn không xuất hiện (1509862).
  • Application (Ứng dụng) > IndexedDB: Sắp xếp lại các nút trong thanh thao tác để nhất quán với các bảng điều khiển khác (1393800).
  • Cảm biến: Khắc phục lỗi không có vị trí không chính xác lệnh gọi lại thành công (1486859).
  • Hiệu suất:
    • Nút Thu gom rác hiện có biểu tượng thích hợp là "chổi quét" thay vì "thùng rác" (1507530).
    • Dấu vết hiệu suất hiện giữ lại dữ liệu khi điều hướng đến about:blank (1509947).

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.