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 112)

Sofia Emelianova

Jecelyn Yeen

Thông tin cập nhật về Máy ghi âm

Hỗ trợ tiện ích phát lại

Trình ghi hỗ trợ các tuỳ chọn phát lại tuỳ chỉnh mà bạn có thể nhúng vào Công cụ cho nhà phát triển bằng một tiện ích.

Hãy thử tiện ích mẫu. Chọn tuỳ chọn phát lại tuỳ chỉnh mới để mở giao diện người dùng phát lại tuỳ chỉnh.

Giao diện người dùng phát lại tuỳ chỉnh.

Để tuỳ chỉnh Máy ghi âm theo nhu cầu của bạn và tích hợp với các công cụ, hãy cân nhắc việc phát triển tiện ích của riêng bạn: khám phá chrome.devtools.recorder API và xem thêm ví dụ về tiện ích.

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

Ghi hình bằng bộ chọn lỗ

Ngoài bộ chọn tuỳ chỉnh, CSS, ARIA, văn bản và XPath, giờ đây bạn có thể ghi lại bằng bộ chọn có dấu. Các bộ chọn này hoạt động giống như CSS nhưng cũng có thể xuyên qua các gốc bóng.

Bắt đầu bản ghi mới trên một trang có shadow DOM rồi đánh dấu vào Pierce trong phần Các loại bộ chọn cần ghi. Ghi lại hoạt động tương tác của bạn với các phần tử trong DOM tối rồi kiểm tra bước tương ứng.

Thiết lập Máy ghi âm để dùng bộ chọn xuyên suốt; bộ chọn Pierce đang hoạt động.

Sự cố Chromium: 1411188.

Xuất dưới dạng tập lệnh Puppeteer với phân tích Lighthouse

Máy ghi âm mang đến một tuỳ chọn xuất mới: Puppeteer (bao gồm cả bản phân tích Lighthouse). Với Puppeteer, bạn có thể tự động hoá và kiểm soát Chrome. Với Lighthouse, bạn có thể ghi lại và cải thiện hiệu suất trang web của mình.

Mở bản ghi của bạn, nhấp vào Xuất, chọn tuỳ chọn mới và lưu tệp .js.

Xuất Puppeteer (bao gồm cả phân tích Lighthouse).

Chạy tập lệnh Puppeteer để nhận báo cáo Lighthouse trong tệp flow.report.html.

Báo cáo Lighthouse đã mở trong Chrome.

Tải tiện ích

Khám phá các lựa chọn để tuỳ chỉnh trải nghiệm sử dụng máy ghi âm, chẳng hạn như với các lựa chọn xuất tuỳ chỉnh. Tải tiện ích cho Máy ghi âm bằng cách nhấp vào Xuất > Tải tiện ích trong một bản ghi âm.

Tuỳ chọn Tải tiện ích mở rộng trong trình đơn thả xuống Xuất.

Vui lòng thêm tiện ích của riêng bạn vào danh sách Tiện ích Máy ghi âm. Chúng tôi rất mong được thấy tên của bạn trong danh sách!

Vấn đề với Chromium: 1417104, 1413168.

Phần tử > Cập nhật kiểu

Tài liệu CSS

Bạn tra cứu tài liệu về các tài sản CSS bao nhiêu lần một ngày? Giờ đây, ngăn Phần tử > Kiểu sẽ hiển thị nội dung mô tả ngắn khi bạn di chuột qua một thuộc tính.

Chú giải công cụ có tài liệu về tài sản CSS.

Chú giải công cụ này cũng có một đường liên kết Tìm hiểu thêm để đưa bạn đến Tài liệu tham khảo về CSS về tài sản này.

Nếu hiểu rõ về CSS, bạn có thể sẽ thấy các chú giải công cụ rất khó chịu. Để tắt tất cả các nội dung này, hãy đánh dấu vào Không hiển thị.

Để bật lại, hãy chọn Cài đặt > Lựa chọn ưu tiên > Phần tử > Hiện chú giải công cụ tài liệu CSS.

Sự cố Chromium: 1401107.

