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

Jecelyn Yeen

Khởi động lại khung trong quá trình gỡ lỗi

Tính năng Bắt đầu lại khung đã trở lại! Bạn có thể chạy lại mã trước đó khi bị tạm dừng ở một vị trí nào đó trong một hàm. Trước đây, tính năng này đã bị ngừng cung cấp và loại bỏ trong Chrome 92 do các vấn đề về độ ổn định.

Trong ví dụ này, trình gỡ lỗi ban đầu tạm dừng ở điểm ngắt (dòng 343) gần cuối hàm toggleColorScheme. Để bắt đầu lại quá trình gỡ lỗi từ đầu hàm toggleColorScheme, hãy mở rộng phần Call stack (Ngăn xếp lệnh gọi) trong ngăn Debugger (Trình gỡ lỗi), nhấp chuột phải vào toggleColorScheme rồi chọn Restart frame (Khởi động lại khung).

Khởi động lại khung trong quá trình gỡ lỗi

Vấn đề về Chromium: 1303521

Các chế độ phát lại chậm trong bảng điều khiển Trình ghi

Giờ đây, bạn có thể phát lại luồng người dùng ở tốc độ chậm hơn – chậm, rất chậm và cực kỳ chậm. Các lựa chọn này giúp bạn quan sát rõ hơn từng bước phát lại trên màn hình.

Mở bảng điều khiển Máy ghi âm rồi bắt đầu ghi một bản ghi mới. Sau khi ghi xong, hãy nhấp vào nút thả xuống Phát lại. Chọn tốc độ để bắt đầu phát lại.

Các chế độ phát lại chậm trong bảng điều khiển Trình ghi

Vấn đề về Chromium: 1306756

Tạo một tiện ích cho bảng điều khiển Trình ghi

Giờ đây, bạn có thể tạo hoặc cài đặt một tiện ích Chrome để xuất tập lệnh phát lại ở định dạng mà bạn yêu thích. Hãy xem tài liệu về API tiện ích ghi để tìm hiểu cách tạo một tiện ích.

Để cài đặt một tiện ích minh hoạ, hãy làm theo các bước này được nêu trong tài liệu.

tiện ích tuỳ chỉnh cho bảng điều khiển Trình ghi

Vấn đề về Chromium: 1325751

Nhóm tệp theo chế độ xem Đã tạo / Đã triển khai trong bảng điều khiển Nguồn

Bật lựa chọn Nhóm tệp theo chế độ xem Đã tạo / Đã triển khai mới để sắp xếp các tệp trong bảng điều khiển Nguồn. Khi phát triển các ứng dụng web bằng các khung (ví dụ: React, Angular), bạn có thể gặp khó khăn khi điều hướng các tệp nguồn do các tệp được rút gọn do các công cụ xây dựng tạo ra (ví dụ: Webpack, Vite).

Khi đánh dấu vào hộp này, bạn có thể nhóm tệp thành 2 danh mục để tìm tệp nhanh hơn:

  • Được tạo. Tương tự như các tệp nguồn mà bạn xem trong IDE. Công cụ cho nhà phát triển tạo các tệp này dựa trên bản đồ nguồn (do các công cụ tạo bản dựng của bạn cung cấp).
  • Đã triển khai. Các tệp thực tế mà trình duyệt đọc. Thông thường, các tệp này được rút gọn.

Hãy tự mình trải nghiệm với bản minh hoạ React này!

Nhóm tệp theo chế độ xem Đã tạo / Đã triển khai trong bảng điều khiển Nguồn

Vấn đề về Chromium: 960909

Theo dõi Thời gian người dùng mới trong bảng điều khiển Thông tin chi tiết về hiệu suất

Trực quan hoá các dấu performance.measure() trong bản ghi bằng bản ghi Thời gian của người dùng mới trong bảng Thông tin chi tiết về hiệu suất.

Ví dụ: trang web này sử dụng phương thức performance.measure() để tính thời gian đã trôi qua của quá trình tải văn bản.

Khi bạn bắt đầu đo lường thời gian tải trang, chỉ số Thời gian của người dùng sẽ xuất hiện trong bản ghi. Nhấp vào mục thời gian để xem thông tin chi tiết về mục đó trên ngăn bên.

Theo dõi thời gian người dùng trong bảng điều khiển Thông tin chi tiết về hiệu suất

Vấn đề về Chromium: 1322808

Hiển thị vị trí được chỉ định của một phần tử

Các phần tử có khe cắm trong bảng điều khiển Phần tử có huy hiệu slot mới. Khi gỡ lỗi bố cục, hãy sử dụng tính năng này để xác định phần tử ảnh hưởng đến bố cục của nút nhanh hơn.

Ví dụ này chứa các thẻ có một số vị trí có tên. Kiểm tra khe person-occupation của một thẻ, nhấp vào huy hiệu slot bên cạnh thẻ đó để cho thấy khe được chỉ định.

