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, özel araçlara sahip çerçeve, kitaplık ve karmaşık uygulama geliştiricilerinin performansı daha kapsamlı bir şekilde anlamaları açısından 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 bağlam sağlayın.
• İşaretçiler: Zaman çizelgesinde belirli anları görsel işaretçilerle vurgulayın.

Verilerinizi User Timings API ile yerleştirme

Ö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örüntüleneceğ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 özelliğine devtools nesnesi eklediğinizde Performans paneli, zaman çizelgesinde özel bir işaretçi gösterir.

• 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 ölçüm girişleri 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. Ö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, aşağıdakilerin performans zaman çizelgesine nasıl ekleneceğini gösteren kod örneklerini inceleyin:

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

Özel parçalar ve girişler

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

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

Bu işlem, ipucu metni ve özellikleriyle birlikte performans zaman çizelgesinde aşağıdaki özel kanal girişiyle sonuçlanır:

İşaretçiler

Tüm parçalara yayılan ö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: