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

Kayce Basques

Xin chào! Dưới đây là những điểm mới trong Chrome DevTools trên Chrome 76.

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

Khi thêm phần khai báo kiểu vào một nút DOM, đôi khi giá trị khai báo dễ nhớ hơn tên khai báo. Ví dụ: khi làm đậm nút <p>, 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à bạn 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 đến vấn đề #931145 trên Chromium.

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

Trước đây, bảng điều khiển Mạng 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 truy cập được khi cửa sổ DevTools hẹp. Để khắc phục vấn đề này và sắp xếp gọn gàng bảng điều khiển Mạng, một vài tuỳ chọn ít sử dụng đã được di chuyển ra phía 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 đây đã 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ị thông tin tổng quan, Chụp ảnh màn hình. Hình 3 ánh xạ các vị trí cũ với các vị trí mới.

Ánh xạ vị trí cũ đến vị trí mới.

Hình 3. Ánh xạ vị trí cũ đến 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 vào vấn đề #892969 của 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 sẽ bao gồm cả thông điệp WebSocket. Thuộc tính _webSocketMessages bắt đầu bằng dấu gạch dưới để cho biết đó là 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 HAR

Dễ dàng chia sẻ nhật ký mạng với đồng nghiệp hơn bằng các nút Export All As HAR With Content (Xuất tất cả dưới dạng HAR có 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 DevTools từ lâu. Các nút dễ tìm thấy hơn chính là thay đổi 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 đối với giao diện người dùng này cho Vấn đề về Chromium #904585.

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 cuối của bảng điều khiển Bộ nhớ cho biết trang đang sử dụng tổng cộng 43,4 MB bộ nhớ. 209 KB/giây 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 tới vấn đề Chromium #958177.

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

Ngăn Trình chạy dịch vụ hiện có số cổng trong tiêu đề để 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 vào vấn đề #601286 của Chromium.

Kiểm tra sự kiện Tìm nạp ở chế độ nền và Đồng bộ hoá ở chế độ 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. Do các sự kiện Tìm nạp ở chế độ nền và Đồng bộ hoá ở chế độ nền xảy ra ở chế độ nền, nên sẽ không hữu ích lắm nếu DevTools chỉ ghi lại các sự kiện Tìm nạp ở chế độ nền và Đồng bộ hoá ở chế độ nền khi DevTools đ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à thậm chí cả sau khi bạn đóng Chrome.

Chuyển đến bảng điều khiển Application (Ứng dụng), mở thẻ Background Tìm nạp (Background Tìm nạp) hoặc Background Sync (Đồng bộ hoá trong nền), sau đó nhấp vào biểu tượng Record Ghi âm (Ghi lại) để bắt đầu ghi nhật ký các 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á ở chế độ nền.

Hình 8. Ngăn Đồng bộ hoá ở chế độ nền.

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

Puppeteer cho Firefox

Puppeteer dành 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 API Node, như minh hoạ trong video bên dưới.

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

Hãy xem bài nói chuyện 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 sẽ diễn ra vào khoảng 4:05.

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

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 cứ điều gì 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 tất cả nội dung đã được đề cập trong loạt bài Tính năng mới trong DevTools.