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

Sofia Emelianova
Sofia Emelianova
GitHub

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 hành động khi 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 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 Hộp đánh dấu. Bao gồm các vấn đề về cookie của 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ề các cookie sẽ bị ảnh hưởng khi cookie của bên thứ ba không được dùng nữa và sẽ bị loại bỏ. Bạn có thể bỏ chọn hộp đánh dấu bất cứ lúc nào để ngừng gặp những vấn đề này.

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

Vấn đề với 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ư dành cho Công cụ cho nhà phát triển đang trong quá trình phát triển 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 của bạn sử dụng cookie, đồng thời cung cấp hướng dẫn về các API mới của Chrome có khả năng bảo đảm 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ó 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 Thẻ khác. ở 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.

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:

  • Hướng dẫn của 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ôi trường đánh giá.
  • Để xác định các khía cạnh 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, trong đó có số liệu phân tích, thương mại điện tử, dịch vụ Đăng nhập một lần (SSO), nội dung được nhúng và các tình huống khác, hãy xem 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 đề.

Trang thông tin bỏ qua nâng cao

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

Phiên bản này sẽ bật biểu thức chính quy mặc định dưới dạng quy tắc loại trừ tuỳ chỉnh trong Cài đặt. Cài đặt > Danh sách bỏ qua. Để giúp bạn chỉ tập trung vào mã của mình, Trình gỡ lỗi giờ đây sẽ bỏ qua các tập lệnh từ /node_modules/ và /bower_components/ theo mặc định. 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 một biểu thức chính quy.

Vấn đề với Chromium: 1496301.

Các ngoại lệ hiện sẽ dừng 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ã với trạng thái Hộp đánh dấu. Tạm dừng khi ngoại lệ bị phát hiện, Trình gỡ lỗi sẽ ngừng 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ệ bị phát hiện trong 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.

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

Để kiểm tra 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 kiểm tra Hộp đánh dấu. Tạm dừng khi phát hiện các trường hợp ngoại lệ.
  2. Trên trang này, trong danh sách các trường hợp "Đã nắm bắt", hãy nhấp vào các nút khác nhau và xem việc thực thi bị tạm dừng trong các trường hợp đã đề cập.

Để tạm dừng thực thi trong các trường hợp ngoại lệ đã phát hiện và/hoặc chưa được phát hiện (khi được chọn) trong các lệnh gọi không đồng bộ, Trình gỡ lỗi sẽ tìm các 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ư việc khối try...finally không phát hiện bất kỳ ngoại lệ nào.

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

x_google_ignoreList đã được đổi tên thành ignoreList trong bản đồ nguồn

Thông số kỹ thuật của bản đồ nguồn đã sử dụng trường ignoreList thay vì x_google_ignoreList và Công cụ cho nhà phát triển hiện hỗ trợ tên mới bằng tính năng dự phòng cho trường cũ. Các khung và trình đóng gói 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ật/tắt chế độ nhập mới trong khi 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ách chạm và bằng chuột khi gỡ lỗi từ xa một thẻ Chrome. 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 qua chrome://inspect/#devices.

Xem video để biết cách bật/tắt chế độ nhập trong thực tế.

Vấn đề với Chromium: 1410433.

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

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

Phần trước và sau hiển thị documentURL bên cạnh nút #document.

Vấn đề với Chromium: 1376976.

