Performans verilerinizi extensibility API ile özelleştirin

Andrés Olivares

Sofia Emelianova

Genel Bakış

Performans paneli, kendi özel verilerinizi performans zaman çizelgesine eklemenize olanak tanıyan performans genişletilebilir API'sini destekler.

Bu API, mevcut User Timings API'den yararlanır ve ölçümlerinizi ve etkinliklerinizi doğrudan performans zaman çizelgesine özel bir kanal olarak veya Timings kanalına eklemenize olanak tanır. Bu, performansı daha kapsamlı bir şekilde anlamak isteyen, özel enstrümasyona sahip çerçeve, kitaplık ve karmaşık uygulama geliştiricileri için yararlı olabilir.

Temel özellikler

• Özel kanallar: Kendi zamana dayalı verilerinizi görselleştirmek için özel kanallar oluşturun.
• Girişler: Parçaları etkinlikleri veya ölçümleri temsil eden girişlerle doldurun.
• İpuçları ve ayrıntılar: Özelleştirilebilir ipuçları ve ayrıntılı görünümlerle girişler için zengin bir bağlam sunun.
• İşaretçiler: Zaman çizelgesindeki belirli anları görsel işaretçilerle vurgulayın.

Verilerinizi User Timings API ile ekleme

Özel veri eklemek için performance.mark ve performance.measure yöntemlerinin detail özelliğine bir devtools nesnesi ekleyin. Bu devtools nesnesinin yapısı, verilerinizin Performans panelinde nasıl gösterileceğini belirler.

• Zaman çizelgesinde anlık etkinlik veya zaman damgası kaydetmek için performance.mark özelliğini kullanın. Belirli bir işlemin veya süresi olmayan herhangi bir önemli yerin başlangıcını ya da sonunu işaretleyebilirsiniz. detail mülküne bir devtools nesnesi eklediğinizde Performans panelinde Zamanlamalar kanalında özel bir işaretçi gösterilir.

• Bir görevin veya sürecin süresini ölçmek için performance.measure kullanın. detail mülküne bir devtools nesnesi eklediğinizde Performans paneli, zaman çizelgesinde özel bir kanalda özel ölçüm girişlerini gösterir. performance.measure oluşturmak için referans noktası olarak performance.mark kullanıyorsanız performance.mark çağrılarına devtools nesnesini eklemeniz gerekmez.

devtools nesne

Bu türler, farklı uzantı özellikleri için devtools nesnesinin yapısını tanımlar:

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
}

Verilerinizi zaman çizelgesinde görüntüleme

Özel verilerinizi zaman çizelgesinde görmek için Performans panelinde ayarlar Yakalama ayarları > check_box Uzantı verileri'ni açın.

Bu demo sayfasında deneyin. Uzantı verileri'ni açın, performans kaydı başlatın, demo sayfasında Yeni Corgi ekle'yi tıklayın ve ardından kaydı durdurun. Özet sekmesindeki izlemede, özel ipuçları ve ayrıntılar içeren etkinlikleri içeren özel bir kanal görürsünüz.

Kod örnekleri

Sonraki bölümlerde, performans zaman çizelgesine aşağıdakilerin nasıl ekleneceğini gösteren kod örneklerini görebilirsiniz:

• Zaman çizelgesindeki özel parçalar ve girişler
• Zamanlamalar kanalına işaretçiler

Özel parçalar ve girişler

Performans verilerinizi özel bir kanalda görselleştirmek için özel kanallar oluşturun ve bunları girişlerle doldurun. Örneğin:

// 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"
    }
  }
});

Bu işlem, performans zaman çizelgesinde, ipucu metni ve özellikleriyle birlikte aşağıdaki özel kanal girişini oluşturur:

İşaretçiler

Tüm kanalları kapsayan özel işaretçilerle zaman çizelgesindeki belirli önemli yerleri görsel olarak vurgulayın. Örneğin:

// 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"
    }
  }
});

Bu işlem, Zamanlamalar kanalında, ipucu metni ve özellikleriyle birlikte aşağıdaki işaretçiyi oluşturur: