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

Chào mừng bạn! Các tính năng mới và thay đổi lớn sắp ra mắt trong Công cụ cho nhà phát triển trong Chrome 60 bao gồm:

Hãy xem phiên bản video của những ghi chú phát hành này ở bên dưới hoặc đọc tiếp để tìm hiểu thêm.

Tính năng mới

Bảng điều khiển Kiểm tra mới, do Lighthouse cung cấp

Bảng điều khiển Kiểm tra hiện sử dụng công cụ Lighthouse. Lighthouse cung cấp một tập hợp các bài kiểm thử toàn diện để đo lường chất lượng trang web.

Điểm số ở đầu cho Ứng dụng web tiến bộ, Hiệu suất, Hỗ trợ tiếp cậnCác phương pháp hay nhất là điểm số tổng hợp cho từng danh mục đó. Phần còn lại của báo cáo là thông tin chi tiết về từng bài kiểm tra quyết định điểm số của bạn. Cải thiện chất lượng trang web của bạn bằng cách khắc phục các lượt kiểm thử không đạt.

Báo cáo Lighthouse

Hình 1 Báo cáo Lighthouse

Cách kiểm tra một trang:

  1. Nhấp vào thẻ Inspects (Kiểm tra).
  2. Nhấp vào Thực hiện kiểm tra.
  3. Nhấp vào Chạy quy trình kiểm tra. Lighthouse thiết lập Công cụ cho nhà phát triển để mô phỏng thiết bị di động, chạy một loạt quy trình kiểm thử trên trang, sau đó hiển thị kết quả trong bảng điều khiển Inspections (Kiểm tra).

Lighthouse tại Google I/O 2017

Hãy xem bài nói chuyện về Công cụ cho nhà phát triển tại Google I/O '17 dưới đây để tìm hiểu thêm về tính năng tích hợp của Lighthouse trong Công cụ cho nhà phát triển.

Đóng góp cho Lighthouse

Lighthouse là một dự án nguồn mở. Để tìm hiểu thêm về cách hoạt động và cách đóng góp cho tính năng này, hãy xem bài nói chuyện trên Lighthouse từ Google I/O '17 dưới đây.

Bạn có ý tưởng kiểm tra bằng Lighthouse? Hãy đăng tại đây!

Huy hiệu của bên thứ ba

Hãy sử dụng huy hiệu của bên thứ ba để hiểu rõ hơn về các thực thể đang đưa ra yêu cầu mạng trên một trang, đăng nhập vào Console và thực thi JavaScript.

Di chuột qua huy hiệu của bên thứ ba trong bảng điều khiển Mạng

Hình 2. Di chuột qua huy hiệu của bên thứ ba trong bảng điều khiển Mạng

Di chuột qua huy hiệu của bên thứ ba trong Bảng điều khiển

Hình 3. Di chuột qua huy hiệu của bên thứ ba trong Bảng điều khiển

Cách bật huy hiệu của bên thứ ba:

  1. Mở Trình đơn lệnh.
  2. Chạy lệnh Show third party badges.

Sử dụng lựa chọn Nhóm theo sản phẩm trong thẻ Cây cuộc gọiTừ dưới lên để nhóm hoạt động ghi lại hiệu suất theo các thực thể bên thứ ba đã tạo ra hoạt động đó. Xem bài viết Bắt đầu phân tích hiệu suất thời gian chạy để tìm hiểu cách phân tích hiệu suất bằng Công cụ cho nhà phát triển.

Nhóm theo sản phẩm trong thẻ Từ dưới lên

Hình 4. Nhóm theo sản phẩm trong thẻ Từ dưới lên

Một cử chỉ mới cho thao tác Tiếp tục đến đây

Giả sử bạn đang tạm dừng ở dòng 25 của tập lệnh và bạn muốn chuyển đến dòng 50. Trước đây, bạn có thể đặt một điểm ngắt trên dòng 50 hoặc nhấp chuột phải vào dòng đó rồi chọn Continue to here (Tiếp tục đến đây). Nhưng giờ đây, đã có một cử chỉ nhanh hơn để xử lý quy trình công việc này.

Khi duyệt qua các đoạn mã, hãy giữ phím Command (máy Mac) hoặc Control (máy tính Windows, Linux) rồi nhấp để tiếp tục đến dòng mã đó. Công cụ cho nhà phát triển làm nổi bật các đích đến có thể nhảy bằng màu xanh dương.

Tiếp tục đến đây

Hình 5. Tiếp tục đến đây

Hãy xem bài viết Bắt đầu gỡ lỗi JavaScript để tìm hiểu kiến thức cơ bản về cách gỡ lỗi trong Công cụ cho nhà phát triển.

Chuyển sang chế độ không đồng bộ

