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 gồm các tiện ích Máy ghi âm đã ra mắt

Bộ sưu tập chính thức về các tiện ích Ghi âm để xuất và phát lại hiện đã có hiệu lực.

Để mở bộ sưu tập ngay từ Máy ghi âm, hãy chọn tải xuống Xuất > Nhận tiện ích... trên thanh thao tác ở đầu bảng Máy ghi âm.

Cải thiện mạng

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

Lý do không thực hiện được trong cột Trạng thái

Giờ đây, cột Trạng thái sẽ luôn hiển thị lý do không thực hiện được. Trước đây, bạn phải bật check_box Hàng yêu cầu lớn hoặc chọn yêu cầu trong bảng.

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

Các sự cố với Chromium: 1506760.

Trình đơn phụ Sao chép được cải tiến

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

Trình đơn phụ Trước và sau khi cải thiện trình đơn phụ Sao chép.

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

Vấn đề với 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.

Breadcrumb trong Dòng thời gian

Dòng thời gian ở đầu bảng điều khiển Hiệu suất hiện cho phép bạn thiết lập các đường dẫn và chuyển giữa các đường dẫn đó.

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

Các sự cố với Chromium: 1467739.

Trình tạo sự kiện trên 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à chúng gây ra.

  • 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 -> Đã kích hoạt khung ảnh động
  • 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
  • Cài đặt bộ tính giờ -> Bộ tính giờ đã kích hoạt
  • Tạo WebSocket -> Gửi... và Nhận giao thức bắt tay 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ũi tên từ yêu cầu và kích hoạt một lệnh gọi lại ở trạng thái rảnh.

Các sự cố với Chromium: 1434596.

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

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

Phần trước và sau khi thêm trình đơn mới cho phép bạn chọn phiên bản máy ảo JavaScript.

Các sự cố với Chromium: 1511813.

Cải tiến về các 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 Phần tử.

Ngoài 2 tính năng tiếp theo, bảng điều khiển Elements (Phần tử) giờ đây sẽ ghi nhớ thẻ mà bạn mở gần đây nhất, ví dụ: 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 Kiểu

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

Tính năng hỗ trợ trước và sau khi chỉnh sửa của các phần tử giả chuyển đổi khung hiển thị.

Để 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 View Transitions API.

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

Hỗ trợ thuộc tính align-content cho các 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, tính năng này chỉ hoạt động với lưới và linh hoạt.

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

Các sự cố với Chromium: 1500511.

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

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

Trình đơn lệnh nhận được lệnh mới Hiển thị tệp đang hoạt động trong thanh bên điều hướng. Lệnh mới này hoạt động giống như tuỳ chọn tương ứng trong trình đơn thả xuống của 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ới Chromium: 1486933, 1467464.

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

Giờ đây, Chế độ thiết bị sẽ cho phép bạn đặt tư thế của thiết bị có thể gập lại được mô phỏng: Liên tục hoặc Gập. Tư thế liên tục đề cập đến vị trí "bằng phẳng" và khi gập lại 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 tư thế.

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

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

Tuỳ chỉnh giao diện động

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

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

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

Các sự cố với Chromium: 1483276.

Cảnh báo về việc loại bỏ 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 Mạng và bảng Ứng dụng đều được làm nổi bật và hiện cảnh báo bên cạnh những cookie chịu ảnh hưởng của các quy định hạn chế của bên thứ ba từ tính năng Chống theo dõi.

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

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

Trong Application (Ứng dụng), chuyển đến Storage (Bộ nhớ) > Cookie rồi nhấp vào một miền. Những cookie được đánh dấu bằng màu vàng sẽ 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 Application.

Hãy di chuột qua biểu tượng cảnh báo để xem chú giải công cụ mô tả vấn đề và nhấp vào biểu tượng để mở thẻ Vấn đề và xem thêm thông tin.

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

Vấn đề với 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. Một trong những thay đổi đáng chú ý là 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.

Kiểm tra để phát hiện cookie của bên thứ ba.

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

  • Khi bạn mở phần cài đặt Cài đặt > Thử nghiệm, hộp Tìm kiếm sẽ tự động xuất hiện.
  • Nút Huỷ Xoá dữ liệu nhập trong Mạng > Bộ lọc hiện có thể làm tâm điểm.
  • Cây tệp trong Nguồn > Trang giờ đây 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 các hộp đánh dấu trong phần Nguồn > Điểm ngắt.
    • Thông tin về vị trí và chỉ mục cho danh sách các đề xuất.
    • Kết quả hành động khi thêm hoặc xoá một vị trí trong phần cài đặt Cài đặt > Vị trí.
    • Các nhóm quy tắc loại trừ (chung hoặc tuỳ chỉnh) trong phần cài đặt Cài đặt > Danh sách bỏ qua.

Các sự cố với Chromium: 1504938, 1499868, 1512161, 1515224, 1515418, 1516998, 1517015.

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:

  • Ảnh động:
    • Khắc phục lỗi khi ảnh chụp màn hình hiển thị vượt quá giới hạn (1506991).
    • Sửa lỗi trong đó các nút ảnh động bị xoá không được đánh dấu là đã xoá (1506561).
  • Mạng:
    • Ghi đè tiêu đề: Sửa lỗi có biểu tượng dấu chấm màu tím sai trong thẻ Tiêu đề (1507856).
    • Xem trước: Sửa 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).
  • Ứng dụng > IndexedDB: Sắp xếp lại các nút trong thanh thao tác để thống nhất với các bảng điều khiển khác (1393800).
  • Cảm biến: Sửa lỗi xảy ra lệnh gọi lại thành công không chính xác không có sẵn vị trí (1486859).
  • Hiệu suất:
    • Nút Thu thập rác hiện có biểu tượng thích hợp là "chổi" thay vì "thùng" (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 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