Chính sách bảo mật nội dung hiệu quả trong bảng điều khiển Application (Ứ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 chi tiết, hãy chuyển đến Ứng dụng > Khung, chọn một khung rồi cuộn xuống phần Chính sách bảo mật nội dung (CSP).

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

Sự cố 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 để thiết lập con trỏ vị trí. Ảnh động sẽ tiếp tục phát nếu đã phát và dừng lại. Trước đây, bạn phải kéo tiện ích này.
  • Thay đổi kích thước cột tên để xem tên ảnh động đầy đủ.

Các sự cố với Chromium: 1492460, 1489721.

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

Hộp đánh dấu. Hiển thị cảnh báo về tính năng Tự XSS khi dán thử nghiệm mã đã được bật theo mặc định. Tự XSS (tự viết tập lệnh trên nhiều trang web) là một hình thức tấn công lừa bạn dán mã độc vào Công cụ cho nhà phát triển và cho phép kẻ tấn công giành quyền kiểm soát tài khoản web cũng như thông tin cá nhân của bạn.

Nếu bạn là người dùng mới của Công cụ cho nhà phát triển và bạn muốn dán mã, thì giờ đây, bảng điều khiển Nguồn sẽ hiển thị cho bạn hộp thoại Bạn có tin tưởng mã này không? và Bảng điều khiển giờ đây 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ờ hiển thị nữa.

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

Vấn đề với Chromium: 345205.

Các điểm ngắt của trình nghe sự kiện trong trình thực thi web và worklet

Khi bạn đặt một điểm ngắt sự kiện trong phần Nguồn > Điểm ngắt của 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 giờ đây cũng tạm dừng khi sự kiện tương ứng xảy ra trong một trình chạy web hoặc công việc thuộc bất kỳ loại nào, bao gồm cả Worklet bộ nhớ dùng chung.

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

Vấn đề với Chromium: 1445175.

Huy hiệu truyền thông 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 Phần tử. Khi nhấp vào huy hiệu này, bạn sẽ được chuyển đến bảng Nội dung nghe nhìn để có thể gỡ lỗi những thành phần này.

Đã bật huy hiệu nội dung nghe nhìn mới cho thẻ âm thanh và video.

Tính năng này đang trong quá trình phát triển và sẽ tiếp tục cải thiện hơn nữa. Nhóm Công cụ cho nhà phát triển muốn cảm ơn Junseo (Jeremy) Yoo vì đã giúp cải thiện ứng dụng này.

Vấn đề với Chromium: 1448214.

Quá trình tải trước đã được đổi tên thành Tải theo suy đoán

Để tránh việc lạm dụng thuật ngữ trước và phản ánh chính xác hơn hành vi này, mục Ứng dụng > Tải trước đã được đổi tên thành Tải theo suy đoán. Tính năng tải theo suy đoán cho phép tải trang gần ngay lập tức 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 điều hướng đến.

Trước và sau khi đổi tên chế độ tải trước thành tải theo suy đoán.

Vấn đề với 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.

Trong lần cập nhật này, chúng tôi sẽ cải tiến 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ố về hiệu suất. Ngoài ra, thước đo điểm số hiệu suất bao gồm thông tin chi tiết hơn về mức độ ảnh hưởng của mỗi chỉ số đối với điểm số.

Đại tu về hiệu suất trước và sau.

Để tìm hiểu thông tin 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.

Các sự cố với Chromium: 772558.

Cải tiến về 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 đây:

  • Giờ đây, trình đọc màn hình 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 phần Sources (Nguồn) > Breakpoints (Điểm ngắt).
  • Giờ đây, bạn có thể dùng bàn phím để truy cập trình đơn thả xuống Ẩn các vấn đề như thế này.

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

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

Dưới đây là một số bản 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 vấn đề chỉ báo LCP đôi khi bị thiếu trong bản ghi (1487136).
  • Tải theo suy đ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 lập chỉ mục:
    • Cố định 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 lựa chọn một phần văn bản trong tin nhắn (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ợ tính năng đánh dấu cú pháp của từ khoá using TypeScript (1490515).
  • Giờ đây, trình đơn Mở nhanh sẽ hiển thị các phương thức riêng tư (1492957).
  • Ứng dụng > Dịch vụ nền: Giờ đây, thanh thao tác trên cùng sẽ 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 kế thừa cho các phần tử có rãnh (1492162).
    • Khi vô hiệu hoá một tài sản CSS, các nhận xét của tài sản đó hiện sẽ bị xoá để sửa lỗi cú pháp (1101224).
  • Mạng: Giờ đây, cột Mức độ ưu tiên hiển thị một chú giải công cụ có thông tin về mức độ ưu tiên ban đầu (mức này sẽ xuất hiện khi 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á.
    • Lựa 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 tinh giản các chế độ ghi đè (1473681).

Tải 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 cung cấp cho bạn quyền truy cập vào các tính năng mới nhất của Công cụ cho nhà phát triển, thử nghiệm API nền tảng web tiên tiến và tìm ra sự cố trên trang web của bạn trước khi người dùng của bạn làm điều đó!

Liên hệ với nhóm Công cụ của Chrome cho nhà phát triển

Sử dụng các lựa chọn sau đây để thảo luận về các tính năng mới và thay đổi trong bài đăng hoặc bất cứ vấn đề nào khác liên quan đến Công cụ cho nhà phát triển.

  • Hãy gửi đề xuất hoặc phản hồi cho chúng tôi qua 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 phần Tuỳ chọn khác   Thêm   > Trợ giúp > Báo cáo sự cố về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
  • Tweet tại @ChromeDevTools.
  • Hãy để lại bình luận về tính năng mới trong video trên YouTube của Công cụ cho nhà phát triển hoặc video 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 video Tính năng mới trong Công cụ cho nhà phát triển.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Kiến thức cơ bản về Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 đã bị huỷ.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59