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

Jecelyn Yeen

Khởi động Công cụ cho nhà phát triển nhanh hơn

Thời gian khởi động Công cụ cho nhà phát triển hiện nhanh hơn khoảng 37% về thời gian biên dịch JavaScript (từ 6,9 giây xuống còn 5 giây)! 🎉

Nhóm đã thực hiện một số hoạt động tối ưu hoá để giảm chi phí hiệu suất của quá trình chuyển đổi tuần tự, phân tích cú pháp và chuyển đổi ngược trong quá trình khởi động.

Chúng tôi sẽ sớm đăng một bài viết trên blog kỹ thuật để giải thích chi tiết về cách triển khai. Hãy tiếp tục theo dõi!

Vấn đề về Chromium: 1029427

Công cụ trực quan hoá góc CSS mới

Công cụ cho nhà phát triển hiện hỗ trợ tốt hơn cho việc gỡ lỗi góc CSS!

Khi một phần tử HTML trên trang của bạn có góc CSS được áp dụng (ví dụ: background: linear-gradient(angle, color-stop1, color-stop2), transform: rotate(angle)), biểu tượng đồng hồ sẽ xuất hiện bên cạnh góc trong ngăn Kiểu. Nhấp vào biểu tượng đồng hồ để bật/tắt lớp phủ đồng hồ. Nhấp vào một vị trí bất kỳ trên đồng hồ hoặc kéo kim đồng hồ để thay đổi góc!

Bạn cũng có thể dùng chuột và phím tắt để thay đổi giá trị góc. Hãy xem tài liệu của chúng tôi để tìm hiểu thêm!

Vấn đề về Chromium: 1126178, 1138633

Mô phỏng các loại hình ảnh không được hỗ trợ

Công cụ cho nhà phát triển đã thêm 2 chế độ mô phỏng mới vào thẻ Kết xuất, cho phép bạn tắt các định dạng hình ảnh AVIF và WebP. Các hoạt động mô phỏng mới này giúp nhà phát triển dễ dàng kiểm thử nhiều trường hợp tải hình ảnh mà không cần phải chuyển đổi trình duyệt.

Giả sử chúng ta có mã HTML sau đây để phân phát hình ảnh ở định dạng AVIF và WebP cho các trình duyệt mới hơn, với hình ảnh PNG dự phòng cho các trình duyệt cũ hơn.

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.png" alt="A test image">
</picture>

Mở thẻ Rendering (Kết xuất), chọn "Disable AVIF image format" (Tắt định dạng hình ảnh AVIF) rồi làm mới trang. Di chuột lên img src. Src hình ảnh hiện tại (currentSrc) hiện là hình ảnh WebP dự phòng.

Vấn đề về Chromium: 1130556

Mô phỏng kích thước hạn mức bộ nhớ trong ngăn Bộ nhớ

Giờ đây, bạn có thể ghi đè kích thước hạn mức bộ nhớ trong ngăn Bộ nhớ. Tính năng này cho phép bạn mô phỏng nhiều thiết bị và kiểm thử hành vi của ứng dụng trong trường hợp có ít dung lượng ổ đĩa.

Chuyển đến Application (Ứng dụng) > Storage (Bộ nhớ), đánh dấu vào hộp Simulate custom storage quota (Mô phỏng hạn mức lưu trữ tuỳ chỉnh) rồi nhập một số hợp lệ bất kỳ để mô phỏng hạn mức lưu trữ.

Các vấn đề về Chromium: 945786, 1146985

Làn đường Các chỉ số quan trọng mới về trang web trong bản ghi của bảng điều khiển Hiệu suất

Giờ đây, bản ghi hiệu suất có lựa chọn hiển thị thông tin về Các chỉ số quan trọng về trang web.

Sau khi ghi lại hiệu suất tải, hãy bật hộp đánh dấu Các chỉ số quan trọng về trang web trong bảng điều khiển Hiệu suất để xem làn đường Các chỉ số quan trọng về trang web mới.

Làn đường này hiện hiển thị thông tin về Chỉ số quan trọng của trang web, chẳng hạn như Thời gian hiển thị nội dung đầu tiên (FCP), Thời gian hiển thị nội dung lớn nhất (LCP) và Mức thay đổi bố cục (LS).

Hãy truy cập web.dev/vitals để tìm hiểu thêm về cách tối ưu hoá trải nghiệm người dùng bằng các chỉ số quan trọng về trang web.

Vấn đề về Chromium: Không áp dụng

Báo cáo lỗi CORS trong bảng điều khiển Mạng

Giờ đây, Công cụ cho nhà phát triển sẽ cho thấy lỗi CORS khi một yêu cầu mạng không thành công do cơ chế Chia sẻ tài nguyên chéo nguồn gốc (CORS).

Trong bảng điều khiển Mạng, hãy quan sát yêu cầu mạng CORS không thành công. Cột trạng thái cho biết "Lỗi CORS". Di chuột lên lỗi, chú giải công cụ hiện sẽ cho biết mã lỗi. Trước đây, Công cụ cho nhà phát triển chỉ hiển thị trạng thái chung là "(failed)" (không thành công) cho các lỗi CORS.

Điều này đặt nền tảng cho những điểm cải tiến tiếp theo của chúng tôi về việc cung cấp nội dung mô tả chi tiết hơn về các vấn đề CORS!

Vấn đề về Chromium: 1141824

Cập nhật chế độ xem thông tin chi tiết về khung hình

Thông tin về tính năng tách biệt nhiều nguồn gốc trong chế độ xem Chi tiết khung

Trạng thái tách biệt nhiều nguồn gốc hiện được hiển thị trong phần Bảo mật và sự tách biệt.

Mục Tính sẵn có của API mới cho biết tính sẵn có của SharedArrayBuffer (SAB) và liệu chúng có thể được chia sẻ bằng postMessage() hay không.

Cảnh báo ngừng sử dụng sẽ xuất hiện nếu SAB và postMessage() hiện có sẵn, nhưng bối cảnh không bị tách riêng trên nhiều nguồn gốc. Tìm hiểu thêm về tính năng tách biệt nhiều nguồn gốc và lý do tính năng này sẽ là điều kiện bắt buộc đối với các tính năng như SharedArrayBuffers trong bài viết này.

Vấn đề về Chromium: 1139899

Thông tin mới về Web Worker trong chế độ xem Chi tiết khung

Giờ đây, Công cụ cho nhà phát triển sẽ hiển thị các trình chạy web chuyên dụng trong khung tạo ra chúng.

Trong bảng điều khiển Application (Ứng dụng), hãy mở rộng một khung có trình thực thi web, sau đó chọn một trình thực thi trong cây Workers (Trình thực thi) để xem thông tin chi tiết về trình thực thi web.

Vấn đề về Chromium: 1122507, 1051466

Hiển thị thông tin chi tiết về khung mở cho các cửa sổ đã mở

Giờ đây, bạn có thể xem thông tin chi tiết về khung nào đã khiến một Cửa sổ khác mở ra.

Chọn một cửa sổ đang mở trong cây Frames (Khung) để xem thông tin chi tiết về cửa sổ đó. Nhấp vào đường liên kết Opener Frame (Khung mở) để hiển thị trình mở trong bảng điều khiển Phần tử.

Vấn đề về Chromium: 1107766

Mở bảng điều khiển Mạng từ ngăn Service Worker

Xem tất cả thông tin định tuyến yêu cầu của worker dịch vụ (SW) bằng đường liên kết Yêu cầu mạng mới. Điều này giúp nhà phát triển có thêm bối cảnh khi gỡ lỗi SW.

Chuyển đến Application (Ứng dụng) > Service Workers (Worker dịch vụ), nhấp vào Network requests (Yêu cầu mạng) của một SW. Bảng điều khiển Mạng sẽ mở ra ở bảng điều khiển dưới cùng, hiển thị tất cả các yêu cầu liên quan đến worker dịch vụ (các yêu cầu mạng được lọc theo "is:service-worker-intercepted").

Vấn đề về Chromium: Không áp dụng

Các lựa chọn sao chép mới trong bảng điều khiển Mạng

Sao chép giá trị thuộc tính

Lựa chọn "Sao chép giá trị" mới trong trình đơn theo bối cảnh cho phép bạn sao chép giá trị thuộc tính của một yêu cầu mạng.

Trong bảng điều khiển Mạng, hãy nhấp vào một yêu cầu mạng để mở ngăn Tiêu đề. Nhấp chuột phải vào một trong các thuộc tính trong phần sau: Tải trọng yêu cầu (JSON) Tham số chuỗi truy vấn dữ liệu biểu mẫu Tiêu đề yêu cầu Tiêu đề phản hồi

