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

Loại bỏ cookie của bên thứ ba

Trang web của bạn có thể sử dụng cookie của bên thứ ba và đã đến lúc bạn cần hành động khi chúng tôi tiến đến thời điểm ngừng sử dụng các cookie này. Để tìm hiểu những việc cần làm đối với các cookie bị ảnh hưởng, hãy xem bài viết Chuẩn bị cho việc ngừng sử dụng cookie của bên thứ ba.

Theo mặc định, hộp đánh dấu Bao gồm cả vấn đề của cookie bên thứ ba đã được bật cho tất cả người dùng Chrome. Do đó, thẻ Vấn đề hiện cảnh báo cho bạn về những cookie sẽ chịu ảnh hưởng của việc ngừng sử dụng và loại bỏ cookie của bên thứ ba sắp tới. Bạn có thể bỏ chọn hộp này bất cứ lúc nào để ngừng thấy những vấn đề này.

Vấn đề về Chromium: 1466310.

Phân tích cookie của trang web bằng Công cụ phân tích Hộp cát về quyền riêng tư

Tiện ích Công cụ phân tích Hộp cát về quyền riêng tư cho Công cụ cho nhà phát triển đang trong quá trình phát triển tích cực với phiên bản 0.3.2 mới nhất trước khi phát hành. Công cụ này giúp bạn hiểu cách trang web của bạn sử dụng cookie và cung cấp hướng dẫn về các API mới bảo đảm quyền riêng tư của Chrome.

Cách phân tích cookie:

1. Cài đặt tiện ích trong Chrome.
2. Mở trang web của bạn trong một thẻ duy nhất để phân tích hiệu quả nhất.
3. Mở Công cụ cho nhà phát triển rồi chuyển đến bảng điều khiển Hộp cát về quyền riêng tư. Bảng điều khiển này có thể bị ẩn sau nút thả xuống ở trên cùng.
4. Mở mục Cookie rồi nhấp vào Phân tích thẻ này. Nếu công cụ này không tìm thấy cookie nào, hãy thử tải lại trang.

Để biết thêm thông tin về cách sử dụng Công cụ phân tích Hộp cát quyền riêng tư (PSAT), hãy xem các bài viết sau:

• PSAT's How To.
• Để dự đoán những gì có thể xảy ra sau khi quá trình ngừng sử dụng có hiệu lực, hãy thiết lập một Môi trường đánh giá.
• Để xác định những khía cạnh sẽ bị ảnh hưởng, hãy xem phần Các thao tác phân tích chung.
• Để tìm hiểu cách phân tích các trường hợp phổ biến, bao gồm cả hoạt động phân tích, thương mại điện tử, dịch vụ SSO, nội dung được nhúng và nhiều trường hợp khác, hãy xem các ví dụ minh hoạ trong phần Tình huống phân tích.

Ngoài ra, hãy xem hướng dẫn về Báo cáo vấn đề.

Danh sách bỏ qua nâng cao

Mẫu loại trừ mặc định cho node_modules

Phiên bản này cho phép biểu thức chính quy mặc định làm quy tắc loại trừ tuỳ chỉnh trong Cài đặt > Danh sách bỏ qua. Để giúp bạn chỉ tập trung vào mã của mình, theo mặc định, Trình gỡ lỗi hiện sẽ bỏ qua các tập lệnh từ /node_modules/ và /bower_components/. Bạn có thể tắt quy tắc này trong phần cài đặt bất cứ lúc nào.

Vấn đề về Chromium: 1496301.

Giờ đây, các ngoại lệ sẽ dừng thực thi nếu bị bắt hoặc truyền qua mã không bị bỏ qua

Khi bạn gỡ lỗi mã với tuỳ chọn Tạm dừng khi phát hiện các trường hợp ngoại lệ được đánh dấu, Trình gỡ lỗi hiện sẽ dừng quá trình thực thi đối với các trường hợp ngoại lệ đã phát hiện sau đây, cả đồng bộ và không đồng bộ:

• Các ngoại lệ được phát hiện trong những khung hình không bị bỏ qua trong ngăn xếp lệnh gọi.
• Các ngoại lệ đã bắt được truyền qua các khung hình không bị bỏ qua trong ngăn xếp lệnh gọi. Ví dụ: xem ảnh chụp màn hình.

Để kiểm thử hành vi này, hãy mở trang minh hoạ này:

1. Mở Công cụ cho nhà phát triển > Nguồn, thêm thư mục hidden vào danh sách bỏ qua và đánh dấu vào Tạm dừng khi gặp ngoại lệ.
2. Trên trang này, trong danh sách các tình huống "Đã bắt", hãy nhấp vào các nút khác nhau và xem quá trình thực thi bị tạm dừng trong các trường hợp được đề cập.

Để tạm dừng thực thi trên các ngoại lệ đã bắt và/hoặc chưa bắt (khi được kiểm tra) trong các lệnh gọi không đồng bộ, Trình gỡ lỗi sẽ tìm kiếm các trình xử lý từ chối trên các promise. Kể từ phiên bản này, Trình gỡ lỗi sẽ không còn dự đoán rằng Promise.finally() sẽ bắt một ngoại lệ, tương tự như cách khối try...finally không bắt bất kỳ ngoại lệ nào.

Các vấn đề về Chromium: 1489312, 1291064.

Đổi tên x_google_ignoreList thành ignoreList trong bản đồ nguồn

