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

Sofia Emelianova
Sofia Emelianova

Nhật ký trò chuyện liên tục với AI

Bảng điều khiển Trợ giúp AI hiện lưu giữ nhật ký trò chuyện của bạn trên các phiên. Nhờ đó, bạn có thể xem các cuộc trò chuyện trước đây với Gemini ngay cả sau khi tải lại DevTools hoặc Chrome.

Các điểm cải tiến về bảng điều khiển hiệu suất

Phiên bản này mang đến một số điểm cải tiến cho bảng điều khiển Hiệu suất.

Thông tin chuyên sâu về việc phân phối hình ảnh

Giờ đây, thẻ Hiệu suất > Thông tin chi tiết có thể làm nổi bật những hình ảnh có kích thước tệp mà bạn có thể tối ưu hoá. Nhấp vào một hình ảnh trong thông tin chi tiết để xem hình ảnh đó được làm nổi bật trong kênh Mạng.

Bảng điều khiển Hiệu suất, trong đó thông tin chi tiết về việc phân phối hình ảnh được làm nổi bật.

Để tìm hiểu thêm về cách tối ưu hoá việc phân phối hình ảnh, hãy xem bài viết Mã hoá hình ảnh hiệu quả.

Điều hướng bằng bàn phím cổ điển và hiện đại

Bảng điều khiển Hiệu suất hiện cho phép bạn chọn kiểu điều hướng bằng bàn phím mà bạn muốn, với những điểm khác biệt chính sau:

  • Cổ điển: Phóng to bằng con lăn chuột (bàn di chuột lên hoặc xuống) và cuộn theo chiều dọc bằng tổ hợp phím Shift + con lăn chuột.
  • Hiện đại: Cuộn theo chiều dọc bằng con lăn chuột, cuộn theo chiều ngang bằng tổ hợp phím Shift + con lăn chuột và phóng to bằng tổ hợp phím Command/Control + con lăn chuột.

Để chọn kiểu bạn muốn, ở góc trên cùng bên phải của bảng điều khiển, hãy nhấp vào Hiện lối tắt rồi chọn Cổ điển hoặc Hiện đại. Hộp thoại lối tắt cũng cung cấp cho bạn một bảng tổng quan về các lối tắt có sẵn.

Hộp thoại phím tắt với các phím tắt có sẵn cho bảng điều khiển Hiệu suất.

Bỏ qua các tập lệnh không liên quan trong biểu đồ hình ngọn lửa

Để tập trung tốt hơn vào mã của mình, giờ đây, bạn có thể thêm các tập lệnh không liên quan vào danh sách bỏ qua ngay trong bảng điều khiển Hiệu suất. Bảng điều khiển sẽ tự động thu gọn các lớp lồng nhau quá mức.

Để thêm tập lệnh vào danh sách bỏ qua, hãy nhấp vào biểu tượng Hiện hộp thoại cài đặt danh sách bỏ qua trong thanh thao tác trên cùng rồi nhập một biểu thức chính quy vào trường nhập. Biểu đồ hình ngọn lửa sẽ áp dụng quy tắc mới khi bạn nhập.

DevTools sẽ lưu các quy tắc danh sách bỏ qua mà bạn thêm trong phần Cài đặt > Danh sách bỏ qua. Bạn có thể bật và tắt các quy tắc này trong hộp thoại bất cứ lúc nào.

Đánh dấu dòng thời gian và làm nổi bật phạm vi khi di chuột

Để giúp bạn hiểu rõ hơn về dấu vết hiệu suất, bảng điều khiển Hiệu suất hiện thực hiện những việc sau:

  • Cho bạn thấy một điểm đánh dấu dọc trải dài trên toàn bộ dấu vết hiệu suất khi bạn di chuột qua Dòng thời gian.
  • Đánh dấu một dải trong Dòng thời gian khi bạn di chuột qua các mục trong kênh Chính.

Chế độ cài đặt giới hạn tốc độ đề xuất

Bảng điều khiển Hiệu suất hiện đề xuất chế độ cài đặt điều tiết cả trong các chỉ số trực tiếp và trong trình đơn thả xuống Cài đặt quay video có liên quan.

Trước và sau khi thêm đề xuất về việc điều tiết vào trình đơn cài đặt.

Hiện tại, chế độ điều tiết CPU được đề xuất là 4x slowdown được sử dụng thường xuyên nhất và đề xuất về mạng dựa trên dữ liệu Báo cáo trải nghiệm người dùng trên Chrome, nếu báo cáo này được bật trong chỉ số trực tiếp.

