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

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 đặt một nút <p> được in đậm, giá trị bold có thể dễ nhớ hơn so với 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á bạn 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 bạn đang tìm kiếm.

Sau khi nhập &quot;in đậm&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 tới Vấn đề về 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 từ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ổ Công cụ cho nhà phát triển bị thu hẹp. Để khắc phục vấn đề này và làm rối bảng điều khiển Mạng, một số tuỳ chọn ít dùng đã được 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 đã đượ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ị 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ạ các vị trí cũ đến vị trí mới.

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

Gửi ý kiến phản hồi về việc thay đổi giao diện người dùng tới Vấn đề về Chromium #892969.

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

Khi bạn 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ác 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 ý kiến phản hồi về tính năng mới này tới Vấn đề về Chromium #496006.

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 có tên là Xuất tất cả dưới dạng tệp HAR có nội dung XuấtNhập tệp HAR Nhập. Tính năng nhập và xuất HAR đã tồn tại trong Công cụ cho nhà phát triển được một thời gian. Sự thay đổi mới là các nút dễ phát hiện hơn.

Nút HAR mới.

Hình 4. Nút HAR mới.

Gửi ý kiến phản hồi về việc thay đổi giao diện người dùng này tới vấn đề 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. Phần cuối của bảng điều khiển Bộ nhớ cho thấy trang đang sử dụng tổng bộ nhớ là 43,4 MB. 209 KB/s cho biết tổng mức sử dụng bộ nhớ đang tăng 209 KB/giây.

Ngoài ra, hãy xem 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 đề về Chromium #958177.

Số cổng đăng ký Service worker

Ngăn Service Worker (Trình chạy dịch vụ) giờ đây sẽ 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 đang gỡ lỗi.

Cổng Service worker.

Hình 6. Cổng Service worker.

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

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 phần Dịch vụ nền mới trên bảng điều khiển Ứng dụng để theo dõi các sự kiện Tìm nạp trong nềnĐồ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 diễn ra ở chế độ nền... nên sẽ không hữu ích lắm 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í sau khi bạn đóng Chrome.

Chuyển đến bảng điều khiển Ứng dụng, mở thẻ Tìm nạp trong nền hoặc Đồng bộ hoá trong nền, sau đó nhấp vào biểu tượng 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 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á 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 tới Vấn đề về Chromium #927726.

Con rối dành 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 JoelAndrey tại Google I/O 2019 để tìm hiểu thêm về Puppeteer và Puppeteer 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 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 cung cấp cho bạn quyề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, thử nghiệm API nền tảng web tiên tiến và tìm ra sự cố trên trang web của bạn trước khi người dùng của bạn 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 đây để thảo luận về các tính năng mới và thay đổi trong bài đăng hoặc bất cứ vấn đề nào khác liên quan đến Công cụ cho nhà phát triển.

  • Hãy 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ủa Công cụ cho nhà phát triển bằng cách sử dụng phần Tuỳ chọn khác   Thêm   > Trợ giúp > Báo cáo sự cố về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
  • Tweet tại @ChromeDevTools.
  • Hãy để 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 video trên YouTube.

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

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

Kiến thức cơ bản về Chrome

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