Trang này được dịch bởi Cloud Translation API.

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

Sofia Emelianova

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 đề của cookie bên thứ ba đã được bật theo mặc định cho tất cả người dùng Chrome. Do đó, thẻ Vấn đề hiện sẽ cảnh báo 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ỏ đánh dấu hộp này bất cứ lúc nào để không thấy các vấn đề này nữa.

Cảnh báo về việc ngừng sử dụng cookie của bên thứ ba sắp tới trong thẻ Vấn đề.

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:

Cài đặt tiện ích trong Chrome.
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.
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.
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.

Công cụ phân tích Hộp cát về quyền riêng tư.

Để 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 những nội dung 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 những khía cạnh sẽ bị ảnh hưởng, hãy xem phần Thao tác 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.

Trước và sau khi thêm biểu thức chính quy.

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 cách đánh dấu Tạm dừng khi phát hiện các trường hợp ngoại lệ, Trình gỡ lỗi sẽ dừng quá trình thực thi trên 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 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ụ: hãy xem ảnh chụp màn hình.

Tạm dừng khi phát hiện một ngoại lệ đã phát hiện được đã truyền qua mã không bị bỏ qua.

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

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ệ).
Trên trang, trong danh sách các tình huống "Bắt được", 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ũ. Giờ đây, các khung và trình kết hợp 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ã đã 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:

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 để xem chế độ nhập đang bật/tắt.

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.

Trước và sau khi hiển thị documentURL bên cạnh 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)).

Mục Chính sách bảo mật nội dung nằm trong thẻ Ứng dụng.

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 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.

Hộp thoại "Bạn có tin tưởng mã này không?" khi dán mã vào Nguồn.

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).

Trình gỡ lỗi tạm dừng khi trình chạy dịch vụ gọi hàm đặt thời gian chờ.

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 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.

Trước và sau khi đổi tên tính năng tải trước thành tải theo suy đoá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ố.

Hiệu suất trước và sau khi cải tiến.

Để 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 phần 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 trong khe (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ị 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).
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 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 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.