Ngoài ra, bảng điều khiển Hiệu suất hiện nhắc bạn về chế độ cài đặt điều tiết mà bạn đã sử dụng bên cạnh mỗi dấu vết trong trình đơn thả xuống Các phiên gần đây trên thanh thao tác.

Điểm đánh dấu thời gian trong lớp phủ

Các điểm đánh dấu thời gian đã di chuyển từ kênh Timings (Thời gian) xuống cuối dấu vết và hiện được phủ lên trên tất cả các kênh, đồng thời hiển thị ngay cả khi kênh Timings bị ẩn.

Trước và sau khi di chuyển điểm đánh dấu xuống cuối dấu vết.

Kênh Timings (Thời gian) giữ lại các lệnh gọi mark()measure() tuỳ chỉnh.

Dấu vết ngăn xếp của các lệnh gọi JavaScript trong phần Tóm tắt

Thẻ Hiệu suất > Tóm tắt hiện cho bạn thấy dấu vết ngăn xếp của các lệnh gọi JavaScript, bao gồm cả các lệnh gọi không đồng bộ.

Trước và sau khi thêm dấu vết ngăn xếp vào thẻ Tóm tắt.

Chế độ cài đặt huy hiệu đã được chuyển sang trình đơn trong phần Elements (Thành phần)

Chế độ cài đặt huy hiệu trong bảng điều khiển Elements (Thành phần) đã chuyển từ thanh thao tác ẩn theo mặc định sang trình đơn tương ứng khi nhấp chuột phải.

Trước và sau khi chuyển phần cài đặt huy hiệu vào trình đơn.

Bảng điều khiển "Tính năng mới" mới

Bảng điều khiển Tính năng mới có giao diện mới, phù hợp hơn với thiết kế của Chrome.

Giao diện cũ và mới của bảng "Có gì mới".

Vấn đề về Chromium: 325441858.

Lighthouse 12.3.0

Bảng điều khiển Lighthouse hiện chạy Lighthouse 12.3.0.

Ngoài ra, bản cập nhật này còn bổ sung các quy trình kiểm tra mới để kiểm tra việc tách biệt nguồn gốc đúng cách bằng COOP và chính sách HSTS mạnh. Xem 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: 40543651.

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:

  • Nguồn: Khi bị tạm dừng, Trình gỡ lỗi hiện không chuyển sang ngữ cảnh worker dịch vụ một cách đột ngột nếu ngữ cảnh đó được tạo sau khi tạm dừng (373893057).
  • Hiệu suất:
    • Khi di chuột qua tập lệnh, chú giải công cụ trong biểu đồ hình ngọn lửa hiện cho thấy URL (nếu có) (368541957).
    • Tóm tắt: Biểu đồ hình tròn được thay thế bằng biểu đồ thanh.
    • Hộp đánh dấu Dữ liệu tiện ích trong phần Cài đặt quay video được đổi tên thành Hiện kênh tuỳ chỉnh.
    • Thẻ Thông tin chi tiết hiện có phần Thông tin chi tiết đã vượt qua (N), được thu gọn theo mặc định.
  • Application (Ứng dụng) > Storage (Bộ nhớ): Bạn có thể tạo các mục nhập bộ nhớ có khoá trống vì các mục này hợp lệ về mặt kỹ thuật (373703285).
  • Chế độ thiết bị hiện bị tắt đối với các trang chrome:// (40186276).
  • Mạng:
    • Khi chế độ cài đặt tương ứng đã bật, bạn chỉ cần nhấp một lần vào Xuất HAR để mở một trình đơn có hai lựa chọn (đã dọn dẹp và có dữ liệu nhạy cảm). Trước đây, trình đơn mở ra bằng một thao tác nhấp và giữ (378076279).
    • Tính năng Sao chép dưới dạng cURL hiện sử dụng thuộc tính -b để bỏ qua cookie và dễ đọc hơn, thay vì -H 'cookie:...' (40791742).
  • Hỗ trợ tiếp cận: Giờ đây, bạn có thể di chuyển các thẻ bên trong bảng điều khiển sang trái hoặc phải bằng trình đơn theo bối cảnh (383164782).
  • Chặn yêu cầu kết nối mạng: Chế độ cài đặt trình đơn lệnh này hiện đã đồng bộ hoá với hộp đánh dấu tương ứng (378058733).

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.

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 viết Tính năng mới trong DevTools.