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 của 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.

   

   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.

   

   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.

   

   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 phím Enter hoặc nhấp ra ngoài Breakpoint Editor (Trình chỉnh sửa điểm ngắt) để lưu. Huy hiệu màu cam trên số dòng đại diện cho Điểm ghi nhật ký.

   

   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.

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

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

Chú giải công cụ chi tiết ở Chế độ kiểm tra

Khi kiểm tra một nút, DevTools hiện hiển thị một chú giải công cụ mở rộng chứa 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.

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 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à độ lệch kết thúc. text là toàn bộ văn bản 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, 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 Ctrl+Shift+P hoặc Command+Shift+P (Mac) để mở 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 phạm vi bảo hiểm) rồi nhấn Enter.

   

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

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

   

   Hình 9. Thẻ Phạm vi

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ã đượ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 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 đề #717195 của Chromium để 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ụ.

Khi nhấn tổ hợp phím Shift+Tab, tiêu điểm sẽ chuyển đến thông báo 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 gần đây nhất sẽ được làm nổi bật trước tiên. 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).

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

Khi nhấn phím mũi tên Up (Lên), tiêu điểm sẽ chuyển sang đường liên kết tiếp theo.

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

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

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.

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.

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

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, mọi thứ ở cùng phía với 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 được đề 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 phần Tỷ lệ tương phản trong công cụ Color Picker (Bộ 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 thiện.

Lưu các tuỳ chọn ghi đè vị trí địa lý tuỳ 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.

   

   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 phần Vị trí địa lý, hãy nhấp vào Quản lý. Mở phần Cài đặt > Vị trí địa lý.

   

   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.

   

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

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 Settings (Cài đặt) > Preferences (Lựa chọn ưu tiên) > Sources (Nguồn), hãy bật tính năng Code folding (Gập 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 Gập .

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

Hình 21. Thẻ Tin nhắn

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

Tải các 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 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.

• Gửi ý kiến phản hồi và yêu cầu về tính năng cho chúng tôi tại 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 biểu tượng more_vert Tuỳ chọn khác > Trợ giúp > Báo cáo sự cố của Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
• Gửi tweet đến @ChromeDevTools.
• Để lại bình luận trên video YouTube về tính năng mới trong DevTools hoặc video YouTube về mẹo sử dụng DevTools.

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.