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 Máy ghi âm

Giờ đây, bạn có thể đặt điểm ngắt và phát lại từng bước trong luồng người dùng trong bảng điều khiển 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 hiện bước này. Từ đây, bạn có thể tiếp tục phát lại, thực hiện 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 hoàn toàn luồng người dùng.

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

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

Vấn đề về Chromium: 1257499

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

Giờ đây, Máy ghi màn hình hỗ trợ việc thêm một bước di chuột theo cách thủ công vào 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 một 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 quy trình người dùng ngay bây giờ, quy trình 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 lên bộ chọn trước khi nhấp vào mục trong trình đơn.

Hỗ trợ sự kiện di chuột trong Máy ghi âm

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 ra 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 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 những tài nguyên làm chậm LCP và xem đường dẫn quan trọng cho 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 bằng bảng điều khiển này.

LCP trong bảng điều khiển Thông tin chi tiết về hiệu suất

Vấn đề về Chromium: 1326481

Xác định các đoạn 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

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

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

Hãy xem bài viết 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 bố cục thay đổi.

FOUT trong bảng điều khiển Thông tin chi tiết về hiệu suất

Các vấn đề về Chromium: 1334628, 1328873

Trình xử lý giao thức trong ngăn Manifest

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

Chế độ đă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) để mang lại trải nghiệm tích hợp hơn.

Chuyển đến phần Protocol Handlers (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 có sẵn tại đây.

Ví dụ: cài đặt PWA minh hoạ này. Trong phần 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.

Trình xử lý giao thức trong ngăn Manifest

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 cùng của 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. Nó 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 reveal (hiện) 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 top-layer để chuyển đến vùng chứa lớp trên cùng.

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

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 Nguồn chỉ hỗ trợ việc đí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 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.

ALT_TEXT_HERE

Vấn đề về Chromium: 1341255

Hỗ trợ 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 trong 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. 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:

  • Bạn 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 ở sâu hơn trong ngăn xếp

chỉnh sửa trực tiếp trong quá trình gỡ lỗi

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.

Quy tắc @scope là một phần của quy cách CSS Cascading and Inheritance Level 6. Các quy tắc này cho phép nhà phát triển xác định phạm vi của các quy tắc kiểu trong CSS.

Mở trang minh hoạ này rồi 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 @scope. Nhấp vào khai báo quy tắc để chỉnh sửa.

@scope tại các quy tắc trong ngăn Kiểu

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

  • Giờ đây, Công cụ cho nhà phát triển sẽ giải quyết đúng cách các giá trị nhận dạng bản đồ nguồn có dấu chấm câu. Một số trình rút gọn hiện đại (ví dụ: esbuild) tạo ra các bản đồ nguồn hợp nhất 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 giải quyết tên bản đồ nguồn cho các hàm khởi tạo bằng lệnh gọi super. ALT_TEXT_HERE
  • Đã khắc phục lỗi 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 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ố điểm 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ị trong 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)
  • Giờ đây, bản xem trước màu sẽ hiển thị chính xác khi bạn 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 điểm này bị đặt sai. (1340062)
  • Hiển thị nhất quán các mục lưới và linh hoạt CSS 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 linh hoạt và mục lưới bị thiếu ngẫu nhiên ở cả hai vị trí. (1340441, 1273992)
  • Đã có đường liên kết Creator Ad Script (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 hình thông qua Application (Ứng dụng) > Frames (Khung hình). (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 truy cập vào 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 các vấn đề trên trang web của mình trước khi người dùng tìm thấy!

Liên hệ với nhóm Chrome DevTools

Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng mới, nội dung cập nhật 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 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.