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 lựa 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 dùng thử tiện ích mẫu. Chọn chế độ phát lại tuỳ chỉnh mới để mở giao diện người dùng phát lại tuỳ chỉnh.

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

Vấn đề về Chromium: 1400243.

Ghi bằng bộ chọn xuyên thấu

Ngoài bộ chọn tuỳ chỉnh, CSS, ARIA, văn bản và XPath, giờ đây, bạn có thể ghi bằng bộ chọn pierce. Các bộ chọn này hoạt động giống như 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 trang có shadow DOM và đánh dấu vào 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 DOM tối và kiểm tra bước tương ứ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 có một lựa chọn xuất mới: Puppeteer (bao gồm cả 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, chọn lựa chọn mới rồi lưu tệp .js.

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

Tải tiện ích

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

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? Giờ đây, ngăn Elements (Phần tử) > Styles (Kiểu) sẽ cho bạn thấy nội dung mô tả ngắn khi bạn di chuột qua một thuộc tính.

Chú thích này 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 bạn hiểu rõ về CSS, thì có thể bạn sẽ thấy chú thích gây phiền toái. Để tắt tất cả, hãy đánh dấu vào Không hiển thị.

Để bật lại, hãy đánh dấu vào Settings > Preferences > Elements > Show CSS documentation tooltip (Hiện chú thích tài liệu CSS).

Vấn đề về Chromium: 1401107.

Hỗ trợ tính năng lồng CSS

Giờ đây, ngăn Elements (Phần tử) > Styles (Kiểu) sẽ nhận dạng cú pháp CSS Nesting (Lồng CSS) và áp dụng các kiểu lồng nhau 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 về điểm ngắt nâng cao, 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:

• console.* lệnh gọi trong đ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 ..

Giờ đây, Bảng điều khiển sẽ 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ì các tập lệnh VM<number> mà Chrome tạo để chạy bất kỳ đoạn mã 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.

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

Để tập trung vào những phần quan trọng nhất trong mã của bạn, 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 một tập lệnh hoặc thư mục bất kỳ rồi chọn một trong các lựa chọn liên quan đến việc bỏ qua. 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. 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 cuộc gọi.

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

Nếu bạn chọn một tập lệnh bị bỏ qua, nút Định cấu hình sẽ đưa bạn đến phần 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 cách nhấp vào > Ẩn các nguồn có trong danh sách bỏ qua .

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 DevTools đã lên kế hoạch ngừng cung cấp Trình phân tích tài nguyên JavaScript và yêu cầu nhà phát triển Node.js và Deno sử dụng bảng điều khiển Hiệu suất để lập hồ sơ hiệu suất CPU JavaScript.

Phiên bản DevTools này (112) bắt đầu giai đoạn thứ tư của quy trình ngừng sử dụng Trình phân tích tài nguyên JavaScript. Giờ đây, bảng JavaScript Profiler (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 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 RFC và crbug.com/1354548 tương ứng.

Vấn đề về Chromium: 1417647.

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

Thẻ Rendering (Kết xuất) sẽ thêm một lựa chọn mới vào danh sách Emulate vision deficiencies (Mô phỏng khiếm thị) – Reduced contrast (Độ tương phản giảm). Với lựa chọn này, bạn có thể biết trang web của mình trông như thế nào đối với những người có độ nhạy tương phản thấp.

Xin lưu ý rằng các lựa chọn trong danh sách đã được cập nhật để cho bạn biết các lựa chọn đó thể hiện mức độ không nhạy cảm với màu sắc.

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

Giờ đây, bảng Lighthouse sẽ chạy Lighthouse 10.0.1. Để biết thêm thông tin, hãy xem bài viết Có gì mới trong Lighthouse 10.0.1.

Để tìm hiểu những kiến thức cơ bản về cách sử dụng bảng 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 > > Chế độ thao tác 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.

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 > Thiết bị.

Vấn đề về Chromium: 772558.

Cảnh báo trên bảng điều khiển để 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 vì chúng có thể làm chậm quá trình điều hướng nhưng không có mục đích gì. Bạn không còn cần đến những trình xử lý như vậy để trang web của bạn đủ điều kiện là một Ứng dụng web tiến bộ.

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

Vấn đề về Chromium: 1347319.

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:

• Giờ đây, ngăn Sources > Breakpoints (Nguồn > Điểm ngắt) sẽ cho thấy các đường dẫn tệp khác biệt bên cạnh tên tệp không rõ ràng (1403924).
• Mục Main (Chính) trong biểu đồ ngọn lửa của bảng điều khiển Performance (Hiệu suất) hiện chỉ định CpuProfiler::StartProfiling là Profiler Overhead (1358602).
• Công cụ cho nhà phát triển cải thiện tính năng tự động hoàn thành:
  • Nguồn: Hoàn thành nhất quán mọi từ (1320204).
  • Bảng điều khiển: Arrow down chọn đề xuất đầu tiên và các đề xuất sẽ nhận được gợi ý Tab (1276960).
• Công cụ cho nhà phát triển đã thêm một điểm ngắt 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).
• DevTools đã thiết lập một giải pháp giú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 Bảng điều khiển có tên hay hơn: Tự động mở rộng thông báo console.trace(). (1139616).

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.

• 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.
• Đăng bài trên X cho @ChromeDevTools.
• Hãy bình luận trên video "Có gì mới trong Công cụ cho nhà phát triển" trên YouTube hoặc video "Mẹo sử dụng Công cụ cho nhà phát triển" trên YouTube.

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.