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

Jecelyn Yeen

Chỉnh sửa kiểu cho các khung CSS-in-JS

Giờ đây, ngăn Kiểu có khả năng hỗ trợ tốt hơn cho việc chỉnh sửa các kiểu được tạo bằng API CSS Object Model (CSSOM). Nhiều khung và thư viện CSS-in-JS sử dụng các API CSSOM ở bên dưới để tạo kiểu.

Giờ đây, bạn cũng có thể chỉnh sửa các kiểu được thêm vào JavaScript bằng Constructable Stylesheets. Constructable Stylesheets là một cách mới để tạo và phân phối các kiểu có thể dùng lại khi sử dụng Shadow DOM.

Ví dụ: trước đây, bạn không thể chỉnh sửa các kiểu h1 được thêm bằng CSSStyleSheet (API CSSOM). Giờ đây, bạn có thể chỉnh sửa trong ngăn Kiểu:

Vấn đề về Chromium #946975

Lighthouse 6 trong bảng điều khiển Lighthouse

Bảng điều khiển Lighthouse hiện đang chạy Lighthouse 6. Hãy xem bài viết Tính năng mới trong Lighthouse 6.0 để biết thông tin tóm tắt về tất cả các thay đổi chính hoặc ghi chú phát hành phiên bản 6.0.0 để biết danh sách đầy đủ về tất cả các thay đổi.

Lighthouse 6.0 giới thiệu 3 chỉ số mới cho báo cáo: Nội dung lớn nhất hiển thị (LCP), Mức thay đổi bố cục tích luỹ (CLS) và Tổng thời gian chặn (TBT). LCP và CLS là 2 trong số Chỉ số quan trọng chính của trang web mới của Google, còn TBT là chỉ số đo lường trong phòng thí nghiệm cho một Chỉ số quan trọng chính khác của trang web, đó là Độ trễ đầu vào đầu tiên.

Công thức tính điểm hiệu suất cũng được điều chỉnh trọng số để phản ánh chính xác hơn trải nghiệm tải của người dùng.

Các chỉ số mới về hiệu suất trong Lighthouse 6.0

Vấn đề #772558 của Chromium

Ngừng sử dụng chỉ số Hiển thị nội dung đầu tiên (FMP)

Chỉ số Hiển thị nội dung có ý nghĩa đầu tiên (FMP) không được dùng nữa trong Lighthouse 6.0. Chỉ số này cũng đã bị xoá khỏi bảng điều khiển Hiệu suất. Thời gian hiển thị nội dung lớn nhất là chỉ số thay thế được đề xuất cho FMP. Hãy xem phần Hiển thị nội dung đầu tiên để biết lý do chỉ số này không còn được dùng nữa.

Vấn đề #1096008 của Chromium

Hỗ trợ các tính năng mới của JavaScript

