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

Kayce Basques

Sau đây là những điểm 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 Logpoints để ghi thông điệp vào Bảng điều khiển 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 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 Logpoint.

   

   Hình 1 Thêm một đ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 vào Bảng điều khiển.

   

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

   Mẹo! Khi ghi nhật ký một biến (ví dụ: TodoApp), hãy đặt biến đó trong một đối tượng (ví dụ: {TodoApp}) để ghi nhật ký 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à Cú pháp rút gọn 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 Trình chỉnh sửa điểm ngắt để lưu. Huy hiệu màu cam ở trên số dòng biểu thị Logpoint.

   

   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, Công cụ cho nhà phát triển sẽ ghi kết quả của biểu thức Logpoint vào 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

Hãy xem Vấn đề số 700519 của Chromium để báo cáo lỗi hoặc đề xuất cải tiến.

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

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

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

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

1. Nhấp vào Kiểm tra .

   Mẹo! Di chuột lên Kiểm tra để xem phím tắt của công cụ này.

2. Trong khung hiển thị, hãy di chuột lên nút.

Xuất dữ liệu về mức độ phù hợp của mã

Giờ đây, bạn có thể xuất dữ liệu mức độ phù hợp của mã dưới dạng tệp JSON. JSON 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 của mã đã được sử dụng. start là độ lệch bắt đầu của một phạm vi đã được dùng. end là độ lệch kết thúc. text là toàn văn nội dung 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, hệ thống đã sử dụng nhóm quy tắc đầu tiên và cuối cùng, nhưng không sử dụng nhóm quy tắc ở giữa.

Cách phân tích lượng mã được 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 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.

   

   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ã được dùng so với lượng mã được gửi.

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

Độ bao phủ 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ạm vi cung cấp.

Hãy xem vấn đề số 717195 của Chromium để báo cáo lỗi hoặc đề xuất cải tiến.

Điều hướng trong Bảng điều khiển bằng bàn phím

Giờ đây, bạn có thể dùng bàn phím để di chuyển trong Console. Dưới đây là một ví dụ.

Khi bạn nhấn tổ hợp phím Shift+Tab, tiêu điểm sẽ chuyển đến tin nhắn cuối cùng (hoặc kết quả của một biểu thức được đánh giá). Nếu tin nhắn có 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. Khi bạn nhấn phím Enter, đường liên kết sẽ mở ra trong một thẻ mới. Khi bạn nhấn phím mũi tên Trái, toàn bộ thư sẽ được đánh dấu (xem Hình 13).

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

Khi bạn nhấn phím mũi tên Lên, tiêu điểm sẽ chuyển đến đườ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

Khi bạn nhấn phím mũi tên Lên một lần nữa, toàn bộ tin nhắn sẽ được lấy tiêu điểm.

Hình 13. Tập trung vào toàn bộ tin nhắn

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

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

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

Hãy xem vấn đề số 865674 của Chromium để báo cáo lỗi hoặc đề xuất cải tiế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. Đường AA đã xuất hiện từ Chrome 65.

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

Màu sắc giữa 2 đường 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 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 là AAA và mọi thứ bên trên đường trên thậm chí không đáp ứng được đề xuất AA.

Mẹo! Nói 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ì một lý do nào đó, hãy cố gắng đáp ứng ít nhất đề xuất AA.

Hãy xem phần 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 đề số 879856 của Chromium để báo cáo lỗi hoặc đề xuất cải tiến.

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

Giờ đây, thẻ Sensors (Cảm biế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 (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 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 độ, rồi nhấp vào Thêm.

   

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

Hãy xem vấn đề số 649657 của Chromium để báo cáo lỗi hoặc đề xuất cải tiến.

Thu gọn mã

Giờ đây, các bảng Nguồn và Mạng hỗ trợ tính năng thu gọn mã.

Hình 20. Các dòng từ 54 đến 65 đã được thu gọn

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

1. Nhấn 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 Code folding (Gấp mã).

Cách thu gọn một khối mã:

1. Di chuột lên 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 đề số 328431 của Chromium để báo cáo lỗi hoặc đề xuất cải tiến.

Thẻ Tin nhắn

Thẻ Khung hình đã đượ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 một kết nối ổ cắm web.

Hình 21. Thẻ Tin nhắn

Hãy xem Vấn đề số 802182 của Chromium để báo cáo lỗi hoặc đề xuất cải tiế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 truy cập vào 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 các vấn đề trên trang web của mình trước khi người dùng tìm thấy!

Liên hệ với nhóm Chrome DevTools

Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng mới, nội dung cập nhật 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.
• Đăng bài trên X cho @ChromeDevTools.
• Để lại bình luận trên video "Có gì mới trong Công cụ cho nhà phát triển" trên YouTube hoặc video "Mẹo về Công cụ cho nhà phát triển" 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.