खास जानकारी
परफ़ॉर्मेंस पैनल, परफ़ॉर्मेंस एक्सटेंसिबिलिटी एपीआई के साथ काम करता है. इसकी मदद से, परफ़ॉर्मेंस टाइमलाइन में अपना कस्टम डेटा जोड़ा जा सकता है.
यह एपीआई, मौजूदा User Timings API का फ़ायदा उठाता है. साथ ही, आपको अपने मेज़रमेंट और इवेंट को सीधे कस्टम ट्रैक या Timings ट्रैक के तौर पर, परफ़ॉर्मेंस टाइमलाइन में इंजेक्ट करने की सुविधा देता है. यह सुविधा, कस्टम इंस्ट्रूमेंटेशन वाले फ़्रेमवर्क, लाइब्रेरी, और जटिल ऐप्लिकेशन के डेवलपर के लिए मददगार हो सकती है. इससे उन्हें परफ़ॉर्मेंस के बारे में ज़्यादा जानकारी मिलती है.
मुख्य सुविधाएं
- कस्टम ट्रैक: समय के हिसाब से अपने डेटा को विज़ुअलाइज़ करने के लिए, खास ट्रैक बनाएं.
- एंट्री: इवेंट या मेज़रमेंट दिखाने वाली एंट्री की मदद से ट्रैक पॉप्युलेट करें.
- टूलटिप और जानकारी: पसंद के मुताबिक बनाए जा सकने वाले टूलटिप और ज़्यादा जानकारी वाले व्यू की मदद से, एंट्री के लिए ज़्यादा जानकारी दें.
- मार्कर: विज़ुअल मार्कर की मदद से, टाइमलाइन में खास पलों को हाइलाइट करें.
User Timings API की मदद से अपना डेटा इंजेक्ट करना
कस्टम डेटा इंजेक्ट करने के लिए, performance.mark और performance.measure तरीकों की detail प्रॉपर्टी में devtools ऑब्जेक्ट शामिल करें. इस devtools ऑब्जेक्ट के स्ट्रक्चर से यह तय होता है कि परफ़ॉर्मेंस पैनल में आपका डेटा कैसे दिखेगा.
टाइमलाइन में कोई इवेंट या टाइमस्टैंप रिकॉर्ड करने के लिए,
performance.markका इस्तेमाल करें. किसी खास कार्रवाई या दिलचस्पी के किसी ऐसे पॉइंट की शुरुआत या आखिर को मार्क किया जा सकता है जिसकी अवधि नहीं है.detailप्रॉपर्टी मेंdevtoolsऑब्जेक्ट शामिल करने पर, परफ़ॉर्मेंस पैनल, समय ट्रैक में कस्टम मार्कर दिखाता है.किसी टास्क या प्रोसेस की अवधि मेज़र करने के लिए,
performance.measureका इस्तेमाल करें.detailप्रॉपर्टी मेंdevtoolsऑब्जेक्ट शामिल करने पर, परफ़ॉर्मेंस पैनल, कस्टम ट्रैक में टाइमलाइन में कस्टम मेज़रमेंट एंट्री दिखाता है. अगरperformance.measureबनाने के लिए,performance.markको रेफ़रंस पॉइंट के तौर पर इस्तेमाल किया जा रहा है, तो आपकोperformance.markकॉल मेंdevtoolsऑब्जेक्ट शामिल करने की ज़रूरत नहीं है.
devtools ऑब्जेक्ट
ये टाइप, एक्सटेंशन की अलग-अलग सुविधाओं के लिए devtools ऑब्जेक्ट के स्ट्रक्चर के बारे में बताते हैं:
type DevToolsColor =
"primary" | "primary-light" | "primary-dark" |
"secondary" | "secondary-light" | "secondary-dark" |
"tertiary" | "tertiary-light" | "tertiary-dark" |
"error";
interface ExtensionTrackEntryPayload {
dataType?: "track-entry"; // Defaults to "track-entry"
color?: DevToolsColor; // Defaults to "primary"
track: string; // Required: Name of the custom track
trackGroup?: string; // Optional: Group for organizing tracks
properties?: [string, string][]; // Key-value pairs for detailed view
tooltipText?: string; // Short description for tooltip
}
interface ExtensionMarkerPayload {
dataType: "marker"; // Required: Identifies as a marker
color?: DevToolsColor; // Defaults to "primary"
properties?: [string, string][]; // Key-value pairs for detailed view
tooltipText?: string; // Short description for tooltip
}
टाइमलाइन में अपना डेटा देखना
टाइमलाइन में अपना कस्टम डेटा देखने के लिए, परफ़ॉर्मेंस पैनल में, कैप्चर सेटिंग > एक्सटेंशन डेटा चालू करें.
इसे इस डेमो पेज पर आज़माएं. एक्सटेंशन डेटा चालू करें, परफ़ॉर्मेंस रिकॉर्डिंग शुरू करें, और डेमो पेज पर नया कोर्गी जोड़ें पर क्लिक करें. इसके बाद, रिकॉर्डिंग बंद करें. आपको ट्रेस में एक कस्टम ट्रैक दिखेगा. इसमें समरी टैब में, कस्टम टूलटिप और जानकारी वाले इवेंट शामिल होंगे.
कोड के उदाहरण
अगले सेक्शन में, कोड के ऐसे उदाहरण देखें जिनसे पता चलता है कि परफ़ॉर्मेंस टाइमलाइन में ये चीज़ें कैसे जोड़ें:
कस्टम ट्रैक और एंट्री
कस्टम ट्रैक बनाएं और उनमें एंट्री भरें, ताकि कस्टम ट्रैक में अपनी परफ़ॉर्मेंस का डेटा विज़ुअलाइज़ किया जा सके. उदाहरण के लिए:
// Mark used to represent the start of the image processing task
// The start time is defaulted to now
performance.mark("Image Processing Start");
// ... later in your code
// Track entry representing the completion of image processing
// with additional details and a tooltip
// The start time is a marker from earlier
// The end time is defaulted to now
performance.measure("Image Processing Complete", {
start: "Image Processing Start",
detail: {
devtools: {
dataType: "track-entry",
track: "Image Processing Tasks",
trackGroup: "My Tracks", // Group related tracks together
color: "tertiary-dark",
properties: [
["Filter Type", "Gaussian Blur"],
["Resize Dimensions", "500x300"]
],
tooltipText: "Image processed successfully"
}
}
});
इससे, परफ़ॉर्मेंस टाइमलाइन में, टूलटिप टेक्स्ट और प्रॉपर्टी के साथ-साथ, कस्टम ट्रैक की यह एंट्री दिखती है:
मार्कर
सभी ट्रैक में मौजूद कस्टम मार्कर की मदद से, टाइमलाइन में दिलचस्प पॉइंट को विज़ुअल तौर पर हाइलाइट करें. उदाहरण के लिए:
// Marker indicating when the processed image was uploaded
performance.mark("Image Upload", {
detail: {
devtools: {
dataType: "marker",
color: "secondary",
properties: [
["Image Size", "2.5MB"],
["Upload Destination", "Cloud Storage"]
],
tooltipText: "Processed image uploaded"
}
}
});
इससे टाइमिंग ट्रैक में, टूलटिप टेक्स्ट और प्रॉपर्टी के साथ यह मार्कर दिखता है:
