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

Kayce Basques

Điểm mới đối với 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 số tính năng mới của Play Console liên quan đến tính năng tự động hoàn thành và xem trước.

Đánh giá một cách nghiêm túc

Khi bạn nhập một biểu thức vào Console, Console nay 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ỏ của bạn.

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

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

Cách bật chế độ Đánh giá mức độ nghiêm ngặt:

  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. Chọn hộp đánh dấu Eager evaluation (Đánh giá ước tính).

Công cụ cho nhà phát triển không sẵn sàng đánh giá xem biểu thức có gây ra tác động phụ hay không.

Gợi ý về đối số

Khi bạn nhập hàm, Console nay sẽ cho bạn thấy các đối số mà hàm yêu cầu.

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

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

Lưu ý:

  • Dấu chấm hỏi 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, thể hiện sự 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 chế độ Đánh giá Eager, giờ đây, Bảng điều khiển cũng sẽ cho bạn thấy các 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'), Bảng điều khiển hiện có thể hiển thị cho bạn các thuộc tính và hàm hiện có cho phần tử đó.

Hình 3. Ảnh chụp màn hình trên cùng thể hiện hành vi cũ, còn ảnh chụp màn hình dưới cùng thể hiện 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

Các 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.

Bảng điều khiển hiện đề xuất tính năng "chờ" trong giao diện người dùng tự động hoàn thành.

Hình 4. Bảng điều khiển hiện đề 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 về một số thay đổi lớn nhất. Xem phần Thông báo Lighthouse 3.0 để biết thông tin đầy đủ.

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 tên mã là Lantern, giúp hoàn thành các lần kiểm tra của bạn nhanh hơn và với ít chênh lệch hơn giữa các lần chạy.

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 nhóm Lighthouse và Chrome UX (Nghiên cứu và thiết kế).

Giao diện người dùng báo cáo mới 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ần kiểm tra mới

Lighthouse 3.0 cũng đi kèm với 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 đến bất kỳ điểm khởi hành nào

Hỗ trợ BigInt

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

Ví dụ về BigInt trong Bảng điều khiển.

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

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

Khi 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ề cách Thêm đường dẫn thuộc tính để xem.

Hình 7. Ví dụ về Thêm đường dẫn thuộc tính để xem

Chuyển mục "Hiển thị dấu thời gian" vào 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 bảng điều khiển Nút Cài đặt bảng điều khiển đã chuyển sang phần Cài đặt.

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