Performans verilerinizi extensibility API ile özelleştirin

Andrés Olivares

Sofia Emelianova

Genel Bakış

Performans paneli, performans zaman çizelgesine kendi özel verilerinizi eklemenize olanak tanıyan performans genişletilebilirlik 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 parçalar: Zamana dayalı verilerinizi görselleştirmek için özel parçalar 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 çizelgesinde belirli anları görsel işaretçilerle vurgulayın.

Verilerinizi User Timings API ile ekleme

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

• Zaman çizelgesinde anlık bir etkinlik veya zaman damgası kaydetmek için performance.mark simgesini 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 nesnesi

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

Zaman çizelgesinde özel verilerinizi görmek için Performans panelinde ayarlar Kayıt ayarları > onay_kutusu Uzantı verileri'ni etkinleştirin.

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. İzlemede, Özet sekmesinde özel ipuçları ve ayrıntılar içeren etkinlikler 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 çizelgesine özel parçalar ve girişler
• Zamanlamalar kanalındaki 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 parçaları kapsayan özel işaretçilerle zaman çizelgesinde belirli önemli noktaları 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 parçasında, ipucu metni ve özellikleriyle birlikte aşağıdaki işaretçiyi oluşturur: