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ề ứng dụng 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 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 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á API chrome.devtools.recorder và xem thêm ví dụ về tiện ích.

Vấn đề về Chromium: 1400243.

Ghi lại bằng bộ chọn dấu xỏ

Ngoài các bộ chọn tuỳ chỉnh, CSS, ARIA, văn bản và NETWORK, giờ đây bạn có thể ghi âm bằng bộ chọn đường biên. Những 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 một trang có shadow DOM và đánh dấu Hộp đánh dấu. Pierce trong phần 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.

Đặt Máy ghi âm để sử dụng bộ chọn lỗ xỏ ngón; Bộ chọn xép trong thực tế.

Vấn đề về Chromium: 1411188.

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

Recorder (Trình ghi) giới thiệu 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ể chụp và cải thiện hiệu suất của trang web.

Mở bản ghi, 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ả bản 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.

Đã mở báo cáo Lighthouse 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ư các lựa chọn xuất tuỳ chỉnh. Tải 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 bản ghi âm.

Tùy chọn Tải tiện ích 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ề Chromium: 1417104, 1413168.

Phần tử > Thông tin cập nhật về 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? Phần tử > Giờ đây, ngăn Kiểu sẽ hiển thị nội dung mô tả ngắn khi bạn di chuột qua một tài sản.

Chú thích cung cấp tài liệu về thuộc tính CSS.

Chú thích 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 MDN về tài sản này.

Nếu hiểu rõ về CSS, bạn có thể thấy phần chú thích gây khó chịu. Để tắt tất cả tiện ích, hãy chọn Hộp đánh dấu. Không hiển thị.

Để bật lại, hãy chọn Cài đặt. Cài đặt > Lựa chọn ưu tiên > Phần tử > Hộp đánh dấu. Hiện chú thích cho tài liệu về CSS.

Vấn đề về Chromium: 1401107.

Hỗ trợ lồng ghép CSS

Phần tử > Giờ đây, ngăn Kiểu nhận dạng cú pháp Lồng ghép CSS và áp dụng 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

Nhằm cải thiện hơn nữa trải nghiệm người dùng của đ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:

Thay đổi về cách hiện tại trên Bảng điều khiển cho thấy những thông báo do điểm ngắt kích hoạt: kèm theo biểu tượng và đường liên kết đến 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 phù 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 JavaScript nào trên V8.

Nhấp vào đường liên kết bên cạnh thông báo về đ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 nhật ký giúp 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 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 trong cây tệp trên Nguồn > Ngăn Page (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 lựa 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 lựa chọn liên quan đến việc bỏ qua.

Tất 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ị 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 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 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.

Trình phân tích tài nguyên JavaScript bắt đầu ngừng hoạt động

Ngay từ Chrome 58, nhóm Công cụ cho nhà phát triển dự định sẽ 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 của CPU JavaScript.

Phiên bản Công cụ cho nhà phát triển này (112) bắt đầu ngừng sử dụng Trình phân tích tài nguyên JavaScript trong 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.

Biểu ngữ ngừng hoạt động ở đầu Trình phân tích tài nguyên.

Thay vì Profiler, hãy sử dụng bảng điều khiển Profiler để phân tích CPU.

Tìm hiểu thêm và gửi ý 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ẻ Kết xuất bổ sung một lựa chọn mới cho danh sách Mô phỏng khiếm khuyết thị giác – Giảm độ tương phản. Với tùy 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 đối với những người bị giảm độ nhạy tương phản.

Chế độ giảm độ tương phản được chọn trong phần &quot;Emulate vision deficiency&quot; (Mô phỏng khiếm khuyết về thị lực) của Google.

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 này thể hiện độ nhạy 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 bài viết Làm cho trang web của bạn dễ đọc hơn.

Vấn đề về 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 bài viết 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 > Cài đặt. > Hộp đánh dấu đang trống. Thành phần điều hướng cũ giờ đây 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. Công cụ cho nhà phát triển đã thêm thiết bị này vào phần 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 Console nhắc bạn 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 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ì chúng 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. Những trình xử lý như vậy không còn cần thiết để trang web của bạn chuyển đổi thành Ứng dụng web tiến bộ nữa.

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 hoạt động trên trang web của bạn. Hãy cân nhắc việc xoá bỏ.

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

Vấn đề về Chromium: 1347319.

Nội dung nổi bật khác

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

  • Nguồn > Ngăn Breakpoints hiện hiển thị 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).
  • Phần Main 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 thiện của Công cụ cho nhà phát triển:
    • Nguồn: Số lần hoàn thành liên tục đối với 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 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).
  • Công cụ cho nhà phát triển 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).
  • Tên phù hợp hơn cho chế độ cài đặt Bảng điều khiể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 việc sử dụng Chrome Canary, Nhà phát triển hoặc Beta làm trình duyệt phát triển mặc định của bạn. 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 Công cụ cho nhà phát triển, kiểm thử các API nền tảng web tiên tiến và tìm ra các vấn đề trên trang web của bạn trước khi người dùng 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 để thảo luận về các tính năng và thay đổi mới trong bài đăng, hoặc bất cứ nội dung nào khác liên quan đến Công cụ cho nhà phát triển.

  • 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ông cụ cho nhà phát triển bằng cách sử dụng Tuỳ chọn khác   Thêm > Trợ giúp > Báo cáo vấn đề về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
  • Tweet tại @ChromeDevTools.
  • Để 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 Mẹo video trên YouTube trong 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.