खास जानकारी
परफ़ॉर्मेंस पैनल में, Performance extensibility API का इस्तेमाल किया जा सकता है. इसकी मदद से, परफ़ॉर्मेंस टाइमलाइन में अपना कस्टम डेटा जोड़ा जा सकता है.
यह एपीआई, मौजूदा 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 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"
}
}
});
इससे, समय ट्रैक में उसके टूलटिप टेक्स्ट और प्रॉपर्टी के साथ, यह मार्कर दिखता है:
