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

Kayce Basques
Kayce Basques
X GitHub

Xin chào! Sau đây là những điểm mới trong Chrome DevTools trong Chrome 76.

Tự động hoàn thành bằng các giá trị CSS

Khi thêm nội dung khai báo kiểu vào một nút DOM, đôi khi giá trị khai báo sẽ dễ nhớ hơn tên khai báo. Ví dụ: khi đặt nút <p> thành in đậm, giá trị bold có thể dễ nhớ hơn tên font-weight. Giao diện người dùng tự động hoàn thành của ngăn Kiểu hiện hỗ trợ các giá trị CSS. Nếu bạn nhớ giá trị từ khoá mà mình muốn nhưng không nhớ tên thuộc tính, hãy thử nhập giá trị và tính năng tự động hoàn thành sẽ giúp bạn tìm thấy tên mà bạn đang tìm.

Sau khi nhập &quot;bold&quot;, ngăn Kiểu sẽ tự động hoàn thành thành &quot;font-weight: bold&quot;.

Hình 1. Sau khi nhập bold, ngăn Kiểu sẽ tự động hoàn thành thành font-weight: bold.

Gửi ý kiến phản hồi về tính năng mới này cho vấn đề #931145 của Chromium.

Giao diện người dùng mới cho phần cài đặt mạng

Bảng điều khiển Mạng trước đây gặp vấn đề về khả năng hữu dụng, trong đó các tuỳ chọn như trình đơn điều tiết không thể truy cập được khi cửa sổ Công cụ cho nhà phát triển hẹp. Để khắc phục vấn đề này và dọn dẹp bảng điều khiển Mạng, một vài tuỳ chọn ít được sử dụng hơn đã được chuyển ra sau ngăn Cài đặt mạng Nút Cài đặt mạng mới.

Cài đặt mạng

Hình 2. Cài đặt mạng.

Các tuỳ chọn sau đã được chuyển sang phần Cài đặt mạng: Sử dụng hàng yêu cầu lớn, Nhóm theo khung, Hiện thông tin tổng quan, Chụp ảnh màn hình. Hình 3 liên kết các vị trí cũ với vị trí mới.

Liên kết vị trí cũ với vị trí mới.

Hình 3. Liên kết các vị trí cũ với vị trí mới.

Gửi ý kiến phản hồi về thay đổi này đối với giao diện người dùng cho vấn đề #892969 trên Chromium.

Thông báo WebSocket trong tệp xuất HAR

Khi xuất tệp HAR từ bảng điều khiển Mạng để chia sẻ nhật ký mạng với đồng nghiệp, tệp HAR của bạn hiện bao gồm cả thông báo WebSocket. Thuộc tính _webSocketMessages bắt đầu bằng dấu gạch dưới để cho biết đây là một trường tuỳ chỉnh.

...
"_webSocketMessages": [
  {
    "type": "send",
    "time": 1558730482.5071473,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  },
  {
    "type": "receive",
    "time": 1558730482.5883863,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  }
]
...

Gửi ý kiến phản hồi về tính năng mới này cho vấn đề #496006 trên Chromium.

Nút nhập và xuất tệp HAR

Chia sẻ nhật ký mạng với đồng nghiệp dễ dàng hơn nhờ các nút Export All As HAR With Content (Xuất tất cả dưới dạng HAR cùng với nội dung) Xuất và Import HAR File (Nhập tệp HAR) Nhập mới. Tính năng nhập và xuất HAR đã có trong Công cụ cho nhà phát triển từ lâu. Các nút dễ thấy hơn là điểm mới.

Các nút HAR mới.

Hình 4. Các nút HAR mới.

Gửi ý kiến phản hồi về thay đổi này đối với giao diện người dùng cho vấn đề #904585 trên Chromium.

Tổng mức sử dụng bộ nhớ theo thời gian thực

Bảng điều khiển Bộ nhớ hiện cho thấy tổng mức sử dụng bộ nhớ theo thời gian thực.

Tổng mức sử dụng bộ nhớ theo thời gian thực.

Hình 5. Phần dưới cùng của bảng điều khiển Bộ nhớ cho thấy trang đang sử dụng tổng cộng 43,4 MB bộ nhớ. 209 KB/s cho biết tổng mức sử dụng bộ nhớ đang tăng 209 KB mỗi giây.

Hãy xem thêm Trình theo dõi hiệu suất để theo dõi mức sử dụng bộ nhớ theo thời gian thực.

Gửi ý kiến phản hồi về tính năng mới này cho vấn đề #958177 trên Chromium.

Số cổng đăng ký của trình chạy dịch vụ

Ngăn Service Workers (Trình chạy dịch vụ) hiện có số cổng trong tiêu đề để giúp bạn dễ dàng theo dõi trình chạy dịch vụ mà bạn đang gỡ lỗi.

Cổng trình chạy dịch vụ.

Hình 6. Cổng trình chạy dịch vụ.

Gửi ý kiến phản hồi về thay đổi này đối với giao diện người dùng cho vấn đề #601286 của Chromium.

Kiểm tra các sự kiện Tìm nạp trong nền và Đồng bộ hoá trong nền

Sử dụng mục Dịch vụ nền mới của bảng điều khiển Ứng dụng để theo dõi các sự kiện Tìm nạp trong nền và Đồng bộ hoá trong nền. Vì các sự kiện Tìm nạp trong nền và Đồng bộ hoá trong nền xảy ra trong... nền, nên sẽ không hữu ích nếu Công cụ cho nhà phát triển chỉ ghi lại các sự kiện Tìm nạp trong nền và Đồng bộ hoá trong nền khi Công cụ cho nhà phát triển đang mở. Vì vậy, sau khi bạn bắt đầu ghi, các sự kiện Tìm nạp trong nền và Đồng bộ hoá trong nền sẽ tiếp tục được ghi lại, ngay cả sau khi bạn đóng thẻ và ngay cả sau khi bạn đóng Chrome.

Chuyển đến bảng điều khiển Application (Ứng dụng), mở thẻ Background Fetch (Tìm nạp trong nền) hoặc Background Sync (Đồng bộ hoá trong nền), sau đó nhấp vào Record (Ghi) Ghi âm để bắt đầu ghi nhật ký sự kiện. Nhấp vào một sự kiện để xem thêm thông tin về sự kiện đó.

Ngăn Tìm nạp ở chế độ nền.

Hình 7. Ngăn Tìm nạp ở chế độ nền. Bản minh hoạ của Maxim Salnikov.

Ngăn Đồng bộ hoá trong nền.

Hình 8. Ngăn Đồng bộ hoá trong nền.

Gửi ý kiến phản hồi về các tính năng mới này cho vấn đề #927726 của Chromium.

Puppeteer cho Firefox

Puppeteer cho Firefox là một dự án thử nghiệm mới cho phép bạn tự động hoá Firefox bằng API Puppeteer. Nói cách khác, giờ đây, bạn có thể tự động hoá Firefox và Chromium bằng cùng một Node API, như minh hoạ trong video dưới đây.

Sau khi chạy node example.js, Firefox sẽ mở ra và văn bản page được chèn vào hộp tìm kiếm trên trang web tài liệu của Puppeteer. Sau đó, thao tác tương tự sẽ được lặp lại trong Chromium.

Hãy xem bài nói chuyện về Puppeteer của Joel và Andrey tại Google I/O 2019 để tìm hiểu thêm về Puppeteer và Puppeteer cho Firefox. Thông báo về Firefox xuất hiện vào khoảng phút thứ 4:05.

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 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à 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 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, bản 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.

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.