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 khai báo kiểu vào một nút DOM, đôi khi bạn sẽ dễ nhớ giá trị khai báo hơn là tên khai báo. Ví dụ: khi làm nổi bật một 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à 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 bạn nhập &quot;bold&quot;, ngăn Styles (Kiểu) sẽ tự động hoàn thành thành &quot;font-weight: bold&quot;.

Hình 1. Sau khi bạn 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 của Chromium.

Giao diện người dùng mới cho chế độ cài đặt mạng

Trước đây, bảng điều khiển Mạng gặp phải vấn đề về khả năng sử dụng, đó là các lựa 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 số lựa chọn ít dùng đã được chuyển vào 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 lựa chọn sau đây đã được chuyển sang Network Settings (Cài đặt mạng): Use Large Request Rows (Sử dụng các hàng yêu cầu lớn), Group By Frame (Nhóm theo khung), Show Overview (Hiện tổng quan), Capture Screenshots (Chụp ảnh màn hình). Hình 3 ánh xạ các vị trí cũ sang vị trí mới.

Ánh xạ các vị trí cũ sang vị trí mới.

Hình 3. Ánh xạ các vị trí cũ sang 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 đề số 892969 của Chromium.

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

Khi bạn 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 đến vấn đề số 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 bằng các nút mới Xuất tất cả dưới dạng HAR có nội dung Xuất và Nhập tệp HAR Nhập. Tính năng nhập và xuất HAR đã có trong Công cụ cho nhà phát triển một thời gian. Các nút dễ khám phá hơn là điểm 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 này trong giao diện người dùng đến vấn đề số 904585 của Chromium.

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

Giờ đây, bảng điều khiển Bộ nhớ cho biết 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 biết trang này đ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.

Bạn cũng có thể xem Trình giám sát 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 đến vấn đề 958177 trên Chromium.

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

Giờ đây, ngăn Service Workers (Worker dịch vụ) có cả số cổng trong tiêu đề để bạn dễ dàng theo dõi worker dịch vụ mà mình đ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 trong giao diện người dùng đến vấn đề số 601286 của Chromium.

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

Sử dụng mục Background Services (Dịch vụ nền) mới của bảng điều khiển Application (Ứng dụng) để theo dõi các sự kiện Background Fetch (Tìm nạp trong nền) và Background Sync (Đồng bộ hoá trong nền). Vì 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 Background Fetch và Background Sync sẽ tiếp tục được ghi, 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ý 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.

Gửi ý kiến phản hồi về những tính năng mới này đến 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 bên dưới.

Sau khi chạy node example.js, Firefox sẽ mở và văn bản page sẽ được chèn vào hộp tìm kiếm trên trang 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 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 diễn ra vào khoảng 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 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.

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.