Một chủ đề lớn của nhóm Công cụ cho nhà phát triển trong tương lai gần là giúp người dùng có thể dự đoán việc gỡ lỗi mã không đồng bộ và cung cấp cho bạn toàn bộ nhật ký thực thi không đồng bộ.

Cử chỉ mới cho Tiếp tục đến đây cũng hoạt động với mã không đồng bộ. Khi bạn giữ Command (máy Mac) hoặc Control (Windows, Linux), Công cụ cho nhà phát triển sẽ làm nổi bật các đích đến không đồng bộ có thể nhảy bằng màu xanh lục.

Hãy xem bản minh hoạ dưới đây trong bài nói chuyện của Công cụ cho nhà phát triển tại I/O để biết ví dụ.

Các thay đổi

Bản xem trước đối tượng chứa nhiều thông tin hơn trong Console

Trước đây, khi bạn ghi nhật ký hoặc đánh giá một đối tượng trong Console, Play Console sẽ chỉ hiển thị Object, điều này không đặc biệt hữu ích. Giờ đây, Bảng điều khiển cung cấp thêm thông tin về nội dung của đối tượng.

Cách sử dụng Bảng điều khiển để xem trước đối tượng

Hình 6. Cách sử dụng Bảng điều khiển để xem trước đối tượng

Cách Console xem trước đối tượng

Hình 7. Cách Console xem trước đối tượng

Trình đơn chọn bối cảnh chứa nhiều thông tin hơn trong Bảng điều khiển

Trình đơn Lựa chọn ngữ cảnh của Bảng điều khiển hiện cung cấp thêm thông tin về các ngữ cảnh có sẵn.

  • Tiêu đề mô tả định nghĩa của từng mặt hàng.
  • Phụ đề bên dưới tiêu đề mô tả miền nơi bắt nguồn của mặt hàng.
  • Di chuột qua một ngữ cảnh iframe để làm nổi bật ngữ cảnh đó trong khung nhìn.

Trình đơn Lựa chọn ngữ cảnh mới

Hình 8. Khi di chuột qua một iframe trong trình đơn Lựa chọn theo bối cảnh mới, bạn sẽ thấy iframe đó trong khung nhìn

Thông tin cập nhật theo thời gian thực trong thẻ Mức độ phù hợp

Khi ghi lại mức độ sử dụng mã trong Chrome 59, thẻ Phạm vi bao phủ sẽ chỉ hiển thị "Bản ghi..." mà không hiển thị mã nào đang được sử dụng. Giờ đây, thẻ Phạm vi bao phủ cho bạn biết mã đang được sử dụng theo thời gian thực.

Tải và tương tác với một trang bằng thẻ Mức độ phù hợp cũ

Hình 9. Tải và tương tác với một trang bằng thẻ Phạm vi lập chỉ mục

Tải và tương tác với một trang bằng thẻ Mức độ phù hợp mới

Hình 10. Tải và tương tác với một trang bằng thẻ Phạm vi bao phủ mới

Các tuỳ chọn điều tiết mạng đơn giản hơn

Các trình đơn điều tiết mạng trong bảng MạngHiệu suất đã được đơn giản hoá để chỉ bao gồm 3 tuỳ chọn: Ngoại tuyến, 3G chậm (phổ biến ở những nơi như Ấn Độ) và 3G nhanh (phổ biến ở những nơi như Hoa Kỳ).

Các lựa chọn hạn chế băng thông mạng mới

Hình 11 Các lựa chọn hạn chế băng thông mạng mới

Các tuỳ chọn điều tiết đã được tinh chỉnh để phù hợp với các công cụ điều tiết cấp hạt nhân khác. Công cụ cho nhà phát triển không còn hiển thị các chỉ số độ trễ, tải xuống và tải lên bên cạnh mỗi tuỳ chọn, vì các giá trị đó đều gây hiểu lầm. Mục tiêu là để đáp ứng trải nghiệm thực tế của mỗi lựa chọn.

Các ngăn xếp không đồng bộ được bật theo mặc định

Hộp đánh dấu Không đồng bộ đã bị xoá khỏi bảng điều khiển Nguồn. Dấu vết ngăn xếp không đồng bộ hiện được bật theo mặc định. Trước đây, bạn chọn sử dụng tuỳ chọn này do chi phí hiệu suất. Mức hao tổn hiện tại là đủ tối thiểu để bật tính năng này theo mặc định. Nếu muốn tắt dấu vết ngăn xếp không đồng bộ, bạn có thể tắt các tính năng này trong phần Cài đặt hoặc bằng cách chạy lệnh Do not capture async stack traces trong Trình đơn lệnh.

Công cụ cho nhà phát triển tại Google I/O 2017

Hãy xem bài nói chuyện của Paul Ailen huyền thoại dưới đây để tìm hiểu thêm về những công việc mà nhóm Công cụ cho nhà phát triển đã làm trong năm qua cũng như các chủ đề lớn mà họ sẽ giải quyết trong tương lai gần.

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