Hỗ trợ lồng ghép CSS

Ngăn Elements > Styles hiện nhận ra cú pháp CSS Nesting và áp dụng kiểu lồng cho các phần tử phù hợp.

Sự cố Chromium: 1172985.

Đánh dấu điểm ghi nhật ký và điểm ngắt có điều kiện trong Bảng điều khiển

Để cải thiện trải nghiệm người dùng điểm ngắt nâng cao, Bảng điều khiển nay đánh dấu các thông báo được kích hoạt bởi điểm ngắt:

Lệnh gọi console.* trong các điểm ngắt có điều kiện có dấu chấm hỏi màu cam ?
Thông báo Logpoint có hai dấu chấm màu hồng ..

Thay đổi về cách Bảng điều khiển hiện hiển thị các thông báo được kích hoạt bởi điểm ngắt: bằng các biểu tượng và đường liên kết nguồn thích hợp.

Bảng điều khiển hiện cung cấp cho bạn các đường liên kết neo thích hợp đến các điểm ngắt trong tệp nguồn thay vì tập lệnh VM<number> mà Chrome tạo để chạy bất kỳ đoạn JavaScript nào trên V8.

Nhấp vào đường liên kết bên cạnh thông báo điểm ngắt để chuyển thẳng đến trình chỉnh sửa điểm ngắt.

Đường liên kết neo bên cạnh thông báo điểm ghi nhật ký mở ra trình chỉnh sửa điểm ngắt.

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

Bỏ qua các tập lệnh không liên quan trong quá trình gỡ lỗi

Để giúp bạn tập trung vào các phần quan trọng nhất của mã, giờ đây, bạn có thể thêm các tập lệnh không liên quan vào Danh sách bỏ qua ngay từ cây tệp trên ngăn Nguồn > Trang.

Nhấp chuột phải vào tập lệnh hoặc thư mục bất kỳ rồi chọn một trong các tuỳ chọn bỏ qua liên quan đến tập lệnh hoặc thư mục đó. Bạn có thể thấy các lựa chọn để thêm hoặc xoá tập lệnh hoặc thư mục khỏi danh sách và ngược lại. Trình gỡ lỗi bỏ qua các tập lệnh được thêm vào danh sách và bỏ qua các tập lệnh đó trong ngăn xếp lệnh gọi.

Trình đơn theo bối cảnh của thư mục và tập lệnh có các tuỳ chọn liên quan bỏ qua.

Tất cả các tập lệnh và thư mục có trong danh sách bỏ qua sẽ chuyển sang màu xám trong cây tệp.

Các tập lệnh và thư mục trong danh sách bỏ qua sẽ chuyển sang màu xám, bạn có thể ẩn chúng bằng tuỳ chọn thử nghiệm trong trình đơn thả xuống Tùy chọn khác.

Nếu chọn một tập lệnh bị bỏ qua, nút Configure (Định cấu hình) sẽ đưa bạn đến Settings > Ignore List (Cài đặt > Danh sách bỏ qua). Bạn cũng có thể ẩn các nguồn bị bỏ qua khỏi cây tệp bằng > Ẩn các nguồn trong danh sách bỏ qua .

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

Bắt đầu ngừng sử dụng Trình phân tích tài nguyên JavaScript

Ngay từ Chrome 58, nhóm Công cụ cho nhà phát triển đã lên kế hoạch ngừng sử dụng Trình phân tích JavaScript, đồng thời yêu cầu các nhà phát triển Node.js và Deno sử dụng bảng điều khiển Hiệu suất để phân tích hiệu suất của CPU JavaScript.

Phiên bản Công cụ cho nhà phát triển (112) này bắt đầu ngừng sử dụng Trình phân tích tài nguyên JavaScript 4 giai đoạn. Giờ đây, bảng điều khiển Trình phân tích tài nguyên JavaScript sẽ hiển thị biểu ngữ cảnh báo tương ứng.

Thay vì Trình phân tích tài nguyên, hãy sử dụng bảng điều khiển Hiệu suất để phân tích CPU.

