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

Jecelyn Yeen

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 luồng người dùng từng bước trong bảng điều khiển Recorder (Trình ghi).

Để đặt điểm ngắt, hãy nhấp vào dấu 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, quá trình phát lại sẽ tạm dừng trước khi thực thi 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 hình dung và gỡ lỗi luồng người dùng.

Hãy xem Tài liệu tham khảo về tính năng của Trình ghi để biết thêm thông tin.

Vấn đề về Chromium: 1257499

Hỗ trợ sự kiện di chuột trong bảng điều khiển Trình ghi

Trình ghi âm hiện hỗ trợ thêm bước di chuột (lơ lửng) theo cách thủ công trong bản ghi.

Bản minh hoạ này cho thấy một trình đơn bật lên khi di chuột. Hãy thử 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ạn phát lại luồng người dùng ngay bây giờ, luồng này sẽ không thành công vì Trình ghi không tự động ghi lại các sự kiện di chuột trong quá trình 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

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

LCP là một chỉ số quan trọng và xoay quanh người dùng nhằm đ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 rễ của Thời gian hiển thị nội dung lớn nhất (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 đường dẫn quan trọng cho tài nguyên LCP.

Hãy xem phần 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 của trang web bằng bảng điều khiển này.

Vấn đề về Chromium: 1326481

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

Bảng điều khiển Thông tin chi tiết về hiệu suất hiện phát hiện hiện tượng văn bản ẩn xuất hiện chớp nhoáng (FOIT) và hiện tượng văn bản không được định kiểu xuất hiện chớp nhoáng (FOUT) là nguyên nhân gốc rễ tiềm ẩn gây ra sự thay đổi bố cục.

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

Hãy xem phần Tối ưu hoá việc tải và kết xuất WebFont để tìm hiểu kỹ thuật ngăn việc bố cục bị thay đổi.

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 DevTools để kiểm thử việc đăng ký trình xử lý giao thức URL cho Ứng dụng web tiến bộ (PWA).

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

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

Ví dụ: cài đặt ứng dụng web tiến bộ (PWA) minh hoạ này. Trong phần Trình xử lý giao thức, hãy nhập "americano" rồi nhấp vào 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 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ả nội dung khác.

Trong bản minh hoạ này, hãy nhấp vào Mở hộp thoại.

Để giúp hình dung các phần tử lớp trên cùng, DevTools sẽ thêm một vùng chứa lớp trên cùng (#top-layer) vào cây DOM. Thuộc tính này nằm sau thẻ </html> đóng.

Để chuyển từ phần tử vùng chứa lớp trên cùng đến phần tử cây lớp trên cùng, hãy nhấp vào nút reveal (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 lớp trên cùng (ví dụ: phần tử hộp thoại), hãy nhấp vào huy hiệu 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ở 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 quá trình gỡ lỗi

Giờ đây, 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ụ của Chrome cho nhà phát triển sẽ khôi phục tính năng khởi động lại khung. Tuy nhiên, bạn không thể chỉnh sửa hàm mà bạn đang tạm dừng. Các nhà phát triển thường 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 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 quy tắc @scope at trong ngăn Styles (Kiểu)

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

Quy tắc @scope tại là một phần của quy cách CSS Cascading and Inheritance Level 6 (Lối xếp tầng và kế thừa CSS cấp 6). Các quy tắc này cho phép nhà phát triển xác định phạm vi của quy tắc kiểu trong CSS.

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

Vấn đề về Chromium: 1337777

Cải tiến bản đồ nguồn

Sau đâ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 giải quyết chính xác các giá trị nhận dạng bản đồ nguồn có dấu câu. Một số trình rút gọn 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 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, các điểm ngắt không được kích hoạt trong một số tệp do các URL chính tắc trùng lặp.

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

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

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

• Xoá đúng cách một cặp khoá-giá trị bộ nhớ cục bộ khỏi bảng trong ngăn Application (Ứng dụng) > Local Storage (Bộ nhớ cục bộ) khi cặp khoá-giá trị đó bị xoá. (1339280)
• Bản xem trước màu hiện 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 các nút này bị đặt nhầm. (1340062)
• Hiển thị nhất quán các mục CSS flex và lưới trong ngăn Bố cục, cũng như hiển thị các mục đó dưới dạng huy hiệu trong bảng điều khiển Phần tử. Trước đây, các mục flex và lưới 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 DevTools tìm thấy tập lệnh khiến khung đó được gắn nhãn là quảng cáo. Bạn có thể mở một khung thông qua Application (Ứng dụng) > Frames (Khung). (1217041)

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.

• Gửi ý kiến phản hồi và yêu cầu về tính năng cho chúng tôi tại 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 biểu tượng more_vert Tuỳ chọn khác > Trợ giúp > Báo cáo sự cố của Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
• Gửi tweet đến @ChromeDevTools.
• Để lại bình luận trên video YouTube về tính năng mới trong DevTools hoặc video YouTube về mẹo sử dụng DevTools.

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.