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 DevTools trong Chrome 73.

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

Điểm ghi nhật ký

Sử dụng Logpoint để ghi nhật ký thông báo vào Console mà không làm lộn xộn mã 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 Logpoint.

    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 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 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 Bảng điều khiển. Hãy 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 Logpoint màu cam trên dòng 174

Vào lần tiếp theo dòng này thực thi, DevTools sẽ ghi lại kết quả của biểu thức Logpoint vào Console.

Kết quả của biểu thức Logpoint trong Console

Hình 5. Kết quả của biểu thức Logpoint 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ú giải công cụ chi tiết ở 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 lên 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 mức độ sử dụng mã

Giờ đây, bạn có thể xuất dữ liệu 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à DevTools đã phân tích. ranges mô tả các phần của mã đã được sử dụng. start là độ dời bắt đầu cho một dải ô đã sử dụng. end là giá trị bù trừ cuối. text là văn bản đầy đủ của tệp.

Trong ví dụ trên, dải từ 0 đến 21 tương ứng với body { margin: 1em; } và dải từ 45 đến 67 tương ứng với h1 { color: #317EFB; }. Nói cách khác, các 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.

Để phân tích 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ẻ Phạm vi

  3. Nhấp vào biểu tượng Tải lại Tải lại. DevTools 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 DevTools duy trì. Xem phần Phạm vi áp dụng.

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

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

Giờ đây, bạn có thể sử dụng bàn phím để di chuyển trong Console. 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ư 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 đường liên kết tiếp theo.

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

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

Nhấn lại phím mũi tên Up (Lên) để đặt tiêu điểm 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ộ tin nhắn

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

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

Khi nhấn phím mũi tên Trái, một tin nhắn hoặc kết quả đã mở rộng sẽ thu gọn.

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

Giờ đây, Công cụ chọn màu sẽ hiển thị một dòng thứ hai để cho biết những màu nào đáp ứng đề xuất về tỷ lệ tương phản AAA. Dòng AA đã có 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 sắc giữa 2 đường kẻ này thể hiện những 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 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, mọi thứ bên dưới đường dưới cùng là AAA và mọi thứ bên trên đường trên cùng thậm chí không đáp ứng đề xuất 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 AAA. Nếu không thể đáp ứng đề xuất AAA vì lý do nào đó, hãy cố gắng đáp ứng ít nhất là đề xuất 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.

Xem vấn đề Chromium #879856 để báo cáo lỗi hoặc đề xuất biện pháp cải tiế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 tuỳ chọn ghi đè vị trí địa lý tuỳ chỉnh.

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

    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 phần Định vị đị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 độ, rồi nhấp vào Thêm.

    Thêm thông tin vị trí địa lý tuỳ chỉnh

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

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

Thu gọn mã

Các bảng điều khiển Sources (Nguồn) và Network (Mạng) hiện hỗ trợ tính năng gập 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 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 thu gọn 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 Fold Đóng.

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

Thẻ Tin nhắn

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

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 các 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á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 DevTools, 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 Công cụ của Chrome cho nhà phát triển

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