खास जानकारी
परफ़ॉर्मेंस पैनल, परफ़ॉर्मेंस एक्सटेंसिबिलिटी एपीआई के साथ काम करता है. इसकी मदद से, परफ़ॉर्मेंस टाइमलाइन में अपना कस्टम डेटा जोड़ा जा सकता है.
यह एपीआई, मौजूदा User Timings API का इस्तेमाल करता है. इसकी मदद से, मेज़रमेंट और इवेंट को कस्टम ट्रैक या Timing ट्रैक में परफ़ॉर्मेंस टाइमलाइन में सीधे इंजेक्ट किया जा सकता है. यह कस्टम इंस्ट्रुमेंटेशन वाले फ़्रेमवर्क, लाइब्रेरी, और जटिल ऐप्लिकेशन के डेवलपर के लिए मददगार हो सकता है. इससे परफ़ॉर्मेंस को बेहतर तरीके से समझने में मदद मिलती है.
मुख्य सुविधाएं
- कस्टम ट्रैक: समय के हिसाब से अपने डेटा को विज़ुअलाइज़ करने के लिए, खास ट्रैक बनाएं.
- एंट्री: इवेंट या मेज़रमेंट दिखाने वाली एंट्री की मदद से ट्रैक पॉप्युलेट करें.
- टूलटिप और जानकारी: पसंद के मुताबिक बनाए जा सकने वाले टूलटिप और ज़्यादा जानकारी वाले व्यू की मदद से, एंट्री के लिए ज़्यादा जानकारी दें.
- मार्कर: टाइमलाइन में विज़ुअल मार्कर की मदद से खास पलों को हाइलाइट करें.
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 an image processing task
performance.mark("Image Processing Start");
// ... later in your code
// Track entry representing the completion of image processing
// with additional details and a tooltip
performance.measure("Image Processing Complete", "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"
}
}
});
इससे, समय ट्रैक में उसके टूलटिप टेक्स्ट और प्रॉपर्टी के साथ, यह मार्कर दिखता है:
