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

Quá trình khởi động Công cụ cho nhà phát triển hiện nhanh hơn ~37% về quá trình 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ố phương pháp tối ưu hoá để giảm chi phí hiệu suất khi chuyển đổi tuần tự, phân tích cú pháp và giải tuần tự trong quá trình khởi động.

Sắp tới sẽ có một bài đăng trên blog về kỹ thuật giải thích chi tiết về việc 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!

Góc CSS

Khi một phần tử HTML trên trang của bạn được áp dụng góc CSS (ví dụ: background: linear-gradient(angle, color-stop1, color-stop2), transform: rotate(angle)), đồng hồ hiển thị 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 đồng hồ lớp phủ. Nhấp vào vị trí bất kỳ trong đồng hồ hoặc kéo kim để 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 để 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 bổ sung 2 quy trình mô phỏng mới trong thẻ Kết xuất, cho phép bạn vô hiệu hoá hình ảnh AVIF và WebP . Những quy trình mô phỏng mới này giúp nhà phát triển dễ dàng thử nghiệm nhiều chế độ tải hình ảnh mà không phải chuyển đổi trình duyệt.

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

<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ẻ Kết xuất, chọn "Tắt định dạng hình ảnh AVIF" và làm mới trang. Di chuột qua img src. Hình ảnh hiện tại src (currentSrc) hiện là hình ảnh WebP dự phòng.

Mô phỏng các loại hình ảnh

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 các ứng dụng trong các tình huống ổ đĩa còn trống.

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

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

Vấn đề về Chromium: 945786, 1146985

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

Hiện tại, bản ghi hiệu suất có thể hiển thị thông tin về Chỉ số quan trọng của 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 Hiệu suất để xem làn đường mới Các chỉ số quan trọng về trang web.

Làn đường hiện hiển thị thông tin Chỉ số quan trọng của trang web như Nội dung đầu tiên hiển thị (FCP), Nội dung lớn nhất hiển thị (LCP) và Layout Shift (LS).

Hãy truy cập vào web.dev/vitals để tìm hiểu thêm về cách tối ưu hoá trải nghiệm người dùng khi dùng môi trường Web Chỉ số Android vitals.

Lộ trình Chỉ số quan trọng của trang web

Vấn đề về Chromium: Không có

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

Công cụ cho nhà phát triển hiện hiển thị lỗi CORS khi yêu cầu mạng không thành công do Chia sẻ tài nguyên trên nhiều nguồn gốc (CORS).

Trong bảng điều khiển Network (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 sẽ hiển thị thông báo "CORS "lỗi". Hãy di chuột lên lỗi, phần chú thích sẽ hiện mã lỗi. Trước đây, chỉ Công cụ cho nhà phát triển hiển thị trạng thái "(failed)" chung cho lỗi CORS.

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

Lỗi CORS

Vấn đề về Chromium: 1141824

Cập nhật chế độ xem chi tiết khung

Thông tin về cách 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 giờ đây được hiển thị trong phần Bảo mật và Cách ly.

Phần Khả năng sử dụng API mới cho thấy 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 về việc ngừng sử dụng sẽ xuất hiện nếu SAB và postMessage() hiện đã hoạt động, nhưng ngữ 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 về tính năng này cần thiết cho các tính năng như SharedArrayBuffers trong bài viết này.

Thông tin trên nhiều nguồn gốc

Vấn đề về Chromium: 1139899

Thông tin mới về Trình chạy web trong chế độ xem chi tiết Khung

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

Trong bảng điều khiển Application (Ứng dụng), hãy mở rộng một khung bằng nhân viên web, sau đó chọn một worker trong Cây Worker để xem thông tin chi tiết về trình chạy web.

Thông tin của nhân viên web

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

Hiện 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 hình đã mở một Cửa sổ khác.

Chọn một cửa sổ đang mở trong cây Khung để xem thông tin chi tiết về cửa sổ. Nhấp vào Mở Khung để hiển thị trình mở trong bảng điều khiển Phần tử.

Chi tiết về khung mở

Vấn đề về Chromium: 1107766

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

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

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

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

Vấn đề về Chromium: Không có

Tuỳ 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

Tuỳ 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 mạng của bạn.

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

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

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

Vấn đề về Chromium: 1132084

Sao chép dấu vết ngăn xếp cho trình 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.

Sao chép dấu vết ngăn xếp

Vấn đề về Chromium: 1139615

Cập nhật gỡ lỗi Wasm

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

Khi di chuột qua một biến trong quá trình phân tách WebAssembly (Wasm) khi tạm dừng trên một điểm ngắt, Công cụ cho nhà phát triển hiện hiển thị giá trị hiện tại của biến.

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

Xem trước biến Wasm khi di chuột qua

Vấn đề về Chromium: 1058836, 1071432

Đánh giá biến Wasm trong Console

Giờ đây, bạn có thể đánh giá biến Wasm trong Bảng điều khiển khi tạm dừng trên 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, hãy nhập $input trong 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.

Đánh giá biến Wasm trong Console

Vấn đề về Chromium: 1127914

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

Công cụ cho nhà phát triển hiện sử dụng kB một cách nhất quán để hiển thị kích thước tệp/bộ nhớ. KB kết hợp trước đây trong Công cụ cho nhà phát triển (1000 byte) và KiB (1024 byte). Ví dụ: bảng điều khiển Mạng trước đây sử dụng "kB" nhưng thực sự thực hiện các phép tính bằng KiB, điều này gây ra 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ử

Công cụ cho nhà phát triển đã 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ử đó dễ dàng hơn.

Làm nổi bật phần tử giả

Vấn đề về Chromium: 1143833

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

Công cụ gỡ lỗi hộp linh hoạt CSS

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

Đối với người mới bắt đầu, 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ó Đã áp dụng display: flex.

Ngoài ra, các biểu tượng căn chỉnh mới sẽ được thêm vào trong các thuộc tính hộp linh hoạt 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 được theo bối 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 bố cục hộp linh hoạt của trang.

Gỡ lỗi CSS Flex

Đâ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 các tính năng khác.

Hãy dùng thử và cho chúng tôi biết suy nghĩ của bạn!

Vấn đề về Chromium: 1144090, 1139945

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

Công cụ cho nhà phát triển đã thêm tính năng hỗ trợ thử nghiệm cho việc 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 hợp âm (còn gọi là phím tắt bằng cách nhấn nhiều phím) trong trình chỉnh sửa phím tắt.

Chuyển đến Cài đặt > Lối tắt, di chuột vào 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 phím tắt hợp âm.

Phím tắt cho cuộc trò chuyện nhóm

Vấn đề về Chromium: 174309

Tải kênh xem trước xuống

Hãy cân nhắc việc sử dụng Chrome Canary, Nhà phát triển hoặc Beta làm trình duyệt phát triển mặc định của bạn. 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 Công cụ cho nhà phát triển, kiểm thử các API nền tảng web tiên tiến và tìm ra các vấn đề trên trang web của bạn trước khi người dùng 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 để thảo luận về các tính năng và thay đổi mới trong bài đăng, hoặc bất cứ nội dung nào khác liên quan đến Công cụ cho nhà phát triển.

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