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 phải hành động vì chúng tôi sắp ngừng sử dụng cookie của bên thứ ba. Để 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.

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

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 DevTools đang được phát triển tích cực với phiên bản 0.3.2 phát hành trước mới nhất. Công cụ này giúp bạn hiểu cách trang web sử dụng cookie và cung cấp hướng dẫn về các API Chrome mới giúp bảo vệ quyền riêng tư.

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 để có kết quả phân tích tốt 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 về quyền riêng tư (PSAT), hãy xem các bài viết sau:

• Cách làm bài thi PSAT.
• Để dự đoán những gì có thể xảy ra sau khi việc 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 các khía cạnh sẽ bị ảnh hưởng, hãy xem Hành động phân tích chung.
• Để tìm hiểu cách phân tích các tình huống phổ biến, bao gồm cả phân tích, thương mại điện tử, dịch vụ SSO, nội dung nhúng, v.v., 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ề cách 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 bật 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 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 quá trình thực thi nếu bị phát hiện hoặc truyền qua mã không bị bỏ qua

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

• Ngoại lệ được tìm thấy trong các khung không bị bỏ qua trong ngăn xếp lệnh gọi.
• Phát hiện các ngoại lệ truyền qua các khung 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 rồi đánh dấu vào Pause on caught exceptions (Tạm dừng khi phát hiện ngoại lệ).
2. Trên trang, trong danh sách các tình huống "Bị phát hiện", 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 quá trình thực thi trên các ngoại lệ đã phát hiện và/hoặc chưa phát hiện (khi được đánh dấu) trong các lệnh gọi không đồng bộ, Trình gỡ lỗi sẽ tìm trình xử lý từ chối trên các lời hứa. Kể từ phiên bản này, Trình gỡ lỗi không còn dự đoán rằng Promise.finally() sẽ phát hiện ngoại lệ, tương tự như cách khối try...finally không phát hiện ngoại lệ nào.

Vấn đề về Chromium: 1489312, 1291064.

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

Thông số kỹ thuật bản đồ nguồn đã sử dụng trường ignoreList thay vì x_google_ignoreList và DevTools hiện hỗ trợ tên mới với phương án dự phòng cho tên cũ. Khung và trình kết hợp hiện có thể sử dụng tên trường mới.

Bản đồ nguồn cho phép bạn gỡ lỗi mã bạn đã viết thay vì mã đã rút gọn 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ì triển khai bằng bản đồ nguồn

Nút bật/tắt chế độ nhập mới trong quá trình gỡ lỗi từ xa

Giờ đây, bạn có thể chuyển đổi giữa phương thức nhập bằng cảm ứng và chuột 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.

Hãy xem video để thấy chế độ nhập đang bật/tắt.

Vấn đề về Chromium: 1410433.

Giờ đây, bảng điều khiển Phần tử sẽ 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 đã kiểm tra. Để xem thông tin chi tiết, hãy chuyển đến Ứng dụng > Khung, chọn một khung rồi di chuyển xuống mục 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ẻ Ảnh động, 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 điểm 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

Hiện cảnh báo về Self-XSS khi dán mã thử nghiệm đã được bật theo mặc định. 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ì giờ đây, 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ải thiện hơn nữa. Nhóm Công cụ cho nhà phát triển muốn bày tỏ lòng 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ề khả năng hỗ trợ tiếp cận như sau:

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

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 bao phủ:
  • 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).
  • 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ợ tính năng 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).
• Phần tử > 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 đã 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 chọn 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á tất cả chế độ ghi đè trong Nguồn hiện đã bị xoá do mức sử dụng thấp sau khi đơn giản hoá các 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 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.