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

Vấn đề về Chromium: 1410433.

Bảng điều khiển Phần tử hiện hiển thị URL cho các nút #document

Để giúp bạn gỡ lỗi iframe dễ dàng hơn, bảng điều khiển Elements (Phần tử) hiện hiển thị documentURL bên cạnh các nút #document.

Vấn đề về Chromium: 1376976.

Chính sách bảo mật nội dung hiệu quả trong bảng điều khiển Ứng dụng

Giờ đây, bạn có thể xem thông tin chi tiết về Chính sách bảo mật nội dung (CSP) của một khung đã kiểm tra. Để xem thông tin chi tiết, hãy chuyển đến Application (Ứng dụng) > Frames (Khung), chọn một khung rồi di chuyển xuống phần Content Security Policy (CSP) (Chính sách bảo mật nội dung (CSP)).

Vấn đề về Chromium: 1424714.

Cải thiện tính năng gỡ lỗi ảnh động

Trong thẻ Hoạt ảnh, giờ đây bạn có thể:

• Nhấp vào vị trí bất kỳ trên tiêu đề dòng thời gian để đặt con trỏ phát. Ảnh động sẽ tiếp tục phát nếu đang phát và dừng nếu không. Trước đây, bạn phải kéo thẻ đó.
• Thay đổi kích thước cột tên để xem tên đầy đủ của ảnh động.

Vấn đề về Chromium: 1492460, 1489721.

Hộp thoại "Bạn có tin tưởng mã này không?" trong phần Nguồn và cảnh báo tự XSS trong Console

Theo mặc định, thử nghiệm Hiện cảnh báo về XSS tự thực hiện khi dán mã đã được bật. Self-XSS (tự thực thi tập lệnh trên nhiều trang web) là một cuộc tấn công lừa bạn dán mã độc vào DevTools và cho phép kẻ tấn công kiểm soát tài khoản web và thông tin cá nhân của bạn.

Nếu bạn là người dùng mới của DevTools và cố gắng dán mã, thì bảng điều khiển Sources (Nguồn) sẽ hiển thị hộp thoại Do you trust this code? (Bạn có tin tưởng mã này không?) và Console (Bảng điều khiển) sẽ hiển thị một cảnh báo tương tự. Chỉ dán mã mà bạn hiểu và đã tự xem xét. Để dán, hãy nhập allow pasting khi được nhắc. Sau khi bạn cho phép dán một lần, cảnh báo sẽ không bao giờ xuất hiện lại.

Vấn đề về Chromium: 345205.

Điểm ngắt trình nghe sự kiện trong worker web và worklet

Khi bạn đặt điểm ngắt sự kiện trong Sources (Nguồn) > Event Listener Breakpoints (Điểm ngắt trình nghe sự kiện), ngoài việc tạm dừng sự kiện này trên trang web, Debugger (Trình gỡ lỗi) hiện cũng tạm dừng khi sự kiện tương ứng xảy ra trong web worker hoặc worklet thuộc bất kỳ loại nào, bao gồm cả Shared Storage Worklet (Worklet bộ nhớ dùng chung).

Vấn đề về Chromium: 1445175.

Huy hiệu nội dung nghe nhìn mới cho <audio> và <video>

Giờ đây, bạn có thể bật huy hiệu nội dung nghe nhìn mới cho các phần tử <audio> và <video> trong bảng điều khiển Elements (Thành phần). Khi nhấp vào huy hiệu, bạn sẽ được chuyển đến bảng điều khiển Media (Nội dung nghe nhìn) để có thể gỡ lỗi các phần tử này.

Tính năng này đang trong quá trình phát triển và sẽ được cải thiện hơn nữa. Nhóm Công cụ cho nhà phát triển xin gửi lời cảm ơn đến Junseo (Jeremy) Yoo vì đã mang đến điểm cải tiến này.

Vấn đề về Chromium: 1448214.

Đổi tên tính năng Tải trước thành Tải theo suy đoán

Để tránh sử dụng quá nhiều thuật ngữ trước đó và phản ánh rõ hơn hành vi này, mục Application (Ứng dụng) > Preloading (Tải trước) đã được đổi tên thành Speculative loads (Tải dự đoán). Tính năng tải phỏng đoán cho phép tải trang gần như tức thì dựa trên các quy tắc phỏng đoán mà bạn có thể xác định để trang web của bạn hiển thị trước và tìm nạp trước hầu hết các trang được điều hướng đến.

