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

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

Hỗ trợ phần mở rộng phát lại

Trình ghi giới thiệu tính năng hỗ trợ các tuỳ chọn phát lại tuỳ chỉnh mà bạn có thể nhúng vào DevTools bằng một tiện ích.

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 Trình ghi theo nhu cầu của bạn và tích hợp trình ghi đó với các công cụ của bạn, hãy cân nhắ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ề Chromium: 1400243.

Ghi lại bằng bộ chọn xuyên

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 xuyên thủng. Các bộ chọn này hoạt động giống như các bộ chọn CSS nhưng cũng có thể xuyên qua các gốc bóng.

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

Thiết lập Máy ghi âm để sử dụng bộ chọn xuyên; Bộ chọn xuyên đang hoạt động.

Vấn đề về Chromium: 1411188.

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

Trình ghi giới thiệu một tuỳ chọn xuất mới: Puppeteer (bao gồm cả tính năng 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 của trang web.

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

Xuất Puppeteer (bao gồm cả dữ liệu phân tích của 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 tuỳ chọn để tuỳ chỉnh trải nghiệm sử dụng trình ghi âm, chẳng hạn như các tuỳ chọn xuất tuỳ chỉnh. Tải tiện ích cho Trình ghi bằng cách nhấp vào biểu tượng Xuất. Xuất > Tải tiện ích trong bản ghi.

Tuỳ chọn Get extensions (Tải tiện ích) trong trình đơn thả xuống Export (Xuất).

Bạn có thể thêm tiện ích của riêng mình vào danh sách Tiện ích của trình ghi. Chúng tôi rất mong được thấy video của bạn trong danh sách này!

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

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

Tài liệu về CSS

Mỗi ngày, bạn tra cứu tài liệu về các thuộc tính CSS bao nhiêu lần? Ngăn Elements (Thành phần) > Styles (Kiểu) hiện 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ề một thuộc tính CSS.

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

Nếu đã nắm rõ CSS, bạn có thể thấy các chú giải công cụ gây phiền toái. Để tắt tất cả, hãy đánh dấu vào Hộp đánh dấu. Không hiển thị.

Để bật lại các tính năng này, hãy đánh dấu vào Cài đặt. Cài đặt > Lựa chọn ưu tiên > Thành phần > Hộp đánh dấu. Hiện chú giải công cụ tài liệu CSS.

Vấn đề về Chromium: 1401107.

Hỗ trợ lồng CSS

Ngăn Elements (Phần tử) > Styles (Kiểu) hiện nhận dạng cú pháp CSS Nesting (Lồng ghép CSS) và áp dụng các kiểu lồng ghép cho các phần tử phù hợp.

Vấn đề về 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 hơn nữa trải nghiệm người dùng nâng cao về điểm ngắt, Bảng điều khiển hiện đánh dấu các thông báo do điểm ngắt kích hoạt:

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

Console 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ỳ phầ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ý sẽ mở trình chỉnh sửa điểm ngắt.

Vấn đề về 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 những 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 bất kỳ tập lệnh hoặc thư mục nào rồi chọn một trong các tuỳ chọn liên quan đến việc bỏ qua. Bạn có thể thấy các tuỳ chọn để thêm hoặc xoá tập lệnh hoặc thư mục vào và ra khỏi danh sách. 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 một thư mục và tập lệnh có các tuỳ chọn liên quan đến việc bỏ qua.

Tất cả tập lệnh và thư mục trong danh sách bỏ qua đều có 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ẽ có màu xám, bạn có thể ẩn các tập lệnh và thư mục đó bằng một tuỳ chọn thử nghiệm trong trình đơn thả xuống Tuỳ chọn khác.

Nếu bạn chọn một tập lệnh bị bỏ qua, nút Configure (Định cấu hình) sẽ đưa bạn đến Cài đặt. Settings (Cài đặt) > Ignore List (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 Trình đơn có biểu tượng ba dấu chấm. > Ẩn các nguồn có trong danh sách bỏ qua Thử nghiệm..

Vấn đề về 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 tài nguyên JavaScript và 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 CPU JavaScript.

Phiên bản DevTools (112) này bắt đầu ngừng sử dụng Trình phân tích tài nguyên JavaScript gồm 4 giai đoạn. Bảng điều khiển JavaScript Profiler (Trình phân tích tài nguyên JavaScript) hiện hiển thị biểu ngữ cảnh báo tương ứng.

Biểu ngữ về việc ngừng sử dụng ở đầu Trình phân tích tài nguyên.

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 trong RFCcrbug.com/1354548 tương ứng.

Vấn đề về Chromium: 1417647.

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

Thẻ Rendering (Hiển thị) thêm một tuỳ chọn mới vào danh sách Emulate vision deficiencies (Mô phỏng các khiếm khuyết về thị giác) – Reduced contrast (Độ tương phản giảm). Với tuỳ chọn này, bạn có thể khám phá giao diện của trang web đối với những người có độ nhạy tương phản thấp.

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

Xin 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 đó thể hiện loại tình trạng không phân biệt được màu sắc.

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

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

Lighthouse 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 kiến thức 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 > Cài đặt. > Hộp đánh dấu trống. Điều hướng cũ hiện bị tắt theo mặc định. Tuỳ chọn này sử dụng cấu hình Lighthouse cũ ở chế độ điều hướng.

Tắt tính năng đ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. DevTools đã thêm thiết bị này vào Cài đặt. Cài đặt > Thiết bị.

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

Vấn đề về 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 worker dịch vụ không hoạt động

Chrome 112 bỏ qua trình xử lý tìm nạp trình chạy dịch vụ không hoạt động (no-op) vì các 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. Các trình xử lý như vậy không còn bắt buộc để trang web của bạn đủ điều kiện là một Ứng dụng web tiến bộ.

Console hiện hiển thị cảnh báo nếu tìm thấy trình xử lý tìm nạp không hoạt động trên trang web của bạn. Bạn nên xoá nội dung đó.

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.

Vấn đề về Chromium: 1347319.

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:

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.

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.