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 về Công cụ cho nhà phát triển trên 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 Console mà không làm lộn xộn mã của bạn bằng các lệnh gọi console.log().

Cách thêm đ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ý. Breakpoint Editor (Trình chỉnh sửa điểm ngắt) sẽ 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 Trình chỉnh sửa điểm ngắt, hãy nhập biểu thức mà bạn muốn ghi vào Console.

    Nhập biểu thức Điểm ghi nhật

    Hình 3. Nhập biểu thức Điểm ghi nhật

    Mẹo! Khi đăng xuất một biến (ví dụ: TodoApp), hãy gói biến đó vào một đối tượng (ví dụ: {TodoApp}) để đăng xuất tên và giá trị của biến đó trong Bảng điều khiển. Hãy xem phần Luôn ghi nhật ký đối tượng và Tóm 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 phím 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 ghi nhật ký.

    Huy hiệu Logpoint màu cam trên dòng 174

    Hình 4. Huy hiệu Logpoint màu cam trên dòng 174

Vào lần tiếp theo mà 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 ghi nhật ký vào Bảng điều khiển.

Kết quả của biểu thức Logpoint trong Bảng điều khiển

Hình 5. Kết quả của biểu thức Logpoint trong Bảng điều khiển

Xem Vấn đề về Chromium #700519 để báo cáo lỗi hoặc đề xuất biện pháp cải thiện.

Chú giải công cụ 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ị một 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 một nút

Hình 6. Kiểm tra một 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 một nút.

    Mẹo! Di chuột qua phần Kiểm tra để xem phím tắt tương ứng.

  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 độ bao phủ của 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 một dải ô đã được sử dụng. end là mức chênh 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 lượng mã được sử dụng khi tải và xuất dữ liệu:

  1. Nhấn tổ hợp phím Control+Shift+P hoặc Command+Shift+P (máy 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 Hiển thị mức độ phù hợp rồi nhấn phím 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 vận chuyển.

  4. Nhấp vào biểu tượng 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 lập chỉ mục.

Xem Vấn đề về Chromium #717195 để báo cáo lỗi hoặc đề xuất biện pháp cải thiện.

Thao tác trên Bảng điều khiển bằng bàn phím

Giờ đây, bạn có thể sử 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 sẽ chuyển thư cuối cùng (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 đánh dấu trước. Nhấn phím Enter để mở đường liên kết trong một thẻ mới. Nhấn phím mũi tên Trái sẽ làm nổi bật toàn bộ thông báo (xem Hình 13).

Tập trung vào đường liên kết

Hình 11 Tập trung vào đường liên kết

Nhấn phím mũi tên Lên để chuyển đến đườ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 một lần nữa để tập trung vào toàn bộ thư.

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

Thao tác nhấn phím mũi tên Phải sẽ mở rộng một 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 sẽ thu gọn một 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 biện pháp cải thiện.

Dò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ó mặt kể từ 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ị màu đáp ứng đề xuất AA nhưng không đáp ứng đề xuất AAA. Khi một màu đáp ứng đề xuất của AAA, mọi nội dung ở cùng phía với màu đó cũng đáp ứng đề xuất. Ví dụ: trong Hình 15, mọi nội dung bên dưới dòng dưới đều là AAA và mọi nội dung phía trên dòng trên thậm chí 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ủa các trang bằng cách tăng lượng văn bản đáp ứng đề xuất về AAA. Nếu không thể đáp ứng đề xuất của AAA vì lý do nào đó, ít nhất hãy cố gắng đáp ứng đề xuất của AA.

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.

Xem Vấn đề về Chromium #879856 để báo cáo lỗi hoặc đề xuất biện pháp cải thiện.

Lưu ghi đè vị trí địa lý tuỳ chỉnh

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

  1. Nhấn tổ hợp phím Control+Shift+P hoặc Command+Shift+P (máy 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 phím Enter. Thẻ Cảm biến sẽ mở ra.

    Thẻ Cảm biến

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

  3. Trong phần 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ý tuỳ chỉnh

    Hình 19. Thêm vị trí địa lý tuỳ chỉnh

Xem Vấn đề về Chromium #649657 để báo cáo lỗi hoặc đề xuất biện pháp cải thiện.

Thu gọn mã

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

Các dòng từ 54 đến 65 đã được gấp lại

Hình 20. Các dòng từ 54 đến 65 đã được gấp lại

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 phần 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 bắt đầu khối.
  2. Nhấp vào biểu tượng Gập Đóng.

Xem Vấn đề về Chromium #328431 để báo cáo lỗi hoặc đề xuất biện pháp cải thiện.

Thẻ Thông báo

Thẻ Khung đã được đổi tên thành thẻ Tin nhắn. Thẻ này chỉ xuất hiện trong bảng điều khiển Network (Mạng) khi kiểm tra kết nối với ổ cắm web.

Thẻ Thông báo

Hình 21 Thẻ Thông báo

Xem Vấn đề về Chromium #802182 để báo cáo lỗi hoặc đề xuất biện pháp cải thiệ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