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

Kayce Basques

Dưới đây là các tính năng mới trong Công cụ cho nhà phát triển trong Chrome 73.

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

Điểm ghi nhật ký

Sử dụng Điểm ghi nhật ký để ghi nhật ký thông báo vào Bảng điều khiển mà không làm lộn xộn mã của bạn với các lệnh gọi console.log().

Cách thêm một điểm ghi nhật ký:

  1. Nhấp chuột phải vào số dòng mà bạn muốn thêm Điểm ghi nhật ký.

    Thêm Điểm ghi nhật ký

    Hình 1 Thêm Điểm ghi nhật ký

  2. Chọn Thêm điểm ghi nhật ký. Trình chỉnh sửa điểm ngắt bật lên.

    Trình chỉnh sửa điểm ngắt

    Hình 2. Trình chỉnh sửa điểm ngắt

  3. Trong Breakpoint Editor (Trình chỉnh sửa điểm ngắt), hãy nhập biểu thức mà bạn muốn ghi nhật ký vào Console (Bảng điều khiển).

    Nhập biểu thức Logpoint

    Hình 3. Nhập biểu thức Logpoint

    Mẹo! Khi đăng xuất một biến (ví dụ: TodoApp), hãy gói biến đó trong một đối tượng (ví dụ: {TodoApp}) để đăng xuất tên và giá trị của biến đó trong Console (Bảng điều khiển). Vui lòng xem phần Luôn ghi nhật ký đối tượng và Viết tắt giá trị thuộc tính đối tượng để tìm hiểu thêm về cú pháp này.

  4. Nhấn Enter hoặc nhấp vào bên ngoài Trình chỉnh sửa điểm ngắt để lưu. Huy hiệu màu cam ở đầu số dòng đại diện cho Điểm nhật ký.

    Huy hiệu Điểm ghi nhật ký màu cam trên dòng 174

    Hình 4. Huy hiệu Điểm ghi nhật ký màu cam trên dòng 174

Vào lần tiếp theo dòng thực thi, Công cụ cho nhà phát triển sẽ ghi lại kết quả của biểu thức Điểm nhật ký vào Bảng điều khiển.

Kết quả của biểu thức Điểm logic trong Console

Hình 5. Kết quả của biểu thức Điểm logic trong Console

Hãy xem Vấn đề về Chromium #700519 để báo cáo lỗi hoặc đề xuất cách cải thiện.

Chú thích chi tiết trong Chế độ kiểm tra

Khi kiểm tra một nút, Công cụ cho nhà phát triển hiện hiển thị phần chú thích mở rộng chứa các thông tin thường quan trọng như kích thước phông chữ, màu phông chữ, tỷ lệ tương phản và kích thước mô hình hộp.

Kiểm tra nút

Hình 6. Kiểm tra nút

Cách kiểm tra một nút:

  1. Nhấp vào biểu tượng Kiểm tra Kiểm tra nút.

    Mẹo! Di chuột qua Inspect (Kiểm tra) để xem phím tắt.

  2. Trong khung nhìn, hãy di chuột qua nút.

Xuất dữ liệu về mức độ sử dụng mã

Giờ đây, bạn có thể xuất dữ liệu về Mức độ sử dụng mã dưới dạng tệp JSON. JSON sẽ có dạng như sau:

[
  {
    "url": "https://wndt73.glitch.me/style.css",
    "ranges": [
      {
        "start": 0,
        "end": 21
      },
      {
        "start": 45,
        "end": 67
      }
    ],
    "text": "body { margin: 1em; } figure { padding: 0; } h1 { color: #317EFB; }"
  },
  ...
]

url là URL của tệp CSS hoặc JavaScript mà Công cụ cho nhà phát triển phân tích. ranges mô tả các phần mã đã được sử dụng. start là độ lệch bắt đầu của dải ô đã được sử dụng. end là độ lệch cuối. text là văn bản đầy đủ của tệp.

