console: phương thức tĩnh timeStamp()

Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.

Note: This feature is available in Web Workers.

Phương thức tĩnh console.timeStamp() thêm một dấu mốc đơn vào công cụ Performance của trình duyệt (Firefox bug 1387528, Chrome). Điều này cho phép bạn liên hệ một điểm trong mã của mình với các sự kiện khác được ghi trong dòng thời gian, chẳng hạn như sự kiện bố cục và vẽ.

Bạn có thể tùy chọn cung cấp một đối số để gắn nhãn cho dấu thời gian này, và nhãn đó sau đó sẽ được hiển thị cùng với dấu mốc.

Một số trình duyệt còn mở rộng thêm phương thức console.timeStamp() này để cho phép truyền thêm các tham số tùy chọn như một phần của API mở rộng, qua đó đưa các thông tin này vào dấu vết hiệu năng. Xem tài liệu về extensibility API của Chrome để biết thêm thông tin.

Cú pháp

console.timeStamp(label);
console.timeStamp(label, start, end, trackName, trackGroup, color, data);

Tham số

color Optional Experimental: Chuỗi biểu thị màu hiển thị của mục. Phải là một trong các giá trị "primary", "primary-light", "primary-dark", "secondary", "secondary-light", "secondary-dark", "tertiary", "tertiary-light", "tertiary-dark", "error".
data Optional Experimental: Một đối tượng chứa dữ liệu bổ sung cần hiển thị. URL có thể tự động được một số trình duyệt chuyển thành liên kết.

Note: Mức hỗ trợ cho tham số data khác nhau giữa các trình duyệt và cách triển khai DevTools của chúng. Ví dụ, trong một số phiên bản Chrome, dữ liệu này có thể không xuất hiện trong bảng Performance.

end Optional Experimental: Một chuỗi tham chiếu đến nhãn timeStamp đã được định nghĩa trước đó hoặc một dấu thời gian (DOMHighResTimeStamp) sẽ được dùng làm thời điểm kết thúc.
label Optional: Nhãn cho dấu thời gian.
start Optional Experimental: Một chuỗi tham chiếu đến nhãn timeStamp đã được định nghĩa trước đó hoặc một dấu thời gian (DOMHighResTimeStamp) sẽ được dùng làm thời điểm bắt đầu.
trackName Optional Experimental: Tên của track tùy chỉnh dùng để hiển thị dữ liệu dấu thời gian
trackGroup Optional Experimental: Nhóm của track tùy chỉnh dùng để hiển thị dữ liệu dấu thời gian

console.timeStamp("marker 1");

Dùng Extensibility API để cung cấp chi tiết phong phú hơn cho việc hiển thị

// 1. Tạo một sự kiện khoảng thời gian với dữ liệu phong phú
const start = performance.now() - 150;
const end = performance.now() - 20;

const durationData = {
  processingTime: `${end - start}ms`,
  info: "Check this URL: https://example.com for more.",
  metrics: {
    items: 5,
    isCached: true,
  },
};

console.timeStamp(
  "My Timed Task", // label
  start, // startTime
  end, // endTime
  "Tasks", // trackName
  "My Extension", // trackGroup
  "tertiary", // color
  durationData, // data (object)
);

// 2. Tạo một sự kiện tức thời với liên kết sâu cho tiện ích mở rộng DevTools
const linkData = {
  url: "ext://resource/123",
  description: "View Resource 123",
  otherDetail: "This data also appears in the JSON viewer",
};

console.timeStamp(
  "Event with Link", // label
  performance.now(), // startTime (instant)
  undefined, // endTime (instant)
  "Tasks", // trackName
  "My Extension", // trackGroup
  "primary-light", // color
  linkData, // data (object)
);