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

Sofia Emelianova
Sofia Emelianova
GitHub
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.

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 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 DOM tối 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 thấu; Bộ chọn xuyên thấu đ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 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. Xuất, chọn lựa chọn mới rồi 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 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. Xuất > Tải tiện ích trong một bản ghi.

Lựa 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? 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ú giải công cụ có tài liệu về một thuộc tính CSS.

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 Hộp đánh dấu. Không hiển thị.

Để bật lại, hãy đánh dấu vào Cài đặt. Settings > Preferences > Elements > Hộp đánh dấu. 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:

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

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.

Đường liên kết neo bên cạnh một 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

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

Trình đơn theo bối cảnh của một thư mục và tập lệnh có các lựa 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 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 các tập lệnh và thư mục này bằng một lựa 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 Định cấu hình sẽ đưa bạn đến phần Cài đặt. 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 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 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.

Biểu ngữ ngừng hoạt độ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 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.

Lựa chọn giảm độ tương phản được chọn trong chức năng &quot;Mô phỏng khiếm thị&quot;.

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 > Cài đặt. > Hộp đánh dấu trống. 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.

Đã tắt trình đ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 để 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 đó.

Trình xử lý tìm nạp không có thao tác 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ố đ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.

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.