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

Sofia Emelianova

Cải thiện tính năng gỡ lỗi của các tệp kiểu bị thiếu

Công cụ cho nhà phát triển có một số điểm cải tiến để giúp bạn xác định và gỡ lỗi các vấn đề về việc thiếu tệp kiểu nhanh hơn:

• Giờ đây, cây Sources (Nguồn) > Page (Trang) chỉ hiển thị các kiểu phông chữ đã triển khai và tải thành công để giảm thiểu sự nhầm lẫn.
• Sources (Nguồn) > Editor (Trình chỉnh sửa) hiện gạch chân và hiển thị chú giải công cụ lỗi cùng dòng bên cạnh các câu lệnh @import, url() và href không thành công.

• Ngoài các đường liên kết đến các yêu cầu không thành công, Bảng điều khiển hiện còn cung cấp các đường liên kết đến dòng chính xác tham chiếu đến một tệp kiểu không tải được.

• Bảng điều khiển Mạng liên tục điền sẵn các đường liên kết đến dòng chính xác tham chiếu đến một tệp định kiểu không tải được vào cột Trình khởi tạo.

• Bảng điều khiển Issues (Vấn đề) liệt kê tất cả vấn đề về việc tải các tệp định kiểu, bao gồm cả URL bị hỏng, yêu cầu không thành công và câu lệnh @import bị đặt sai vị trí.

Vấn đề về Chromium: 1440626, 1442198, 1453611.

Hỗ trợ tính năng định thời gian tuyến tính trong phần Elements (Thành phần) > Styles (Kiểu) > Easing Editor (Trình chỉnh sửa hiệu ứng làm dịu)

Trình chỉnh sửa Easing trong Elements (Thành phần) > Styles (Kiểu) cho phép bạn điều chỉnh các giá trị transition-timing-function và animation-timing-function chỉ bằng một lần nhấp. Trong phiên bản này, Trình chỉnh sửa Easing (Trình chỉnh sửa làm dịu) sẽ được hỗ trợ hàm tính thời gian tuyến tính.

Để định cấu hình thời gian tuyến tính, hãy nhấp vào nút bộ chọn tuyến tính. Để thêm một điểm điều khiển, hãy nhấp vào vị trí bất kỳ trên đường kẻ. Để xoá một điểm điều khiển, hãy nhấp đúp vào điểm đó. Bạn cũng có thể chọn một trong các giá trị đặt sẵn: linear, elastic, bounce hoặc emphasized. Hãy xem video để thấy cách điều chỉnh tuyến tính.

Vấn đề về Chromium: 1421241.

Hỗ trợ bộ chứa bộ nhớ và chế độ xem siêu dữ liệu

Phần Application (Ứng dụng) > Storage (Bộ nhớ) sẽ được hỗ trợ bộ chứa bộ nhớ. Các bộ chứa bộ nhớ độc lập với nhau, vì vậy, bạn có thể chỉ định mức độ ưu tiên loại bỏ cho các lát cắt dữ liệu và đảm bảo dữ liệu có giá trị nhất không bị xoá. Mỗi bộ chứa bộ nhớ có thể lưu trữ dữ liệu liên kết với các API bộ nhớ đã thiết lập, chẳng hạn như IndexedDB và CacheStorage.

Hãy xem fiddle này để kiểm thử tính năng này. Mở DevTools, chuyển đến Application (Ứng dụng) > Storage (Bộ nhớ) > Indexed DB (Cơ sở dữ liệu được lập chỉ mục) rồi chạy mã. Giờ đây, DevTools sẽ hiển thị cho bạn các bộ chứa và nội dung của các bộ chứa đó. Chọn một bộ chứa để xem siêu dữ liệu của bộ chứa đó.

Chế độ xem siêu dữ liệu hợp nhất hiện cũng có sẵn cho các phần bộ nhớ cục bộ, bộ nhớ phiên và bộ nhớ đệm.

Vấn đề về Chromium: 1448011, 1406017.

Lighthouse 10.3.0

Bảng điều khiển Lighthouse hiện chạy Lighthouse 10.3.0. Đáng chú ý nhất là phiên bản này thêm 4 quy trình kiểm tra mới để nắm bắt nhiều vấn đề về khả năng hỗ trợ tiếp cận liên quan đến tiêu đề bảng và phụ đề, tên nút nhập và không khớp ngôn ngữ. Ví dụ:

Xem thêm danh sách đầy đủ các thay đổi. Để tìm hiểu kiến thức 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.

Vấn đề về Chromium: 772558.

Hỗ trợ tiếp cận: Lệnh trên bàn phím và tính năng đọc màn hình được cải thiện

DevTools hiện hỗ trợ nhiều phím tắt hơn và khắc phục các vấn đề với trình đọc màn hình:

• Giờ đây, bạn có thể mở trình đơn theo bối cảnh bằng phím tắt, ví dụ: Shift+F10 trên Windows và nhiều bản phân phối Linux. Đối với lối tắt trên MacOS, hãy xem phần Thao tác thay thế bằng con trỏ.
• Ứng dụng trình đọc màn hình:
  • Không thông báo hai lần nhãn hộp đánh dấu một cách không cần thiết.
  • Sẽ thông báo tên tiêu đề cột cho các cột có thể sắp xếp khi bạn nhấn phím tắt "Đọc tiêu đề cột".

Nhóm DevTools bày tỏ lòng biết ơn đến Yanling Wang và Elorm Coch vì đã mang đến những điểm cải tiến này.

Vấn đề về Chromium: 1446482, 1414952.

Thông tin nổi bật khác

Sau đây là một số điểm sửa lỗi và cải tiến đáng chú ý trong bản phát hành này:

• Bảng điều khiển Mạng tiếp tục ghi lại hoạt động mạng ngay cả sau khi bạn tương tác với tiến trình (1422552).
• Bảng điều khiển Mức độ phù hợp hiện nhận biết được liệu có hoạt động kích hoạt kết xuất trước hay thao tác điều hướng bộ nhớ đệm lui/tiến hay không và nhắc bạn tải lại (1393057).
• Giờ đây, bạn có thể điều hướng ngăn Sources (Nguồn) > Breakpoints (Điểm ngắt) bằng bàn phím: Mũi tên lên và Mũi tên xuống để di chuyển và Phím cách để chọn (1446150).
• Khắc phục lỗi tải lên và lọc tệp HAR trong bảng điều khiển Mạng (1450622).
• Biểu đồ hình ngọn lửa trong bảng điều khiển Hiệu suất hiện đặt các khoảng trống nhỏ giữa các dấu vết để hiển thị chúng tốt hơn (1452150).
• Khắc phục lỗi ánh xạ tự động cho các tệp được nhúng trong bản đồ nguồn (1446383).

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 sử dụng 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 vấn đề trên trang web của mình trước khi người dùng phát hiện ra!

Liên hệ với nhóm Công cụ của Chrome cho nhà phát triển

Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng, bản cập nhật mới 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.
• Gửi tweet đến @ChromeDevTools.
• Để lại bình luận trên video YouTube về tính năng mới trong DevTools hoặc video YouTube về mẹo sử dụng DevTools.

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

Danh sách tất cả nội dung đã được đề cập trong loạt bài Tính năng mới trong DevTools.