Giờ đây, Công cụ cho nhà phát triển hỗ trợ tốt hơn một số tính năng ngôn ngữ mới nhất của JavaScript:

  • Tính năng tự động hoàn thành cú pháp nối chuỗi tuỳ chọn – tính năng tự động hoàn thành thuộc tính trong Bảng điều khiển hiện hỗ trợ cú pháp nối chuỗi tuỳ chọn, ví dụ: name?. hiện hoạt động ngoài name. và name[.
  • Làm nổi bật cú pháp cho các trường riêng tư – các trường lớp riêng tư hiện được làm nổi bật cú pháp và in đẹp đúng cách trong bảng điều khiển Nguồn.
  • Làm nổi bật cú pháp cho Toán tử hợp nhất giá trị rỗng – Giờ đây, Công cụ cho nhà phát triển sẽ in toán tử hợp nhất giá trị rỗng một cách phù hợp trong bảng điều khiển Nguồn.

Các vấn đề về Chromium #1083214, #1073903, #1083797

Cảnh báo mới về lối tắt ứng dụng trong ngăn Tệp kê khai

Lối tắt của ứng dụng giúp người dùng nhanh chóng bắt đầu các thao tác phổ biến hoặc thao tác được đề xuất trong một ứng dụng web.

Ngăn Manifest (Tệp kê khai) hiện hiển thị cảnh báo nếu:

  • các biểu tượng lối tắt của ứng dụng có kích thước nhỏ hơn 96x96 pixel
  • biểu tượng lối tắt ứng dụng và biểu tượng tệp kê khai không phải là hình vuông (vì chúng sẽ bị bỏ qua)

Cảnh báo về lối tắt ứng dụng

Vấn đề #955497 của Chromium

Sự kiện respondWith của worker dịch vụ trong thẻ Thời gian

Thẻ Thời gian của bảng điều khiển Mạng hiện bao gồm các sự kiện respondWith của worker dịch vụ. respondWith là khoảng thời gian ngay trước khi trình xử lý sự kiện fetch của worker dịch vụ chạy cho đến thời điểm lời hứa respondWith của trình xử lý fetch được giải quyết.

`respondWith` của trình chạy dịch vụ

Vấn đề #1066579 của Chromium

Hiển thị nhất quán ngăn Đã tính toán

Ngăn Đã tính toán trong bảng điều khiển Phần tử hiện hiển thị nhất quán dưới dạng một ngăn trên tất cả các kích thước khung hiển thị. Trước đây, ngăn Đã tính toán sẽ hợp nhất vào bên trong ngăn Kiểu khi chiều rộng của khung hiển thị Công cụ cho nhà phát triển bị thu hẹp.

Vấn đề #1073899 của Chromium

Độ lệch mã byte cho các tệp WebAssembly

Giờ đây, Công cụ cho nhà phát triển sử dụng các độ lệch mã byte để hiển thị số dòng của quá trình tháo gỡ Wasm. Điều này giúp bạn thấy rõ hơn rằng bạn đang xem dữ liệu nhị phân và nhất quán hơn với cách tham chiếu các vị trí của thời gian chạy Wasm.

Độ lệch mã byte

Vấn đề #1071432 của Chromium

Sao chép và cắt theo dòng trong bảng điều khiển Nguồn

Khi thực hiện thao tác sao chép hoặc cắt mà không chọn nội dung nào trong trình chỉnh sửa bảng điều khiển Nguồn, Công cụ dành cho nhà phát triển sẽ sao chép hoặc cắt nội dung của dòng hiện tại. Ví dụ: trong video bên dưới, con trỏ nằm ở cuối dòng 1. Sau khi bạn nhấn phím tắt cắt, toàn bộ dòng sẽ được sao chép vào bảng nhớ tạm và bị xoá.

Vấn đề #800028 của Chromium

Thông tin cập nhật về chế độ cài đặt trên bảng điều khiển

Huỷ nhóm các thông báo giống nhau trên bảng điều khiển

Giờ đây, chế độ cài đặt Nhóm các thông báo tương tự trong phần Cài đặt bảng điều khiển sẽ áp dụng cho các thông báo trùng lặp. Trước đây, tính năng này chỉ áp dụng cho các thư tương tự.

Ví dụ: trước đây, DevTools không tách các thông báo hello thành từng nhóm riêng lẻ ngay cả khi bạn bỏ chọn Nhóm các thông báo tương tự. Giờ đây, các thư hello sẽ không được nhóm lại:

Vấn đề #1082963 của Chromium

Lưu chế độ cài đặt Chỉ ngữ cảnh đã chọn

Giờ đây, chế độ cài đặt Chỉ ngữ cảnh đã chọn trong phần Cài đặt bảng điều khiển sẽ được duy trì. Trước đây, các chế độ cài đặt sẽ được đặt lại mỗi khi bạn đóng rồi mở lại Công cụ cho nhà phát triển. Thay đổi này giúp hành vi của chế độ cài đặt nhất quán với các lựa chọn khác trong phần Cài đặt bảng điều khiển.

Chỉ ngữ cảnh đã chọn

Vấn đề #1055875 của Chromium

Thông tin cập nhật về bảng điều khiển hiệu suất

Thông tin về bộ nhớ đệm biên dịch JavaScript trong bảng điều khiển Hiệu suất

Thông tin về bộ nhớ đệm biên dịch JavaScript hiện luôn xuất hiện trong thẻ Summary (Tóm tắt) của bảng điều khiển Performance (Hiệu suất). Trước đây, Công cụ cho nhà phát triển sẽ không hiển thị bất kỳ thông tin nào liên quan đến việc lưu mã vào bộ nhớ đệm nếu việc này không xảy ra.

Thông tin về bộ nhớ đệm biên dịch JavaScript

Vấn đề #912581 của Chromium

Trước đây, bảng điều khiển Hiệu suất hiển thị thời gian trong các thước đo dựa trên thời điểm bắt đầu ghi. Giờ đây, điều này đã thay đổi đối với các bản ghi mà người dùng điều hướng, trong đó DevTools hiện hiển thị thời gian của thước đo tương ứng với hoạt động điều hướng.

Căn chỉnh thời gian điều hướng trong bảng điều khiển Hiệu suất

Chúng tôi cũng đã cập nhật thời gian cho các sự kiện DOMContentLoaded, Hiển thị đầu tiên, Hiển thị nội dung đầu tiên và Hiển thị nội dung lớn nhất để tương ứng với thời điểm bắt đầu điều hướng. Điều này có nghĩa là các sự kiện này sẽ khớp với thời gian do PerformanceObserver báo cáo.

Vấn đề #974550 của Chromium

Biểu tượng mới cho điểm ngắt, điểm ngắt có điều kiện và điểm ghi nhật ký

Bảng điều khiển Nguồn có thiết kế mới cho điểm ngắt, điểm ngắt có điều kiện và điểm ghi nhật ký. Các điểm ngắt có thiết kế cờ mới với màu sắc tươi sáng và thân thiện hơn. Các biểu tượng được thêm vào để phân biệt điểm ngắt có điều kiện và điểm ghi nhật ký.

Điểm ngắt

Vấn đề #1041830 của Chromium

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.