Vấn đề về Chromium: 1478888.

Lighthouse 11.2.0

Bảng điều khiển Lighthouse hiện chạy Lighthouse 11.2.0. Xem danh sách đầy đủ các thay đổi.

Bản cập nhật này bao gồm một bản sửa đổi lớn đối với danh mục hiệu suất. Giờ đây, thông tin chi tiết về hiệu suất được tính điểm và ưu tiên dựa trên mức tác động ước tính đối với các chỉ số hiệu suất. Ngoài ra, chỉ báo điểm hiệu suất còn cung cấp thông tin chi tiết hơn về mức độ ảnh hưởng của từng chỉ số đến điểm số.

Để tìm hiểu kiến thức cơ bản về cách sử dụng bảng điều khiển Lighthouse trong Công cụ cho nhà phát triển, hãy xem bài viết Lighthouse: Tối ưu hoá tốc độ trang web.

Vấn đề về Chromium: 772558.

Cải tiến khả năng hỗ trợ tiếp cận

Phiên bản này có các điểm cải tiến về hỗ trợ tiếp cận sau:

• Giờ đây, trình đọc màn hình sẽ thông báo trạng thái (đã đánh dấu hoặc chưa đánh dấu) của hộp đánh dấu trong mục Sources (Nguồn) > Breakpoints (Điểm ngắt).
• Giờ đây, bạn có thể sử dụng bàn phím để truy cập vào trình đơn thả xuống Ẩn các vấn đề tương tự.

Vấn đề về Chromium: 1488645, 1484918.

Thông tin nổi bật khác

Sau đây là một số điểm sửa lỗi và cải tiến đáng chú ý trong bản phát hành này:

• Hiệu suất: Khắc phục lỗi đôi khi thiếu chỉ báo LCP trong bản ghi (1487136).
• Tải dự đoán: Sửa URL đầy đủ cho các mục tiêu trong trình đơn thả xuống trong bảng điều khiển Mạng (1471020).
• Phạm vi:
  • Khắc phục mức độ sử dụng theo dòng cho mã được in đẹp (1464974).
  • Thông tin về mức độ phù hợp hiện đã được cập nhật khi tải lại trang (1494457).
• Bảng điều khiển:
  • Khắc phục lỗi chọn một phần văn bản trong thư (1487449).
  • Khắc phục tình trạng nhấp nháy của trình đơn thả xuống tự động hoàn thành (1487453).
  • Các dấu ngoặc đơn được hỗ trợ trong đường dẫn ngăn xếp và URL trong dấu vết ngăn xếp (1473926).
• Nguồn: Hỗ trợ làm nổi bật cú pháp của từ khoá using TypeScript (1490515).
• Trình đơn Quick Open (Mở nhanh) hiện hiển thị các phương thức riêng tư (1492957).
• Application (Ứng dụng) > Background services (Dịch vụ trong nền): Thanh thao tác trên cùng hiện sẽ gói văn bản khi đổi kích thước (1487276).
• Elements (Thành phần) > Styles (Kiểu):
  • Khắc phục độ phân giải của các biến CSS kế thừa cho các phần tử được đặt sẵn (1492162).
  • Khi tắt một thuộc tính CSS, các nhận xét của thuộc tính đó hiện sẽ bị xoá để khắc phục các dấu ngắt cú pháp (1101224).
• Mạng: Cột Mức độ ưu tiên hiện hiển thị một chú giải công cụ có thông tin về mức độ ưu tiên ban đầu (thông tin tương tự sẽ xuất hiện khi bạn đánh dấu vào Big request rows (Hàng yêu cầu lớn)) (1495735).
• Các tính năng không dùng nữa:
  • Chế độ cài đặt Định dạng màu đã bị tắt trong các phiên bản trước và hiện đã bị xoá.
  • Tùy chọn Xoá tất cả cơ chế ghi đè trong Nguồn hiện đã bị xoá do ít người sử dụng sau khi đơn giản hoá cơ chế ghi đè (1473681).

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 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, 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 mọi nội dung đã được đề cập trong loạt bài viết Tính năng mới trong DevTools.