Quy cách bản đồ nguồn đã áp dụng trường ignoreList thay vì x_google_ignoreList và DevTools hiện hỗ trợ tên mới này bằng một phương án dự phòng cho tên cũ. Giờ đây, các khung và trình đóng gói có thể sử dụng tên trường mới.

Bản đồ nguồn cho phép bạn gỡ lỗi mã mà bạn đã viết thay vì mã đã giảm thiểu do trang web của bạn phân phát.

Để biết thêm thông tin về bản đồ nguồn, hãy xem:

• Bản đồ nguồn là gì
• Gỡ lỗi mã gốc thay vì mã được triển khai bằng bản đồ nguồn

Chế độ bật/tắt phương thức nhập mới trong quá trình gỡ lỗi từ xa

Giờ đây, bạn có thể chuyển đổi giữa chế độ đầu vào bằng chuột và bằng cảm ứng khi gỡ lỗi một thẻ Chrome từ xa. Ví dụ: khi bạn chạy một phiên bản Chrome bằng --remote-debugging-port=<port> và kết nối với mục tiêu mạng này thông qua chrome://inspect/#devices.

Xem video để thấy cách chuyển đổi chế độ nhập.

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 có hiệu lực 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 được 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).

Vấn đề về Chromium: 1424714.

Cải thiện quy trình 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ỏ vị trí. Ả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 biểu tượng này.
• Đổi kích thước cột tên để xem tên đầy đủ của ảnh động.

Các vấn đề về Chromium: 1492460, 1489721.

Hộp thoại "Bạn có tin tưởng mã này không?" trong bảng điều khiển Nguồn và cảnh báo tự thực hiện XSS trong bảng điều khiển

Hiện cảnh báo về tấn công tự thực thi kịch bản chéo trang khi dán mã thử nghiệm đã được bật theo mặc định. Tấn công tự thực thi tập lệnh trên nhiều trang web (Self-XSS) là một cuộc tấn công lừa bạn dán mã độc vào Công cụ cho nhà phát triển, 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 DevTools mới và cố gắng dán mã, thì bảng Nguồn hiện sẽ cho bạn thấy hộp thoại Bạn có tin tưởng mã này không? và Bảng điều khiển hiệ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 nữa.

Vấn đề về Chromium: 345205.

Các điểm ngắt của trình xử lý sự kiện trong web worker và worklet

Khi bạn đặt mộ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 của bạn, Trình gỡ lỗi hiện cũng tạm dừng khi sự kiện tương ứng xảy ra trong một web worker (worker trên web) hoặc worklet (worklet) thuộc bất kỳ loại nào, kể cả Shared Storage Worklet (Worklet Bộ nhớ dùng chung).

Vấn đề về Chromium: 1445175.

Huy hiệu mới cho nội dung nghe nhìn của <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 Phần tử. Khi bạn nhấp vào huy hiệu này, bạn sẽ được chuyển đến bảng điều khiểnĐa phương tiện để 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ì đã thực hiện 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ính năng tải theo suy đoán

Để tránh sử dụng quá nhiều thuật ngữ trước đó và phản ánh chính xác hơn hành vi này, Ứng dụng > Tải trước đã được đổi tên thành Tải suy đoán. Tải suy đoán cho phép tải trang gần như tức thì dựa trên các quy tắc suy đoán mà bạn có thể xác định cho trang web của mình để kết xuất trước và tìm nạp trước hầu hết các trang được chuyển đến.

Vấn đề về Chromium: 1478888.

Lighthouse 11.2.0

Giờ đây, bảng Lighthouse 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 số thay đổ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à sắp xếp thứ tự ư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, đồng hồ đo điểm hiệu suất còn có 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 những kiến thức cơ bản về cách sử dụng bảng 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 thiện khả năng hỗ trợ tiếp cận

Phiên bản này có những điểm cải thiện sau đây về khả năng hỗ trợ tiếp cận:

• 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 Nguồn > Điểm ngắt.
• Giờ đây, bạn có thể truy cập vào trình đơn thả xuống Ẩn các vấn đề tương tự bằng bàn phím.

Các vấn đề về Chromium: 1488645, 1484918.

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

Sau đây là một số điểm cải tiến và bản sửa lỗi đá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 suy đoán: Đã sửa URL đầy đủ cho các mục tiêu trong trình đơn thả xuống ở bảng điều khiển Mạng (1471020).
• Phạm vi áp dụng:
  • Đã khắc phục mức độ phù hợp từng 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 lỗi nhấp nháy của trình đơn thả xuống tự động hoàn thành (1487453).
  • 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ợ cú pháp làm nổi bật từ khoá TypeScript using (1490515).
• Trình đơn Mở nhanh hiện hiển thị các phương thức riêng tư (1492957).
• Ứng dụng > Dịch vụ nền: Thanh thao tác trên cùng hiện bao bọc văn bản khi đổi kích thước (1487276).
• Phần tử > Kiểu:
  • Đã khắc phục độ phân giải của các biến CSS được kế thừa cho các phần tử có khe cắm (1492162).
  • Khi bạn tắt một thuộc tính CSS, các nhận xét của thuộc tính đó sẽ bị xoá để khắc phục lỗi cú pháp (1101224).
• Mạng: Giờ đây, cột Mức độ ưu tiên sẽ hiển thị một chú thích có thông tin về mức độ ưu tiên ban đầu (thông tin này cũng xuất hiện khi bạn đánh dấu vào Hàng yêu cầu lớn) (1495735).
• Ngừng sử dụng:
  • 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á.
  • Tuỳ chọn Xoá mọi cơ chế ghi đè trong Nguồn hiện đã bị xoá do có í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 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.