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 nội dung khai báo kiểu vào nút DOM, đôi khi giá trị khai báo sẽ dễ nhớ hơn tên khai báo. Ví dụ: khi làm đậm 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ình muốn nhưng không thể 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 kiế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 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

Bảng điều khiển Mạng trước đây có một vấn đề về khả năng hữu dụng, trong đó không thể truy cập được các tuỳ chọn như trình đơn điều tiết khi cửa sổ Công cụ cho nhà phát triển bị thu 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 đã 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ũ 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 đố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 giờ đây sẽ 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à 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 bằng các nút mới Xuất tất cả dưới dạng tệp HAR có nội dung Xuất và Nhập tệp HAR Nhập mới. Tính năng 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.

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

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.

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

Hình 5. Mặt dưới cùng của bảng 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/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 trình chạy dịch vụ nào 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 đố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 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 ở chế độ 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à 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 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 trong nền.

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

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

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, bạn hiệ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 cứ 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ố trong Công cụ cho nhà phát triển bằng cách sử dụng Tuỳ chọn khác   Thêm   > 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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

Chrome 101

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