Trang này được dịch bởi Cloud Translation API.

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 theo 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 chấm màu xanh dương bên cạnh 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ại đây, bạn có thể tiếp tục phát lại, thực thi một bước hoặc huỷ quá trình phát lại.

Nhờ tính năng này, bạn có thể dễ dàng minh hoạ và gỡ lỗi luồng người dùng của mình một cách dễ 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.

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

Vấn đề với Chromium: 1257499

Hỗ trợ sự kiện di chuột qua 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 qua (di chuột) 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ờ, thì thao tác này sẽ không thành công vì Máy ghi âm không tự động thu thập thao tác di chuột qua các sự kiện 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.

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

Vấn đề với Chromium: 1257499

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

LCP là một chỉ số quan trọng, tập trung vào người dùng để đo lường tốc độ tải 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 Thời gian hiển thị nội dung lớn nhất (LCP).

Trong bản ghi hoạt động, 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 về 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 của trang web thông qua bảng điều khiển.

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

Vấn đề với Chromium: 1326481

Xác định các lần nhấp nháy của văn bản (FOIT, FOUT) là nguyên nhân gốc tiềm ẩn dẫn đến việc 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 văn bản nhấp nháy của văn bản vô hình (FOIT) và ánh sáng nhấp nháy của văn bản chưa định kiểu (FOUT) là nguyên nhân gốc tiềm ẩn dẫn đến việc thay đổi bố cục.

Để xem nguyên nhân gốc rễ tiềm ẩn dẫn đến việc thay đổi bố cục, hãy nhấp vào ảnh chụp màn hình trong kênh Layout shift (Thay đổi bố cục).

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 nhằm ngăn sự thay đổi về bố cục.

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

Các sự cố với 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).

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) để có trải nghiệm tích hợp hơn.

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

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

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

Các vấn đề với 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à trực quan hóa 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 trình bày trực quan các phần tử ở lớp trên cùng, Công cụ cho nhà phát triển thêm một vùng chứa lớp trên cùng (#top-layer) vào cây DOM. Đoạn mã 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 của 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 để chuyển đến vùng chứa lớp trên cùng.

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

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

Bạn hiệ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 cung cấp lại 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 đang tạm dừng. Các nhà phát triển thường ngắt một hàm rồi chỉnh sửa hàm đó trong khi tạm dừng.

Trong 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 đang tạm dừng
Không có lệnh gọi đệ quy nào trên cùng một hàm ở phía dưới ngăn xếp

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

Vấn đề với Chromium: 1334484

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

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

@scope tại quy tắc là một phần trong quy cách CSS tầng lớp và tính kế thừa 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 các quy tắc kiểu trong CSS.

Hãy 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 phần @ quy tắc @scope. Nhấp vào nội dung khai báo quy tắc để chỉnh sửa.

Lưu ý: CSS @scope hiện đang trong quá trình phát triển. Để kiểm tra tính năng này, hãy bật cờ Các tính năng nền tảng web thử nghiệm qua chrome://flags/#enable-experimental-web-platform-features.

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

Vấn đề với Chromium: 1337777

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

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

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 câu. Một số trình thu nhỏ hiện đại (ví dụ: esbuild) tạo 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 các hàm khởi tạo bằng lệnh gọi super.
Sửa 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, do có các URL chính tắc trùng lặp, hệ thống không kích hoạt các điểm ngắt trong một số tệp.

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

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

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

Xoá đúng cặp giá trị khoá bộ nhớ cục bộ khỏi bảng trong ngăn Application (Ứng dụng) > Local Storage (Bộ nhớ cục bộ) khi xoá. (1339280)
Bản xem trước màu hiện đã hiển thị chính xác khi xem tệp CSS trong bảng điều khiển Nguồn. Trước đây, vị trí của họ đã bị đặt sai vị trí. (1340062)
Hiển thị các mục trong lưới và mục linh hoạt của CSS trong ngăn Layout (Bố cục) một cách nhất quán, đồng thời hiển thị chúng dưới dạng huy hiệu trong bảng điều khiển Elements (Phần tử). Trước đây, các mục linh hoạt 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 Creator Ad Script 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ở khung thông qua Ứng dụng > Khung. (1217041)

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 > 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.