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à các tính năng mới trong Công cụ của Chrome cho nhà phát triển trong Chrome 76.

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

Khi thêm các khai báo kiểu vào nút DOM, đôi khi giá trị khai báo sẽ dễ nhớ hơn ngoài tên khai báo. Ví dụ: khi in đậm nút <p>, giá trị bold có thể là 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ợ CSS giá trị. Nếu bạn nhớ giá trị từ khoá mình muốn, nhưng không thể nhớ tên thuộc tính, hãy thử việc 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à mình đang tìm kiếm.

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

Gửi phản hồi về tính năng mới này tới vấn đề Chromium #931145.

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

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

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

Các tuỳ chọn sau đã 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ị tổng quan, Chụp ảnh màn hình. Hình 3 ánh xạ các vị trí cũ đến vị trí mới các thiết bị khác.

Hình 3. Ánh xạ vị trí cũ đến vị trí 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 #892969.

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

Khi xuất mộ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 thông báo WebSocket. Thuộc tính _webSocketMessages bắt đầu bằng một 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 phản hồi về tính năng mới này tới vấn đề Chromium #496006.

Các nút nhập và xuất HAR

Chia sẻ nhật ký mạng với đồng nghiệp dễ dàng hơn nhờ công cụ mới Xuất tất cả dưới dạng tệp HAR có nội dung và Nhập tệp HAR Nút . Nhập và xuất HAR đã tồn tại trong Công cụ cho nhà phát triển một thời gian. Các nút dễ tìm thấy hơn chính là thay đổi 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

Giờ đây, bảng điều khiển Bộ nhớ sẽ hiển thị tổng mức sử dụng bộ nhớ theo thời gian thực.

Hình 5. Ở cuối bảng Bộ nhớ cho biết trang đang sử dụng 43,4 MB bộ nhớ trong tổng cộng. 209 KB/s cho biết tổng mức sử dụng bộ nhớ đang tăng 209 KB/giâ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 Service Workers hiện bao gồm số cổng trong tiêu đề để giúp bạn dễ dàng theo dõi hơn về trình chạy dịch vụ mà bạn đang gỡ lỗi.

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

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 đề Chromium #601286.

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

Sử dụng phần Background Services (Dịch vụ nền) mới của bảng điều khiển Application (Ứng dụng) để giám sát Background (Nền) Sự kiện Tìm nạp và Đồng bộ hoá trong nền. Do 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 cũng vậy, sẽ không hữu ích lắm nếu Công cụ cho nhà phát triển chỉ ghi lại Nền Sự kiện Tìm nạp 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ắt đầu quay, chế độ Nền Sự kiện Tìm nạp và đồng bộ hoá dưới 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 Tìm nạp hoặc Background Sync (Đồng bộ hoá trong nền), sau đó nhấp vào biểu tượng Ghi để 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 đó.

Hình 7. Ngăn Tìm nạp trong nền. Bản minh hoạ của Maxim Salnikov.

Hình 8. Ngăn Đồng bộ hoá dưới nền.

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

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 Nút, như được 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 đó, hệ thống sẽ lặp lại cùng một tác vụ 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 dành cho Firefox. Thông báo của Firefox xảy ra vào khoảng 4:05.

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 kỳ 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   > 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.