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

Kayce Basques

Điểm mới trong Công cụ cho nhà phát triển trong Chrome 68:

Đọc tiếp hoặc xem phiên bản video của ghi chú phát hành ở bên dưới.

Bảng điều khiển hỗ trợ

Chrome 68 đi kèm một vài tính năng mới của Console liên quan đến tự động hoàn thành và xem trước.

Đánh giá nồng nhiệt

Khi bạn nhập một biểu thức trong Console, giờ đây, Bảng điều khiển có thể hiển thị bản xem trước kết quả của biểu thức đó bên dưới con trỏ.

Bảng điều khiển đang in kết quả của thao tác Sắp xếp() trước khi thực thi một cách rõ ràng.

Hình 1 Console đang in kết quả của thao tác sort() trước khi thao tác này được thực thi một cách rõ ràng

Cách bật tính năng Đánh giá Eager:

  1. Mở Bảng điều khiển.
  2. Mở phần Cài đặt Play Console Nút Cài đặt bảng điều khiển.
  3. Bật hộp đánh dấu Đánh giá Eager.

Công cụ cho nhà phát triển không chuẩn bị đánh giá xem biểu thức có gây ra tác dụng phụ hay không.

Gợi ý về đối số

Khi bạn nhập các hàm, giờ đây, Console sẽ cho bạn thấy các đối số mà hàm đó dự kiến.

Gợi ý về đối số trong Bảng điều khiển.

Hình 2. Nhiều ví dụ về gợi ý đối số trong Bảng điều khiển

Lưu ý:

  • Dấu hỏi chấm trước một đối số, chẳng hạn như ?options, đại diện cho đối số không bắt buộc.
  • Dấu ba chấm trước đối số, chẳng hạn như ...items, biểu thị tính lan truyền.
  • Một số hàm (chẳng hạn như CSS.supports()) chấp nhận nhiều chữ ký đối số.

Tự động hoàn thành sau khi thực thi hàm

Sau khi bật tính năng Đánh giá Eager, giờ đây, Console cũng cho bạn biết những thuộc tính và hàm có sẵn sau khi bạn nhập một hàm.

Sau khi chạy document.querySelector('p'), giờ đây, Bảng điều khiển có thể cho bạn thấy các thuộc tính và hàm có sẵn cho phần tử đó.

Hình 3. Ảnh chụp màn hình trên cùng biểu thị hành vi cũ, còn ảnh chụp màn hình dưới cùng biểu thị hành vi mới hỗ trợ tính năng tự động hoàn thành hàm

Từ khoá ES2017 trong tính năng tự động hoàn thành

Từ khoá ES2017 (chẳng hạn như await) hiện đã có trong giao diện người dùng tự động hoàn thành của Console.

Giờ đây, Play Console sẽ đề xuất chế độ "chờ" trong giao diện người dùng tự động hoàn thành.

Hình 4. Giờ đây, Play Console đề xuất await trong giao diện người dùng tự động hoàn thành

Quy trình kiểm tra nhanh hơn, đáng tin cậy hơn, giao diện người dùng mới và quy trình kiểm tra mới

Chrome 68 đi kèm với Lighthouse 3.0. Các phần tiếp theo là bản tóm tắt một số thay đổi lớn nhất. Xem bài viết Thông báo về Lighthouse 3.0 để biết toàn bộ thông tin.

Kiểm tra nhanh hơn, đáng tin cậy hơn

Lighthouse 3.0 có một công cụ kiểm tra nội bộ mới có tên mã là Lantern, giúp bạn hoàn thành các bài kiểm tra nhanh hơn và ít có sự chênh lệch giữa các lần chạy hơn.

Giao diện người dùng mới

Lighthouse 3.0 cũng mang đến giao diện người dùng mới, nhờ sự cộng tác giữa các nhóm trải nghiệm người dùng (Nghiên cứu và thiết kế) của Chrome và Lighthouse.

Giao diện người dùng mới của báo cáo trong Lighthouse 3.0.

Hình 5. Giao diện người dùng mới của báo cáo trong Lighthouse 3.0

Lượt kiểm tra mới

Lighthouse 3.0 cũng cung cấp 4 kiểm tra mới:

  • Nội dung đầu tiên hiển thị
  • robots.txt không hợp lệ
  • Dùng định dạng video cho nội dung động
  • Tránh nhiều chuyến đi khứ hồi tốn kém tới bất cứ điểm khởi hành nào

Hỗ trợ BigInt

Chrome 68 hỗ trợ một số nguyên mới có tên là BigInt. BigInt cho phép bạn biểu diễn số nguyên với độ chính xác tuỳ ý. Hãy dùng thử trong Console:

Ví dụ về BigInt trong Console.

Hình 6. Ví dụ về BigInt trong Console (Bảng điều khiển)

Thêm đường dẫn thuộc tính vào đồng hồ

Khi đang tạm dừng trên một điểm ngắt, hãy nhấp chuột phải vào một thuộc tính trong ngăn Scope (Phạm vi) rồi chọn Add property path to watch (Thêm đường dẫn thuộc tính vào đồng hồ) để thêm thuộc tính đó vào ngăn Watch (Xem).

Ví dụ về tuỳ chọn Thêm đường dẫn thuộc tính vào đồng hồ.

Hình 7. Ví dụ về trường hợp Thêm đường dẫn thuộc tính vào đồng hồ

Đã chuyển mục "Hiện dấu thời gian" đến phần cài đặt

Hộp đánh dấu Hiển thị dấu thời gian trước đây trong phần Cài đặt Play Console Nút Cài đặt bảng điều khiển đã chuyển đến phần Cài đặt.

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