Tìm hiểu thêm và đưa ra ý kiến phản hồi tại địa chỉ RFC và crbug.com/1354548 tương ứng.

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

Mô phỏng độ tương phản giảm

Thẻ Hiển thị bổ sung một tuỳ chọn mới vào danh sách Mô phỏng khiếm khuyết về thị lực – Độ tương phản giảm. Với tuỳ chọn này, bạn có thể khám phá xem trang web của mình hiển thị như thế nào trước những người bị giảm độ nhạy tương phản.

Tuỳ chọn độ tương phản giảm được chọn trong chức năng "Mô phỏng các khiếm khuyết về thị lực".

Lưu ý rằng các tuỳ chọn trong danh sách đã được cập nhật để cho bạn biết các tuỳ chọn đại diện cho sự không nhạy cảm màu nào.

Với Công cụ cho nhà phát triển, bạn có thể tìm và khắc phục tất cả các vấn đề về độ tương phản cùng một lúc. Để biết thêm thông tin, hãy xem phần Làm cho trang web dễ đọc hơn.

Vấn đề với Chromium: 1412719, 1412721.

Ngọn hải đăng 10

Bảng điều khiển Lighthouse hiện chạy Lighthouse 10.0.1. Để biết thêm thông tin chi tiết, hãy xem phần Tính năng mới trong Lighthouse 10.0.1.

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

Lighthouse > > Điều hướng cũ hiện bị tắt theo mặc định. Lựa chọn này sử dụng cấu hình Lighthouse cũ ở chế độ điều hướng.

Đã tắt thành phần điều hướng cũ.

Lighthouse 10 hiện sử dụng Moto G Power làm thiết bị mô phỏng mặc định. Công cụ cho nhà phát triển đã thêm thiết bị này vào phần Cài đặt > Thiết bị.

Moto G Power trong danh sách Thiết bị.

Sự cố Chromium: 772558.

Cảnh báo trên Bảng điều khiển về việc xoá trình xử lý tìm nạp trình chạy dịch vụ không hoạt động

Chrome 112 bỏ qua các trình xử lý tìm nạp trình chạy dịch vụ không hoạt động (không hoạt động) vì những trình xử lý này có thể làm chậm quá trình điều hướng nhưng không phục vụ mục đích nào. Bạn không còn cần phải sử dụng những trình xử lý như vậy để trang web của bạn được định dạng thành một Ứng dụng web tiến bộ.

Giờ đây, Console (Bảng điều khiển) sẽ hiển thị cảnh báo nếu tìm thấy một trình xử lý tìm nạp không hoạt động trên trang web của bạn. Hãy cân nhắc việc xoá bản gốc.

Một trình xử lý tìm nạp không hoạt động và cảnh báo tương ứng trong Bảng điều khiển.

Sự cố Chromium: 1347319.

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:

Giờ đây, ngăn Sources > Breakpoints (Điểm ngắt) hiển thị các đường dẫn tệp phân biệt bên cạnh tên tệp không rõ ràng (1403924).
Phần Chính trong biểu đồ hình ngọn lửa của bảng điều khiển Hiệu suất hiện chỉ định CpuProfiler::StartProfiling là Profiler Overhead (1358602).
Tính năng tự động hoàn thành được cải tiến trong Công cụ cho nhà phát triển:
- Nguồn: Hoàn thành nhất quán một từ bất kỳ (1320204).
- Bảng điều khiển: Arrow down chọn đề xuất đầu tiên và các đề xuất sẽ nhận gợi ý Tab (1276960).
Công cụ cho nhà phát triển đã thêm một điểm ngắt của trình nghe sự kiện để cho phép bạn tạm dừng khi mở cửa sổ Hình trong hình của tài liệu (1315352).
Công cụ cho nhà phát triển thiết lập một giải pháp hiển thị đúng cách các cấu phần phần mềm webpack Vue2 dưới dạng JavaScript (1416562).
Chế độ cài đặt Console (Bảng điều khiển) sẽ có tên phù hợp hơn: Tự động mở rộng thông báo console.trace(). (1139616).

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.