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

Sofia Emelianova
Sofia Emelianova
GitHub

Cải thiện khả năng gỡ lỗi các biểu định 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ề biểu định kiểu bị thiếu nhanh hơn:

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

Các câu được gạch chân có chú thích trong bảng điều khiển Nguồn.

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

Bảng điều khiển cung cấp đường liên kết đến chính xác những dòng có câu lệnh gây ra vấn đề.

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

  • Bảng điều khiển Issues (Vấn đề) liệt kê tất cả vấn đề khi tải biểu đị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í.

Bảng điều khiển Vấn đề có đường liên kết đến các nguồn và yêu cầu.

Các vấn đề về Chromium: 1440626, 1442198, 1453611.

Hỗ trợ thời gian tuyến tính trong Elements > Styles > Easing Editor (Phần tử > Kiểu > Trình chỉnh sửa chuyển động)

Trình chỉnh sửa đường cong tăng tốc. Trình chỉnh sửa gia tốc trong Phần tử > 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 cú nhấp chuột. Trong phiên bản này, Trình chỉnh sửa gia tốc Trình chỉnh sửa đường cong tăng tốc. sẽ hỗ trợ hàm 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 kiểm soát, 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. Xem video để thấy chế độ điều chỉnh tuyến tính hoạt động.

Vấn đề về Chromium: 1421241.

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

Phần Ứng dụng > Bộ nhớ sẽ hỗ trợ các bộ chứa lưu trữ. Các vùng lưu trữ độ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 phần dữ liệu và đảm bảo dữ liệu có giá trị nhất không bị xoá. Mỗi nhóm lưu trữ có thể lưu trữ dữ liệu liên kết với các API lưu trữ đã 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. Mở Công cụ cho nhà phát triển, 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, Công cụ cho nhà phát triển sẽ cho bạn thấy các nhóm và nội dung của chúng. Chọn một nhóm để xem siêu dữ liệu của nhóm đó.

Xem siêu dữ liệu của một nhóm.

Giờ đây, bạn cũng có thể sử dụng chế độ xem siêu dữ liệu hợp nhất cho các mục bộ nhớ cục bộ, bộ nhớ phiên và bộ nhớ đệm.

Chế độ xem siêu dữ liệu hợp nhất mới.

Các vấn đề về Chromium: 1448011, 1406017.

Lighthouse 10.3.0

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

Đã vượt qua bước kiểm tra tiêu đề bảng.

Bạn cũng có thể xem danh sách đầy đủ các thay đổi. Để 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.

Vấn đề về Chromium: 772558.

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

Giờ đây, DevTools hỗ trợ nhiều phím tắt hơn và khắc phục các vấn đề về trình đọc màn hình:

  • Giờ đây, bạn có thể mở trình đơn theo bối cảnh bằng một phím tắt, ví dụ: Shift+F10 trên Windows và nhiều bản phân phối Linux. Để biết các phím tắt trên MacOS, hãy xem bài viết Thao tác thay thế cho con trỏ.
  • Các ứng dụng trình đọc màn hình:
    • Không thông báo nhãn hộp đánh dấu hai lần 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 Công cụ cho nhà phát triển xin gửi lời cảm ơn đến Yanling Wang và Elorm Coch vì đã thực hiện những điểm cải tiến này.

Các vấn đề về Chromium: 1446482, 1414952.

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

Sau đây là một số điểm cải tiến và bản sửa lỗi đá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 dòng thời gian (1422552).
  • Giờ đây, bảng Mức độ phù hợp sẽ nhận biết được liệu có hoạt động kết xuất trước hay thao tác điều hướng bằng bộ nhớ đệm cho thao tác tiến/lùi hay không và nhắc bạn tải lại (1393057).
  • Giờ đây, bạn có thể di chuyển trong ngăn Sources > Breakpoints (Nguồn > Đ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 vấn đề tải lên và lọc tệp HAR trong bảng điều khiển Mạng (1450622).
  • Giờ đây, biểu đồ ngọn lửa trong bảng điều khiển Hiệu suất sẽ đặ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).
  • Đã sửa 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 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.