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 console.log() cuộc gọi.

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ý.

   

   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.

   

   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).

   

   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 đó vào một đối tượng (ví dụ: {TodoApp}) để đăng xuất tên và giá trị của phiên bản trong Console. 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 biểu thị Điểm ghi nhật ký.

   

   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 ghi nhật ký vào Bảng điều khiển.

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 có chứa các thông tin thông tin như cỡ chữ, màu phông chữ, tỷ lệ tương phản và kích thước mô hình hộp.

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 .

   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 quảng cáo ở 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.

   

   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.

   

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

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

   

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

3. Nhấp vào biểu tượng Tải lại . DevTools tải lại trang và ghi lại lượng mã đã 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 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 được 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 để chuyển đến thư gần đây nhất (hoặc kết quả của một bản đánh giá) biểu thức). 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 Nhấn 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).

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.

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.

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.) bật).

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 tỷ lệ tương phản AAA đề xuất. Dòng AA đã có từ phiên bản Chrome 65.

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

Màu giữa 2 đường kẻ đại diện cho những màu đáp ứng đề xuất của AA nhưng không đáp ứng AAA đề xuất. 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ỳ nội dung nào bên dưới dòng dưới đều là AAA, và bất kỳ mục nào ở trên dòng trên thậm chí không đáp ứng được đề xuất của AA.

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

   

   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.

   

   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.

   

   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.

   

   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ã.

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 phần Cài đặt > Lựa chọn ưu tiên > Nguồn 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 .

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 Mạng khi kiểm tra kết nối cổng web.

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ố Công cụ cho nhà phát triển bằng cách sử dụng Tuỳ chọn khác   > 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 của chúng tôi trong Video trên YouTube hoặc Mẹo trong Công cụ cho nhà phát triển 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 bài Tính năng mới trong Công cụ cho nhà phát triển.