Tìm hiểu cách sử dụng các phần tử <template> và <slot> để tạo một mẫu linh hoạt, sau đó có thể dùng để điền sẵn DOM tối của một thành phần web.

Hiển thị vị trí được chỉ định của một phần tử

Vấn đề về Chromium: 1018906

Mô phỏng tính năng đồng thời phần cứng cho bản ghi Hiệu suất

Chế độ cài đặt Mức độ đồng thời của phần cứng mới trong bảng điều khiển Hiệu suất cho phép nhà phát triển định cấu hình giá trị do navigator.hardwareConcurrency báo cáo.

Một số ứng dụng sử dụng navigator.hardwareConcurrency để kiểm soát mức độ song song của ứng dụng, ví dụ: để kiểm soát kích thước nhóm pthread Emscripten. Với tính năng này, nhà phát triển có thể kiểm thử hiệu suất ứng dụng với số lượng lõi khác nhau.

Mô phỏng tính năng đồng thời phần cứng cho bản ghi Hiệu suất

Vấn đề về Chromium: 1297439

Xem trước giá trị không phải màu khi tự động hoàn thành các biến CSS

Khi tự động hoàn thành các biến CSS, DevTools hiện sẽ điền giá trị có ý nghĩa vào biến không phải màu để bạn có thể xem trước loại thay đổi mà giá trị sẽ có trên nút.

Xem trước giá trị không phải màu khi tự động hoàn thành các biến CSS

Vấn đề về Chromium: 1285091

Xác định các khung chặn trong ngăn Bộ nhớ đệm cho thao tác tiến/lùi

Ngăn Bộ nhớ đệm lui/tiến trong ngăn Ứng dụng có phần khung mới giúp bạn xác định các khung chặn có thể ngăn trang đủ điều kiện sử dụng bfcache.

Xác định các khung chặn trong ngăn Bộ nhớ đệm cho thao tác tiến/lùi

Vấn đề về Chromium: 1288158

Cải thiện các đề xuất tự động hoàn thành cho đối tượng JavaScript

Tính năng tự động hoàn thành cho các thuộc tính đối tượng JavaScript hiện hiển thị dựa trên thứ tự sau:

  1. Các thuộc tính có thể liệt kê của riêng
  2. Các thuộc tính không thể liệt kê của riêng
  3. Các thuộc tính có thể liệt kê được kế thừa
  4. Các thuộc tính không thể liệt kê được kế thừa

Trước đây, các nhà phát triển khó tìm thấy các thuộc tính có liên quan hơn vì đề xuất chỉ ưu tiên các thuộc tính của riêng họ hơn các thuộc tính được kế thừa và tất cả các thuộc tính được kế thừa đều được ưu tiên như nhau.

Cải thiện các đề xuất tự động hoàn thành cho đối tượng JavaScript

Vấn đề về Chromium: 1299241

Cải tiến bản đồ nguồn

Sau đây là một số bản sửa lỗi trên bản đồ nguồn để cải thiện trải nghiệm gỡ lỗi tổng thể:

  • Giờ đây, các điểm ngắt hoạt động trong <script> nội tuyến với chú giải sourceURL.
  • Giờ đây, trình gỡ lỗi sẽ phân giải các biến có phạm vi khối trong khung hiển thị Phạm vi bằng bản đồ nguồn. Giải quyết các biến có phạm vi khối
  • Giờ đây, trình gỡ lỗi sẽ phân giải các biến trong hàm mũi tên trong khung hiển thị Phạm vi bằng bản đồ nguồn. Giải quyết các biến trong hàm mũi tên

Các vấn đề về Chromium: 1329113, 1322115

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:

  • Đã khắc phục chế độ cài đặt Tự động hoàn thành cho bảng Nguồn. Trước đây, tính năng tự động hoàn thành luôn bật ngay cả khi chế độ cài đặt này bị tắt. (1323286)
  • Đã cập nhật thẻ Manifest (Tệp kê khai) trong bảng điều khiển Application (Ứng dụng) để phân tích cú pháp định dạng bảng phối màu mới nhất. (1318305)
  • Cải thiện các đề xuất về vấn đề chặn hiển thị <script async> trong bảng điều khiển Thông tin chi tiết về hiệu suất. Trước đây, Công cụ cho nhà phát triển đề xuất add async attribute to the script tag ngay cả khi tập lệnh đã được đánh dấu là không đồng bộ. (1334096)
  • Giờ đây, bảng Thông tin chi tiết về hiệu suất sẽ phát hiện các iframe là nguyên nhân tiềm ẩn gây ra sự thay đổi bố cục. Bạn có thể xem thông tin chi tiết về iframe trong ngăn Chi tiết. (1328873)
  • Khi bạn mở tệp trong Trình đơn lệnh, các tệp được tạo (tệp do bản đồ nguồn tạo) hiện được xếp hạng cao hơn để xuất hiện phía trên các tập lệnh được triển khai có tên tương tự. (1312929)

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.