Sau đó, bạn có thể chọn Sao chép giá trị để sao chép giá trị của thuộc tính vào bảng nhớ tạm.

Vấn đề về Chromium: 1132084

Sao chép stacktrace cho đối tượng khởi tạo mạng

Nhấp chuột phải vào một yêu cầu mạng, sau đó chọn Sao chép dấu vết ngăn xếp để sao chép dấu vết ngăn xếp vào bảng nhớ tạm.

Vấn đề về Chromium: 1139615

Bản cập nhật về gỡ lỗi Wasm

Xem trước giá trị biến Wasm khi di chuột

Khi di chuột lên một biến trong quá trình tháo rời WebAssembly (Wasm) trong khi tạm dừng trên một điểm ngắt, DevTools hiện sẽ cho thấy giá trị hiện tại của biến.

Trong bảng điều khiển Nguồn, hãy mở một tệp Wasm, đặt một điểm ngắt rồi làm mới trang. Di chuột đến một biến để xem giá trị.

Các vấn đề về Chromium: 1058836, 1071432

Đánh giá biến Wasm trong Bảng điều khiển

Giờ đây, bạn có thể đánh giá biến Wasm trong Bảng điều khiển khi tạm dừng tại một điểm ngắt.

Trong ví dụ này, chúng ta đặt một điểm ngắt trên dòng local.get $input. Khi gỡ lỗi, việc nhập $input vào Bảng điều khiển sẽ trả về giá trị hiện tại của biến, trong trường hợp này là 4.

Vấn đề về Chromium: 1127914

Đơn vị đo lường nhất quán cho kích thước tệp/bộ nhớ

Giờ đây, DevTools luôn sử dụng kB để hiển thị kích thước tệp/bộ nhớ. Trước đây, DevTools kết hợp kB (1000 byte) và KiB (1024 byte). Ví dụ: trước đây, bảng điều khiển Mạng sử dụng nhãn "kB" nhưng thực tế lại thực hiện các phép tính bằng KiB, gây ra sự nhầm lẫn không cần thiết.

Vấn đề về Chromium: 1035309

Đánh dấu các phần tử giả trong bảng điều khiển Phần tử

DevTools đã tăng độ tương phản màu của các phần tử giả để giúp bạn phát hiện các phần tử này dễ dàng hơn.

Vấn đề về Chromium: 1143833

Các tính năng thử nghiệm

Công cụ gỡ lỗi CSS Flexbox

Các công cụ gỡ lỗi hộp linh hoạt sắp ra mắt!

Trước tiên, Công cụ cho nhà phát triển hiện hiển thị huy hiệu flex trong bảng điều khiển Phần tử cho các phần tử có display: flex được áp dụng.

Bên cạnh đó, các biểu tượng căn chỉnh mới được thêm vào các thuộc tính flexbox sau:

• flex-direction
• align-items
• align-content
• align-self
• justify-items
• justify-content

Ngoài ra, những biểu tượng này còn nhận biết theo ngữ cảnh. Hướng của biểu tượng sẽ được điều chỉnh theo:

• flex-direction
• direction
• writing-mode

Các biểu tượng này nhằm giúp bạn hình dung rõ hơn về bố cục flexbox của trang.

Đây là tài liệu thiết kế về các tính năng của công cụ Flexbox. Chúng tôi sẽ sớm bổ sung thêm các tính năng khác.

Hãy dùng thử và cho chúng tôi biết cảm nhận của bạn!

Các vấn đề về Chromium: 1144090, 1139945

Tuỳ chỉnh phím tắt tổ hợp

DevTools đã thêm tính năng hỗ trợ thử nghiệm cho tuỳ chỉnh phím tắt kể từ bản phát hành gần đây nhất.

Giờ đây, bạn có thể tạo tổ hợp phím (còn gọi là lối tắt nhiều phím) trong trình chỉnh sửa lối tắt.

Chuyển đến phần Cài đặt > Lối tắt, di chuột lên một lệnh rồi nhấp vào nút Chỉnh sửa (biểu tượng bút) để tuỳ chỉnh lối tắt tổ hợp phím.

Vấn đề về Chromium: 174309

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.

• 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.
• Đăng bài trên X cho @ChromeDevTools.
• Để lại bình luận trên video "Có gì mới trong Công cụ cho nhà phát triển" trên YouTube hoặc video "Mẹo về Công cụ cho nhà phát triển" 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 bài Tính năng mới trong Công cụ cho nhà phát triển.