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

Sau đây là các tính năng mới và những thay đổi lớn sắp tới đối với Công cụ cho nhà phát triển trong Chrome 67:

Phiên bản video của ghi chú phát hành:

Mở bảng điều khiển Network (Mạng), rồi nhấn tổ hợp phím Command+F (Mac) hoặc Control+F (Windows, Linux, ChromeOS) để mở ngăn Network Search (Tìm kiếm mạng) mới. Công cụ cho nhà phát triển tìm kiếm tiêu đề và phần nội dung của tất cả các yêu cầu mạng cho truy vấn mà bạn cung cấp.

Tìm kiếm văn bản 'cache-control' bằng ngăn Network Search mới.

Hình 1 Tìm kiếm văn bản cache-control bằng ngăn Tìm kiếm mạng mới

Nhấp vào biểu tượng Khớp chữ hoa chữ thường Khớp chữ hoa/chữ thường để truy vấn của bạn có phân biệt chữ hoa chữ thường. Nhấp vào biểu tượng Sử dụng biểu thức chính quy Sử dụng biểu thức chính quy để hiện mọi kết quả khớp với mẫu mà bạn cung cấp. Bạn không cần phải bao bọc biểu thức chính quy trong dấu gạch chéo lên.

Truy vấn biểu thức chính quy trong ngăn Tìm kiếm mạng.

Hình 2. Truy vấn biểu thức chính quy trong ngăn Tìm kiếm mạng.

Giờ đây, giao diện người dùng của ngăn Global Search (Tìm kiếm chung) khớp với giao diện người dùng của ngăn Network Search (Tìm kiếm mạng) mới. Ứng dụng này giờ đây cũng in ra kết quả đẹp mắt để hỗ trợ việc quét nhanh.

Giao diện người dùng cũ và mới.

Hình 3. Giao diện người dùng cũ ở bên trái và giao diện người dùng mới ở bên phải

Nhấn tổ hợp phím Command+Option+F (máy Mac) hoặc Control+Shift+F (Windows, Linux, ChromeOS) để mở Global Search (Tìm kiếm chung). Bạn cũng có thể mở ứng dụng này qua Trình đơn lệnh.

Xem trước giá trị biến CSS trong ngăn Styles (Kiểu)

Khi giá trị của thuộc tính màu CSS, chẳng hạn như background-color hoặc color, được đặt thành một biến CSS, Công cụ cho nhà phát triển giờ đây sẽ hiển thị bản xem trước của màu đó.

Ví dụ về các giá trị màu của biến CSS.

Hình 4. Trong giao diện người dùng cũ ở bên trái, không có bản xem trước màu nào bên cạnh color: var(--main-color), trong khi trong giao diện người dùng mới ở bên phải, có

Sao chép dưới dạng tìm nạp

Nhấp chuột phải vào một yêu cầu mạng, sau đó chọn Copy (Sao chép) > Copy As Fetch (Sao chép khi tìm nạp) để sao chép mã tương đương fetch() cho yêu cầu đó vào bảng nhớ tạm.

Sao chép mã tương đương với tìm nạp() cho một yêu cầu.

Hình 5. Sao chép mã tương đương với fetch() cho một yêu cầu

Công cụ cho nhà phát triển tạo mã như sau:

fetch("https://preload.glitch.me/styles.css", {
  "credentials": "omit",
  "headers": {},
  "referrer": "https://preload.glitch.me/after/",
  "referrerPolicy": "no-referrer-when-downgrade",
  "body": null,
  "method": "GET",
  "mode": "cors"
});

Nội dung cập nhật về bảng điều khiển kiểm tra

Lần kiểm tra mới

Nhóm Kiểm tra có 2 cuộc kiểm tra mới, bao gồm:

  • Tải trước các yêu cầu chính. Các yêu cầu tải trước có thể làm tăng thời gian tải trang bằng cách đưa ra gợi ý cho trình duyệt để tải các tài nguyên quan trọng cho Đường dẫn kết xuất quan trọng của bạn sớm nhất có thể.
  • Tránh văn bản ẩn trong khi phông chữ web đang tải. Việc đảm bảo văn bản hiển thị trong khi tải phông chữ web sẽ giúp trang hữu ích hơn cho người dùng nhanh hơn.

Các lựa chọn mới về cấu hình

Giờ đây, bạn có thể định cấu hình bảng điều khiển Kiểm tra để:

  • Giữ nguyên chế độ cài đặt của tác nhân người dùng và khung nhìn của máy tính. Nói cách khác, bạn có thể ngăn bảng điều khiển Testings (Kiểm tra) mô phỏng thiết bị di động.
  • Tắt chế độ điều tiết CPU và mạng.
  • Duy trì bộ nhớ, chẳng hạn như LocalStorage và IndexedDB, trong các lần kiểm tra.

Các lựa chọn mới về cấu hình kiểm tra.

Hình 6. Tùy chọn cấu hình kiểm tra mới

Xem dấu vết

Sau khi kiểm tra một trang, hãy nhấp vào Xem dấu vết để xem dữ liệu về hiệu suất tải mà quá trình kiểm tra của bạn dựa vào trong bảng điều khiển Hiệu suất.

Nút View Trace.

Hình 7. Nút View Trace (Xem dấu vết)

Dừng vòng lặp vô hạn

