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

Kayce Basques
Kayce Basques
X GitHub

Các tính năng mới và thay đổi lớn sắp có 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 Mạng rồi nhấn tổ hợp phím Command+F (Mac) hoặc Control+F (Windows, Linux, ChromeOS) để mở ngăn Tìm kiếm mạng mới. 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 cụm từ tìm kiếm mà bạn cung cấp.

Tìm kiếm văn bản "cache-control" 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 mạng mới

Nhấp vào Khớp chữ hoa chữ thường Khớp chữ hoa/chữ thường để đặt cụm từ tìm kiếm của bạn thành 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ả khớp với mẫu 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 xuôi.

Cụm từ tìm kiếm biểu thức chính quy trong ngăn Tìm kiếm mạng.

Hình 2. Cụm từ tìm kiếm 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 chung) hiện 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. Giờ đây, công cụ này cũng in kết quả theo định dạng dễ đọc để hỗ trợ khả năng quét.

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 (Mac) hoặc Control+Shift+F (Windows, Linux, ChromeOS) để mở Global Search (Tìm kiếm chung). Bạn cũng có thể mở bảng điều khiển này 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 một biến CSS, 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ề 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 bên cạnh color: var(--main-color), trong khi giao diện người dùng mới ở bên phải có bản xem trước màu

Sao chép dưới dạng lệnh 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 dưới dạng tìm nạp) để sao chép mã tương đương với fetch() cho yêu cầu đó vào bảng nhớ tạm.

Sao chép mã tương đương với fetch() 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 sẽ tạo ra 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

Kiểm tra mới

Bảng điều khiển 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 chế độ cài đặt khung nhìn và tác nhân người dùng trên máy tính. Nói cách khác, bạn có thể ngăn bảng điều khiển Audits (Kiểm tra) mô phỏng thiết bị di động.
  • Tắt tính năng điều tiết mạng và CPU.
  • Giữ lại 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 để định cấu hình quy trình kiểm tra.

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 View Trace (Xem dấu vết) để xem dữ liệu hiệu suất tải mà quy trình kiểm tra của bạn dựa vào trong bảng điều khiển Performance (Hiệu suất).

Nút View Trace (Xem dấu vết).

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

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

Nếu thường xuyên làm việc với vòng lặp for, vòng lặp do...while hoặc đệ quy, thì có thể bạn đã vô tình thực thi 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 Tiếp tục thực thi tập lệnh Tiếp tục.
  3. Giữ Resume Script Execution (Tiếp tục thực thi tập lệnh) Tiếp tục rồi chọn Stop Current JavaScript Call (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ộ hẹn giờ setInterval(). Khi nhấp vào Start Infinite Loop (Bắt đầu vòng lặp vô hạn), một vòng lặp do...while sẽ chạy không ngừng. Khoảng thời gian này tiếp tục vì nó không chạy khi bạn chọn 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 mục Thời gian người dùng để xem các chỉ số Thời gian người dùng trong các thẻ Tóm tắt, Từ dưới lên, Cây lệnh gọi và Nhậ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ẻ Bottom-Up (Từ dưới lên). Thanh màu xanh dương ở bên trái mục Thời gian người dùng cho biết mục này đã được chọn.

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

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

Bảng điều khiển Bộ nhớ hiện liệt kê rõ ràng tất cả các thực thể máy ảo JavaScript liên kết với một trang, thay vì ẩn các thực thể đó sau trình đơn thả xuống 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 ở giao diện người dùng mới ở bên phải, các thực thể này được 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 MB và 13.3 MB. Giá trị 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ổ 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.

Đổi tên thẻ Mạng 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 đặt 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ẻ cho thấy 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 gọi là Trang

Nội dung cập nhật về 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ụ: biểu tượng điểm ngắt và dòng thực thi hiện tại hiện 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 của 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 của 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 đ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ính năng Cách ly 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 hiện sẽ cung cấp biểu đồ hình ngọn lửa cho mỗi quy trình để bạn có thể xem tổng số công việc mà mỗi quy trình đang gây ra.

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

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

Tải các 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 cho phép bạn sử dụng 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à giúp bạn tìm thấy vấn đề trên trang web của mình trước khi người dùng phát hiện ra!

Liên hệ với nhóm Chrome DevTools

Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng mới, bản cập nhật 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.

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.