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

Phát lại từng bước trong ứng dụng Máy ghi âm

Giờ đây, bạn có thể đặt điểm ngắt và phát lại từng bước luồng người dùng trong bảng điều khiển Recorder (Trình ghi).

Để đặt điểm ngắt, hãy nhấp vào chấm màu xanh dương bên cạnh một bước. Phát lại luồng người dùng của bạn, quá trình phát lại sẽ tạm dừng trước khi thực hiện bước đó. Tại đây, bạn có thể tiếp tục phát lại, thực thi một bước hoặc huỷ phát lại.

Với tính năng này, bạn có thể dễ dàng trực quan hoá và gỡ lỗi luồng người dùng.

Xem Tài liệu tham khảo về các tính năng của Máy ghi âm để biết thêm thông tin.

Vấn đề về Chromium: 1257499

Hỗ trợ di chuột qua sự kiện trong bảng điều khiển Máy ghi âm

Máy ghi âm hiện hỗ trợ thêm bước di chuột (di chuột) theo cách thủ công trong bản ghi âm.

Bản minh hoạ này hiển thị trình đơn bật lên khi di chuột. Cố gắng ghi lại luồng người dùng và nhấp vào một mục trong trình đơn.

Nếu bây giờ bạn phát lại luồng người dùng, thì quá trình này sẽ không thực hiện được do Máy ghi âm không tự động ghi lại các sự kiện di chuột trong khi ghi. Để giải quyết vấn đề này, hãy thêm một bước theo cách thủ công để di chuột qua bộ chọn trước khi nhấp vào mục trong trình đơn.

Vấn đề về Chromium: 1257499

Nội dung lớn nhất hiển thị (LCP) trong bảng Thông tin chi tiết về hiệu suất

LCP là một chỉ số quan trọng và tập trung vào người dùng để đo lường tốc độ tải mà người dùng nhận thấy. Giờ đây, bạn có thể tìm hiểu các đường dẫn quan trọng và nguyên nhân gốc của Nội dung lớn nhất hiển thị (LCP).

Trong một bản ghi hiệu suất, hãy nhấp vào huy hiệu LCP trong Dòng thời gian. Trong ngăn Chi tiết, bạn có thể xem điểm LCP, tìm hiểu cách khắc phục các tài nguyên làm chậm LCP và xem các đường dẫn quan trọng của tài nguyên LCP.

Xem Thông tin chi tiết về hiệu suất để tìm hiểu cách nhận thông tin chi tiết hữu ích và cải thiện hiệu suất trang web của bạn thông qua bảng điều khiển này.

Vấn đề về Chromium: 1326481

Xác định các hiệu ứng nhấp nháy văn bản (FOIT, FOUT) là nguyên nhân gốc tiềm ẩn gây ra sự thay đổi bố cục

Giờ đây, bảng điều khiển Thông tin chi tiết về hiệu suất phát hiện nhấp nháy văn bản không hiển thị (FOIT) và nháy văn bản không theo kiểu (FOUT) là nguyên nhân gốc tiềm ẩn gây ra sự thay đổi bố cục.

Để xem các nguyên nhân gốc có thể gây ra sự thay đổi bố cục, hãy nhấp vào ảnh chụp màn hình trong kênh Thay đổi bố cục.

Xem Tối ưu hoá quá trình tải và hiển thị WebFont để tìm hiểu kỹ thuật ngăn chặn sự thay đổi bố cục.

Vấn đề về Chromium: 1334628, 1328873

Trình xử lý giao thức trong ngăn Tệp kê khai

Giờ đây, bạn có thể sử dụng Công cụ cho nhà phát triển để kiểm thử việc đăng ký trình xử lý giao thức URL cho Ứng dụng web tiến bộ (PWA).

Quy trình đăng ký trình xử lý giao thức URL cho phép các PWA đã cài đặt xử lý những đường liên kết sử dụng một giao thức cụ thể (ví dụ: magnet, web+example) để có được trải nghiệm tích hợp hơn.

Chuyển đến phần Protocol Handlers (Trình xử lý giao thức) qua Application (Ứng dụng) > Ngăn Manifest (Tệp kê khai). Bạn có thể xem và thử nghiệm tất cả các giao thức có sẵn tại đây.

Ví dụ: cài đặt PWA minh hoạ này. Trong mục protocol Handlers (Trình xử lý giao thức), hãy nhập "americano" rồi nhấp vào Test Protocol (Kiểm thử giao thức) để mở trang cà phê trong PWA.

Vấn đề về Chromium: 1300613

Huy hiệu lớp trên cùng trong bảng điều khiển Phần tử

Sử dụng huy hiệu lớp trên cùng để hiểu khái niệm về lớp trên cùng và hình dung cách nội dung của lớp trên cùng thay đổi.

Phần tử <dialog> gần đây đã trở nên ổn định trên các trình duyệt. Khi bạn mở một hộp thoại, hộp thoại đó sẽ được đưa vào lớp trên cùng. Nội dung cấp cao nhất hiển thị ở trên tất cả các nội dung khác.

Trong demo này, hãy nhấp vào Mở hộp thoại.

