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

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

Nhóm đã thực hiện một số biện pháp tối ưu hoá để giảm mức hao tổn hiệu suất của quá trình 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ới 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 tính năng 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)), biểu tượng đồng hồ sẽ 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 lớp phủ đồng hồ. Nhấp vào vị trí bất kỳ trong đồng hồ hoặc kéo kim để thay đổi góc!

Ngoài ra còn có 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!

Các sự cố với 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 quy trình mô phỏng mới trong thẻ Hiển thị, cho phép bạn tắt các định dạng hình ảnh AVIF và WebP. Các quy trình 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 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 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ẻ Hiển thị, chọn "Tắt định dạng hình ảnh AVIF" rồi làm mới trang. Di chuột qua img src. Hình ảnh src (currentSrc) hiện tại hiện là hình ảnh WebP dự phòng.

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

Vấn đề với Chromium: 1130556

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

Bây giờ 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 ổ đĩa sắp hết.

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

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

Các sự cố với Chromium: 945786, 1146985

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

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

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 Chỉ số quan trọng về trang web mới.

Làn đường hiện hiển thị thông tin Các chỉ số quan trọng về trang web 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à Thay đổi bố cục (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 bằng các chỉ số Chỉ số quan trọng trên web.

Làn đường Các chỉ số quan trọng về trang web

Vấn đề với 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ực hiện được. Cột trạng thái hiển thị "Lỗi CORS". Di chuột qua lỗi, chú giải công cụ sẽ hiển thị mã lỗi. Trước đây, Công cụ cho nhà phát triển chỉ hiển thị trạng thái "(không thành công)" chung cho các lỗi CORS.

Việc này là nền tảng cho các tính năng nâng cao tiếp theo của chúng tôi, nhằm mô tả chi tiết hơn về các vấn đề về cơ chế CORS!

Lỗi CORS

Vấn đề với Chromium: 1141824

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

Thông tin 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 hiển thị trong phần Bảo mật và tách biệt.

Phần API Phạm vi cung cấp mới cho biết tình trạng sẵn có của SharedArrayBuffer (SAB) và khả năng chia sẻ chúng 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 đã có sẵn, nhưng ngữ cảnh không được tách riêng trên nhiều nguồn gốc. Hãy đọc bài viết này để tìm hiểu thêm về tính năng tách biệt nhiều nguồn gốc và lý do bạn cần sử dụng tính năng này cho các tính năng như SharedArrayBuffers.

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

Vấn đề với 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 thực thi web chuyên dụng trong khung tạo ra trình thực thi đó.

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

Thông tin về nhân viên web

Các sự cố với Chromium: 1122507, 1051466

Hiện thông tin chi tiết về khung mở cho cửa sổ đang mở

Bây giờ, bạn có thể xem chi tiết về khung hình đã dẫn đến việc mở một Cửa sổ khác.

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 trình mở) để hiển thị trình mở trong bảng điều khiển Phần tử.

Thông tin chi tiết về khung mở

Vấn đề với Chromium: 1107766

Mở bảng điều khiển Network (Mạng) trong ngăn Service Worker (Trình chạy dịch vụ)

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

Chuyển đến Application (Ứng dụng) > Service Workers (Trình chạy 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 Network (Mạng) được mở ở bảng dưới cùng, cho thấy tất cả yêu cầu liên quan đến trình chạy dịch vụ (các yêu cầu mạng được lọc theo "is:service-worker-intercepted").

Mở bảng điều khiển Network (Mạng) trong Service Worker

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

Các lựa chọn mới về sao chép 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 yêu cầu mạng.

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

Trong bảng 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 này: Tham số chuỗi truy vấn dữ liệu trên biểu mẫu yêu cầu tải trọng (JSON) 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ị thuộc tính vào bảng nhớ tạm.

Vấn đề với 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 Copy stacktrace (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ới 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 tháo rời WebAssembly (Wasm) trong lúc tạm dừng trên một điểm ngắt, DevTools hiện sẽ 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ở một tệp Wasm, đặt một điểm ngắt và làm mới trang. Di chuột đến một biến để xem giá trị.

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

Các sự cố với Chromium: 1058836, 1071432

Tính giá trị biến Wasm trong Bảng điều khiển

Giờ đây, bạn có thể đánh giá biến Wasm trong Console khi đang 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 vào Bảng điều khiển để trả về giá trị hiện tại của biến, trong trường hợp này là 4.

Tính giá trị biến Wasm trong Bảng điều khiển

Vấn đề với Chromium: 1127914

Đơ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ớ. Trước đây, Công cụ cho nhà phát triển 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 ra lại thực hiện các phép tính bằng KiB. Điều này gây nhầm lẫn không cần thiết.

Vấn đề với Chromium: 1035309

Làm nổi bật 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ử đó chính xác hơn.

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

Vấn đề với Chromium: 1143833

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

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

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ị một huy hiệu flex trong bảng điều khiển Phần tử cho các phần tử có display: flex áp dụng cho huy hiệu đó.

Ngoài ra, các biểu tượng căn chỉnh mới sẽ đượ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

Hơn nữa, các biểu tượng này nhận biết được theo bối cảnh. Hướng 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 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. Các tính năng khác sẽ sớm được bổ sung.

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

Các sự cố với Chromium: 1144090, 1139945

Tuỳ chỉnh phím tắt 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 nhấn nhiều phím) trong trình chỉnh sửa phím tắt.

Chuyển đến phầ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 cho hợp âm.

Phím tắt cho hợp âm

Vấn đề với Chromium: 174309

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