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

Kayce Basques

Các tính năng mới và thay đổi chính sắp ra mắt trong Công cụ cho nhà phát triển trong Chrome 67 bao gồm:

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

Mở bảng điều khiển Network (Mạng), sau đó nhấn Command+F (Mac) hoặc Control+F (Windows, Linux, ChromeOS) để mở ngăn Network Search (Tìm kiếm mạng). Công cụ cho nhà phát triển tìm kiếm tiêu đề và nội dung của tất 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 'kiểm soát bộ nhớ đệm' bằng ngăn Tìm kiếm mạng mới.

Hình 1 Tìm kiếm văn bản cache-control bằng ngăn Tìm kiếm trên 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 để đưa ra truy vấn phân biệt chữ hoa chữ thường. Nhấp vào Sử dụng biểu thức chính quy Sử dụng biểu thức chính quy để hiển thị mọi kết quả phù hợp mẫu mà bạn cung cấp. Bạn không cần phải gói 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.

Giao diện người dùng của ngăn Global Search (Tìm kiếm toàn cầu) hiện khớp với giao diện người dùng của ngăn Network Search (Tìm kiếm trong mạng) mới. Hiện tại cũng hiển thị kết quả in đẹp để hỗ trợ khả năng quét tìm.

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 Command+Option+F (máy Mac) hoặc Ctrl+Shift+F (Windows, Linux, ChromeOS) để mở Chung Tìm kiếm. Bạn cũng có thể mở tệp đó thông qua Trình đơn lệnh.

Bản xem trước giá trị biến CSS trong ngăn 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 CSS thì Công cụ cho nhà phát triển hiện 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 rồi chọn Sao chép > Sao chép dưới dạng tìm nạp để sao chép fetch() tương đương với yêu cầu đó vào bảng nhớ tạm.

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

Hình 5. Sao chép mã tương đương 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"
});

Cập nhật bảng điều khiển kiểm tra

Lượt kiểm tra mới

Bảng điều khiển Inspects (Kiểm tra) có 2 quy trình kiểm tra mới, bao gồm:

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

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

  • Giữ nguyên khung nhìn trên màn hình và chế độ cài đặt tác nhân người dùng. Nói cách khác, bạn có thể ngăn phần Kiểm tra bảng điều khiển 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 cấu hình kiểm tra mới.

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

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 hiệu suất tải mà kết quả kiểm tra của bạn trong bảng 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 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 một vòng lặp vô hạn trong khi phát triển trang web của bạn. Để dừng vòng lặp vô hạn, giờ đây, bạn có thể:

  1. Mở bảng điều khiển Sources (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 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 Lệnh gọi JavaScript hiện tại Dừng.

Trong video trên, đồng hồ đang được cập nhật thông qua một bộ tính giờ setInterval(). Nhấp vào Bắt đầu Infinite Loop 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ì đang chạy khi Stop Current JavaScript Call (Dừng cuộc gọi JavaScript hiện tại) Dừng đã chọn.

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

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

Xem các chỉ số đo 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 thời gian này đã được chọn.

Nhìn chung, bạn hiện có thể chọn bất kỳ mục nào (Luồng chính, Thời gian người dùng, GPU, ScriptStreamer, v.v.) và xem hoạt động của mục đó trong các thẻ.

Chọn các thực thể máy ảo JavaScript trong Bảng điều khiển bộ nhớ

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

Ả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), trong khi đó trong giao diện người dùng mới ở bên phải, các mục này được hiển thị ở mục Select (Chọn) Bảng thực thể máy ảo JavaScript

Bên cạnh thực thể developers.google.com có 2 giá trị: 8.7 MB và 13.3 MB. Bên trái biểu thị bộ nhớ được phân bổ do JavaScript. Giá trị bên phải đại diện cho tất cả bộ nhớ hệ điều hành đang được phân bổ nhờ phiên bản máy ảo đó. Giá trị bên phải bao gồm 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 đã đổi tên thành thẻ Trang

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

Hai cửa sổ Công cụ cho nhà phát triển cạnh nhau, minh hoạ việc thay đổi tên.

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

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

Chrome 67 có một số thay đổi nhỏ đối với 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 có màu xanh lục.

Ảnh chụp màn hình biểu tượng điểm ngắt mới và dòng bảng phối màu 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à dòng bảng phối màu 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

Giờ đây, bảng điều khiển Bảo mật sẽ 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 điều khiển Bảo mật.

Hình 12 Thông tin về tính minh bạch của chứng chỉ trong bảng điều khiển 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 Hiệu suất sẽ cung cấp một biểu đồ hình ngọn lửa cho từng quy trình để bạn có thể thấy tổng công việc mà mỗi quá trình tạo ra.

Biểu đồ hình ngọn lửa theo từng quy trình trong bản ghi Hiệu suất.

Hình 13. Biểu đồ hình ngọn lửa theo từng quy trình trong bản ghi Hiệu suấ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 kỳ 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ố 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 của chúng tôi trong Video trên YouTube hoặc Mẹo trong Công cụ cho nhà phát triển 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 bài Tính năng mới trong Công cụ cho nhà phát triển.