Để giúp trực quan hoá các phần tử lớp trên cùng, Công cụ cho nhà phát triển thêm vùng chứa lớp trên cùng (#top-layer) vào cây DOM. Phần phụ thuộc này nằm sau thẻ đóng </html>.

Để chuyển từ phần tử vùng chứa lớp trên cùng sang phần tử cây lớp trên cùng, hãy nhấp vào nút hiển thị bên cạnh phần tử hoặc phông nền của phần tử đó trong vùng chứa lớp trên cùng.

Bên cạnh phần tử cây của lớp trên cùng (ví dụ: phần tử hộp thoại), hãy nhấp vào huy hiệu top-layer (lớp trên cùng) để chuyển đến vùng chứa lớp trên cùng.

Vấn đề về Chromium: 1313690

Đính kèm thông tin gỡ lỗi Wasm trong thời gian chạy

Giờ đây, bạn có thể đính kèm thông tin gỡ lỗi DWARF cho wasm trong thời gian chạy. Trước đây, bảng điều khiển Sources (Nguồn) chỉ hỗ trợ đính kèm bản đồ nguồn vào các tệp JavaScript và Wasm.

Mở một tệp Wasm trong bảng điều khiển Sources (Nguồn). Nhấp chuột phải vào trình chỉnh sửa rồi chọn Add DWARF debugging info... (Thêm thông tin gỡ lỗi DWARF...) để đính kèm thông tin gỡ lỗi theo yêu cầu.

Vấn đề về Chromium: 1341255

Hỗ trợ tính năng chỉnh sửa trực tiếp trong khi gỡ lỗi

Bây giờ, bạn có thể chỉnh sửa hàm trên cùng trên ngăn xếp mà không cần khởi động lại trình gỡ lỗi.

Trong Chrome 104, Công cụ cho nhà phát triển sẽ khôi phục tính năng khởi động lại khung hình. Tuy nhiên, bạn không thể chỉnh sửa hàm mà bạn hiện đang bị tạm dừng. Các nhà phát triển thường sẽ ngắt trong một hàm rồi chỉnh sửa hàm đó trong khi tạm dừng.

Với bản cập nhật này, trình gỡ lỗi sẽ tự động khởi động lại hàm với các hạn chế sau:

• Chỉ có thể chỉnh sửa hàm trên cùng trong khi tạm dừng
• Không có lệnh gọi đệ quy trên cùng một hàm ở phía dưới ngăn xếp

Vấn đề về Chromium: 1334484

Xem và chỉnh sửa @scope tại các quy tắc trong ngăn Kiểu

Giờ đây, bạn có thể xem và chỉnh sửa các quy tắc @scope của CSS trong ngăn Kiểu.

@scope trong quy tắc là một phần của thông số kỹ thuật Phân tầng và kế thừa cấp 6 của CSS. Các quy tắc này cho phép nhà phát triển chọn phạm vi áp dụng quy tắc kiểu trong CSS.

Mở trang minh hoạ này rồi kiểm tra đường siêu liên kết trong phần tử <div class=”dark-theme”>. Trong ngăn Kiểu, hãy xem quy tắc @scope. Nhấp vào phần khai báo quy tắc để chỉnh sửa.

Vấn đề về Chromium: 1337777

Cải thiện bản đồ nguồn

Dưới đây là một số bản sửa lỗi trên bản đồ nguồn để cải thiện trải nghiệm gỡ lỗi tổng thể:

• Công cụ cho nhà phát triển hiện phân giải đúng cách giá trị nhận dạng bản đồ nguồn bằng dấu chấm câu. Một số trình thu nhỏ hiện đại (ví dụ: esbuild) tạo ra bản đồ nguồn hợp nhất các giá trị nhận dạng với dấu chấm câu tiếp theo (dấu phẩy, dấu ngoặc đơn, dấu chấm phẩy).
• Công cụ cho nhà phát triển hiện phân giải tên bản đồ nguồn cho hàm khởi tạo bằng lệnh gọi super.
• Khắc phục việc lập chỉ mục URL bản đồ nguồn cho các URL chính tắc trùng lặp. Trước đây, hệ thống không kích hoạt điểm ngắt trong một số tệp do có các URL chính tắc trùng lặp.

Vấn đề về Chromium: 1335338, 1333411

Nội dung nổi bật khác

Dưới đây là một số nội dung sửa lỗi đáng chú ý trong bản phát hành này:

• Xóa đúng cặp khóa giá trị lưu trữ cục bộ khỏi bảng trong Ứng dụng > Ngăn Local Storage (Bộ nhớ cục bộ) khi bạn xoá mục này. (1339280)
• Giờ đây, bản xem trước màu sẽ hiển thị chính xác khi xem các tệp CSS trong bảng điều khiển Sources (Nguồn). Trước đây, vị trí của họ bị đặt sai vị trí. (1340062)
• Hiển thị nhất quán các mục linh hoạt và lưới CSS trong ngăn Bố cục, cũng như hiển thị chúng dưới dạng huy hiệu trong bảng điều khiển Phần tử. Trước đây, các mục linh hoạt và lưới đều bị thiếu ngẫu nhiên ở cả hai vị trí. (1340441, 1273992)
• Bạn có thể sử dụng đường liên kết Tập lệnh quảng cáo của nhà sáng tạo mới cho khung quảng cáo nếu Công cụ cho nhà phát triển tìm thấy tập lệnh khiến khung bị gắn nhãn là quảng cáo. Bạn có thể mở một khung qua Application (Ứng dụng) > Khung. (1217041)

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ố Công cụ cho nhà phát triển bằng cách sử dụng Tuỳ chọn khác   > 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.