Trong ví dụ trên, phạm vi từ 0 đến 21 tương ứng với body { margin: 1em; } và phạm vi từ 45 đến 67 tương ứng với h1 { color: #317EFB; }. Nói cách khác, tập hợp quy tắc đầu tiên và cuối cùng đã được sử dụng còn quy tắc ở giữa thì không.

Cách phân tích số lượng mã được sử dụng khi tải trang và xuất dữ liệu:

  1. Nhấn tổ hợp phím Control+Shift+P hoặc Command+Shift+P (Mac) để mở Trình đơn Command.

    Trình đơn lệnh

    Hình 7. Trình đơn lệnh

  2. Bắt đầu nhập coverage, chọn Show Coverage (Hiện mức độ phù hợp) rồi nhấn Enter.

    Hiển thị Mức độ phù hợp

    Hình 8. Hiển thị Mức độ phù hợp

    Thẻ Phạm vi bao phủ sẽ mở ra.

    Thẻ Mức độ phù hợp

    Hình 9. Thẻ Mức độ phù hợp

  3. Nhấp vào biểu tượng Tải lại Tải lại. Công cụ cho nhà phát triển tải lại trang và ghi lại lượng mã được sử dụng so với lượng mã được chuyển đi.

  4. Nhấp vào biểu tượng Export (Xuất) Xuất để xuất dữ liệu dưới dạng tệp JSON.

Mức độ sử dụng mã cũng có trong Puppeteer, một công cụ tự động hoá trình duyệt do nhóm Công cụ cho nhà phát triển duy trì. Hãy xem phần Phạm vi bao phủ.

Hãy xem Vấn đề về Chromium #717195 để báo cáo lỗi hoặc đề xuất cách cải thiện.

Di chuyển trong Console bằng bàn phím

Giờ đây, bạn có thể dùng bàn phím để thao tác trên Bảng điều khiển. Dưới đây là một ví dụ.

Nhấn tổ hợp phím Shift+Tab để đặt tiêu điểm vào thông báo gần đây nhất (hoặc kết quả của một biểu thức được đánh giá). Nếu thư chứa đường liên kết, thì đường liên kết cuối cùng sẽ được làm nổi bật trước. Nhấn phím Enter để mở đường liên kết trong một thẻ mới. Khi nhấn phím mũi tên Trái, toàn bộ thông báo sẽ được làm nổi bật (xem Hình 13).

Đặt tiêu điểm vào một đường liên kết

Hình 11 Đặt tiêu điểm vào một đường liên kết

Nhấn phím mũi tên Lên để đặt tiêu điểm vào đường liên kết tiếp theo.

Tập trung vào một đường liên kết khác

Hình 12 Tập trung vào một đường liên kết khác

Nhấn phím mũi tên Lên để đặt tiêu điểm vào toàn bộ thư một lần nữa.

Tập trung vào toàn bộ thông điệp

Hình 13. Tập trung vào toàn bộ thông điệp

Nhấn phím mũi tên Phải sẽ mở rộng dấu vết ngăn xếp đã thu gọn (hoặc đối tượng, mảng, v.v.).

Mở rộng dấu vết ngăn xếp đã thu gọn

Hình 14. Mở rộng dấu vết ngăn xếp đã thu gọn

Nhấn phím mũi tên Trái để thu gọn thư hoặc kết quả mở rộng.

Hãy xem Vấn đề về Chromium #865674 để báo cáo lỗi hoặc đề xuất cách cải thiện.

Đường tỷ lệ tương phản AAA trong Công cụ chọn màu

Công cụ chọn màu hiện hiển thị dòng thứ hai để cho biết màu nào đáp ứng đề xuất về tỷ lệ tương phản AAA. Dòng AA đã có từ phiên bản Chrome 65.

Dòng AA (trên cùng) và dòng AAA (dưới cùng)

Hình 15. Dòng AA (trên cùng) và dòng AAA (dưới cùng)

Màu giữa 2 dòng biểu thị những màu đáp ứng đề xuất của AA nhưng không đáp ứng đề xuất AAA. Khi một màu đáp ứng đề xuất AAA, bất kỳ màu nào thuộc cùng phía của màu đó cũng đáp ứng đề xuất. Ví dụ: trong Hình 15, bất kỳ mục nào bên dưới dòng dưới đều là AAA và bất kỳ mục nào nằm trên dòng trên đều không đáp ứng đề xuất của AA.

Mẹo! Nhìn chung, bạn có thể cải thiện khả năng đọc các trang bằng cách tăng số lượng văn bản đáp ứng đề xuất AAA. Nếu không thể đáp ứng các đề xuất của AAA vì một số lý do, hãy cố gắng đáp ứng ít nhất các đề xuất của AA.

Hãy xem Tỷ lệ tương phản trong Công cụ chọn màu để tìm hiểu cách sử dụng tính năng này.

Hãy xem Vấn đề về Chromium #879856 để báo cáo lỗi hoặc đề xuất cách cải thiện.

Lưu phần ghi đè vị trí địa lý tùy chỉnh

Thẻ Cảm biến hiện cho phép bạn lưu các lượt ghi đè vị trí địa lý tùy chỉnh.

  1. Nhấn tổ hợp phím Control+Shift+P hoặc Command+Shift+P (Mac) để mở Trình đơn Command.

    Trình đơn lệnh

    Hình 16. Trình đơn lệnh

  2. Nhập sensors, chọn Show Sensors (Hiện cảm biến) rồi nhấn Enter. Thẻ Cảm biến sẽ mở ra.

    Thẻ Cảm biến

    Hình 17. Thẻ Cảm biến

  3. Trong mục Vị trí địa lý, hãy nhấp vào Quản lý. Cài đặt > Vị trí địa lý sẽ mở ra.

    Thẻ Vị trí địa lý trong phần Cài đặt

    Hình 18. Thẻ Vị trí địa lý trong phần Cài đặt

  4. Nhấp vào Thêm vị trí.

  5. Nhập tên vị trí, vĩ độ và kinh độ, sau đó nhấp vào Thêm.

    Thêm vị trí địa lý tùy chỉnh

    Hình 19. Thêm vị trí địa lý tùy chỉnh

Hãy xem Vấn đề về Chromium #649657 để báo cáo lỗi hoặc đề xuất cách cải thiện.

Thu gọn mã

Bảng điều khiển Sources (Nguồn) và Network (Mạng) hiện đã hỗ trợ tính năng thu gọn mã.

Các dòng 54 đến 65 đã được gập

Hình 20. Các dòng 54 đến 65 đã được gập

Cách bật tính năng thu gọn mã:

  1. Nhấn phím F1 để mở phần Cài đặt.
  2. Trong mục Cài đặt > Lựa chọn ưu tiên > Nguồn, hãy bật tính năng Thu gọn mã.

Cách gập một khối mã:

  1. Di chuột qua số dòng nơi khối bắt đầu.
  2. Nhấp vào biểu tượng Gấp Đóng.

Hãy xem Vấn đề về Chromium #328431 để báo cáo lỗi hoặc đề xuất cách cải thiện.

Thẻ Tin nhắn

Thẻ Khung đã được đổi tên thành thẻ Thông báo. Thẻ này chỉ có trong bảng điều khiển Network (Mạng) khi kiểm tra kết nối web socket.

Thẻ Tin nhắn

Hình 21. Thẻ Tin nhắn

Hãy xem Vấn đề về Chromium #802182 để báo cáo lỗi hoặc đề xuất cách cải thiệ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