Nếu bạn xử lý nhiều vòng lặp for, vòng lặp do...while hoặc đệ quy nhiều, có thể bạn đã thực thi nhầm một vòng lặp vô hạn trong khi phát triển trang web của mình. Để dừng vòng lặp vô hạn, giờ đây bạn có thể:

  1. Mở bảng điều khiển Nguồn.
  2. Nhấp vào biểu tượng Tạm dừng Tạm dừng. Nút này sẽ chuyển thành Resume Execution (Tiếp tục thực thi tập lệnh) Kích hoạt lại.
  3. Giữ Tiếp tục thực thi tập lệnh Kích hoạt lại rồi chọn Dừng cuộc gọi JavaScript hiện tại Dừng.

Trong video trên, đồng hồ đang được cập nhật qua một bộ tính giờ setInterval(). Thao tác nhấp vào Start Infinite Loop sẽ chạy một vòng lặp do...while không bao giờ dừng lại. Khoảng thời gian này sẽ tiếp tục vì nó không chạy khi bạn chọn biểu tượng Stop Current JavaScript Call (Dừng lệnh gọi JavaScript hiện tại) Dừng.

Thời gian người dùng trong thẻ Hiệu suất

Khi xem Bản ghi hiệu suất, hãy nhấp vào phần Thời gian người dùng để xem các chỉ số Thời gian người dùng trong thẻ Tóm tắt, Dưới cùng, Cây cuộc gọiNhật ký sự kiện.

Xem các chỉ số Thời gian người dùng trong thẻ Từ dưới lên.

Hình 8. Xem các chỉ số Thời gian người dùng trong thẻ Từ dưới lên. Thanh màu xanh dương ở bên trái phần Thời gian người dùng cho biết đã chọn thời gian.

Nhìn chung, bạn hiện có thể chọn bất kỳ phần nào trong số các phần (Main Thread, User Timing, GPU, ScriptStreamer, v.v.) và xem hoạt động của mục đó trong các thẻ.

Chọn các phiên bản máy ảo JavaScript trong bảng điều khiển Memory (Bộ nhớ)

Bảng điều khiển Memory (Bộ nhớ) giờ đây liệt kê rõ ràng tất cả các thực thể máy ảo JavaScript được liên kết với một trang, thay vì ẩn các thực thể này sau trình đơn thả xuống Target (Mục tiêu).

Ảnh chụp màn hình trước và sau của bảng điều khiển Bộ nhớ.

Hình 9. Trong giao diện người dùng cũ ở bên trái, các thực thể máy ảo JavaScript bị ẩn sau trình đơn thả xuống Target (Mục tiêu), còn trong giao diện người dùng mới ở bên phải, các thực thể này hiển thị trong bảng Select JavaScript VM Instance (Chọn thực thể máy ảo JavaScript)

Bên cạnh thực thể developers.google.com có 2 giá trị: 8.7 MB13.3 MB. Giá trị bên trái biểu thị bộ nhớ được phân bổ do JavaScript. Giá trị phù hợp đại diện cho toàn bộ bộ nhớ hệ điều hành đang được phân bổ do thực thể máy ảo đó. Giá trị bên phải bao gồm cả giá trị bên trái. Trong Trình quản lý tác vụ của Chrome, giá trị bên trái tương ứng với JavaScript Memory và giá trị bên phải tương ứng với Memory Footprint.

Thẻ Mạng đã được đổi tên thành thẻ Trang

Trên bảng điều khiển Nguồn, thẻ Mạng giờ đây được gọi là thẻ Trang.

Hai cửa sổ Công cụ cho nhà phát triển cạnh nhau, thể hiện sự thay đổi về tên.

Hình 10. Trong giao diện người dùng cũ ở bên trái, thẻ hiển thị tài nguyên của trang được gọi là Mạng, còn trong giao diện người dùng mới ở bên phải, thẻ này có tên là Trang

Bản cập nhật về giao diện tối

Chrome 67 có một số thay đổi nhỏ trong bảng phối màu của giao diện tối. Ví dụ: các biểu tượng điểm ngắt và dòng thực thi hiện tại bây giờ sẽ có màu xanh lục.

Ảnh chụp màn hình biểu tượng điểm ngắt mới và bảng phối màu dòng thực thi hiện tại.

Hình 11 Ảnh chụp màn hình biểu tượng điểm ngắt mới và bảng phối màu dòng thực thi hiện tại

Tính minh bạch của chứng chỉ trong bảng điều khiển Bảo mật

Bảng điều khiển Bảo mật hiện báo cáo thông tin về tính minh bạch của chứng chỉ.

Thông tin về tính minh bạch của chứng chỉ trong bảng Bảo mật.

Hình 12 Thông tin về tính minh bạch của chứng chỉ trong bảng Bảo mật

Tách biệt trang web trong bảng điều khiển Hiệu suất

Nếu bạn đã bật tính năng Cách ly trang web, thì bảng điều khiển Performance (Hiệu suất) sẽ cung cấp biểu đồ ngọn lửa cho từng quy trình để bạn có thể xem tổng công việc mà mỗi quy trình gây ra.

Biểu đồ ngọn lửa trên mỗi quá trình trong bản ghi hiệu suất.

Hình 13. Biểu đồ ngọn lửa trên mỗi quá trình trong bản ghi biểu diễn

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