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 tính năng gỡ lỗi 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 sự cố bị thiếu biểu định kiểu nhanh hơn:

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

Bảng sao kê được gạch chân kèm theo chú giải công cụ trong bảng điều khiển Nguồn.

  • Bảng điều khiển, ngoài các đường liên kết đến các yêu cầu không thành công, giờ đây 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 biểu định kiểu không tải được.

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

  • Bảng điều khiển Mạng sẽ điền nhất quán vào cột Người khởi tạo bằng các đường liên kết đến đúng 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ả cá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ó các đường liên kết đến các nguồn và yêu cầu.

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

Hỗ trợ thời gian tuyến tính trong phần tử > Kiểu > Trình chỉnh sửa gia 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 lần nhấp.Trình biên tập gia tốc. Trong phiên bản này, Trình biên tập gia tốc. Easing Editor có 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 đ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 điều khiển đó. Bạn cũng có thể chọn một trong các giá trị đặt trước: linear, elastic, bounce hoặc emphasized. Xem video để xem cách điều chỉnh tuyến tính.

Sự cố 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ớ được hỗ trợ về bộ chứa bộ nhớ. Các bộ chứa 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 bộ chứa lưu trữ có thể lưu trữ dữ liệu được 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 câu lệnh này để thử tính năng. Mở Công cụ cho nhà phát triển, chuyển đến Ứng dụng > Bộ nhớ > Cơ sở dữ liệu đã lập chỉ mục và chạy mã. Công cụ cho nhà phát triển hiện hiển thị cho bạn các bộ chứa và nội dung của chúng. Chọn một bộ chứa để xem siêu dữ liệu của 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ộ, phiên và bộ nhớ đệm.

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

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

Lighthouse 10.3.0

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

Kiểm tra tiêu đề bảng đã đạt.

Ngoài ra, hãy xem danh sách đầy đủ các thay đổi. Để 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.

Sự cố Chromium: 772558.

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

Công cụ cho nhà phát triển hiện hỗ trợ thêm nhiều phím tắt 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, chẳng hạn như Shift+F10 trên Windows và nhiều bản phân phối Linux. Đối với phím tắt MacOS, hãy xem phần Thao tác thay thế cho con trỏ.
  • Ứng dụng trình đọc màn hình:
    • Không cần thông báo một cách không cần thiết về nhãn hộp đánh dấu hai lần.
    • 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 bày tỏ sự cảm kích với Yanling Wang và Elorm Coch vì những cải tiến này.

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

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

Dưới đây là một số bản 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 Network (Mạng) sẽ 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 điều khiển Phạm vi lập chỉ mục sẽ nhận biết liệu có hoạt động kích hoạt kết xuất trước hoặc điều hướ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ể chuyển đến ngăn 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 lỗi tải tệp HAR lên và lọc trong bảng điều khiển Network (Mạng) (1450622).
  • Biểu đồ hình ngọn lửa trong bảng điều khiển Hiệu suất hiện sẽ tạo các khoảng trống nhỏ giữa các dấu vết để hiển thị các dấu vết đó hiệu quả 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 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 cung cấp cho bạn quyề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, thử nghiệm API nền tảng web tiên tiến và tìm ra sự cố trên trang web của bạn trước khi người dùng của bạn 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 đây để thảo luận về các tính năng mới và thay đổi trong bài đăng hoặc bất cứ vấn đề nào khác liên quan đến Công cụ cho nhà phát triển.

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

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 video Tính năng mới trong Công cụ cho nhà phát triển.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Kiến thức cơ bản về Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 đã bị huỷ.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59