permon

Permon

Ein einfacher MON ITOR für Web -Apps und Spiele. Überprüfen Sie den Abschnitt Konfiguration und Verwendungsabschnitt für den detaillierten Überblick über die Funktionen.

Schneller Start

Paket (Modul)

 yarn add permon 

 import { Permon } from 'permon'

new Permon ( )

Vanille

 ( function ( ) {
  var s = document . createElement ( 'script' )
  s . onload = function ( ) {
    new permon . Permon ( )
  }
  s . src = '//tsopeh.github.io/permon/dist/permon.iife.js'
  document . head . appendChild ( s )
} ) ( )

Lesezeichen

Sie können permon auf jeder Webseite testen, die Lesezeichen unterstützt, indem Sie ein neues Lesezeichen erstellen und sein Adressfeld mit dem folgenden Code -Snippet füllen. Alternativ können Sie dasselbe Snippet in die Adressleiste des Browsers einfügen. Es ist wichtig, dass das Ausschnitt mit javscript: beginnt :.

javascript: ( function ( ) { var s = document . createElement ( "script" ) ; s . onload = function ( ) { new permon . Permon ( ) } , s . src = "//tsopeh.github.io/permon/dist/permon.iife.js" , document . head . appendChild ( s ) } ) ( ) ;

Notiz

• Einige Browser entfernen das Start javscript: Text, auf Paste, als Sicherheitsmaßnahme. In solchen Fällen müssen Sie es von Hand schreiben;

• Leider unterstützt Safari keine Lesezeichen seit iOS 15.

Konfiguration und Verwendung

Standardeinstellungen

Standardmäßig zeigt Permon drei Panels (FPS, Frame Latenz (MS = Milliseconds) und JS Heap Memory (MB = Megabyte)) an und aktualisieren Sie jedes Panel einmal alle 250 ms.

 import { Permon } from 'permon'

new Permon ( )

Metriken

Sie können ausdrücklich angeben, welche Metriken Sie behalten möchten. Wenn Sie beispielsweise nur an FPS interessiert sind, können Sie Folgendes tun.

 import { Permon } from 'permon'

new Permon ( {
  metrics : {
    fps : {
      calculator : Permon . UTILS . metrics . fps . createCalculator ( ) ,
      panel : Permon . UTILS . metrics . fps . createPanel ( ) ,
    } ,
  } ,
} )

Sie können auch Ihre eigenen Metriken definieren.

Eine Metrik besteht aus zwei Teilen, der Funktion "Taschenrechner", die Statistiken erzeugt, und die ( optionale ) "Panel" UI.

Die Funktion "Taschenrechner" ist eine einfache Funktion, die einen neuen Zeitstempel für jeden Animationsrahmen empfängt. Sie können diese Zeitstempel verwenden, um Ihnen dabei zu helfen, alle gewünschten Statistiken zu berechnen.

Das "Panel" ist ein Objekt, das: * ein DOM -Element enthält, das neben anderen Panels angehängt wird; * Eine updateDom Funktion, die die vom Taschenrechner erstellten Statistiken empfängt und das DOM -Element aktualisiert, um die Statistiken anzuzeigen.

Die drei Standardmetriken, die Permon anbietet, produzieren alle die Statistiken, die der BasicStats -Schnittstelle folgen (siehe unten).

 // Stats that we want to callculate.
interface BasicStats {
  current : number
  mean : number
  lowest : number
  highest : number
}

const calculator = ( timestamp : number ) : BasicStats => {
  /*
   * Calculate stats.
   */
  return stats
}

const panel = {
  dom : domElement ,
  updateDom : ( stats : BasicStats ) => {
    /*
    * Display stats in the `domElement`.
    */
  } ,
}

// Usage.

import { Permon } from 'permon'

new Permon ( {
  metrics : {
    ... Permon . UTILS . metrics . createAllDefaultMetrics ( ) , // This will create all the default metrics.
    myCustomMetric : {
      calculator : calculator ,
      panel : panel ,
    } ,
  } ,
} )

Ein einfaches Beispiel für die Erfassung zusätzlicher Daten ist die Bestimmung der Zeit des Kunden, als die anderen Statistiken aufgezeichnet wurden. Dafür werden wir den Zeitstempel ignorieren, da er für die Berechnung nicht benötigt wird, und wir können davon ausgehen, dass UI nicht benötigt wird.

 import { Permon } from 'permon'

new Permon ( {
  metrics : {
    ... Permon . UTILS . metrics . createAllDefaultMetrics ( ) , // This will create all the default metrics.
    clientTime : {
      calculator : ( ) => ( new Date ) . toISOString ( ) ,
    } ,
  } ,
} )

Zugriff auf die Daten

Permon kann regelmäßig die gesammelten Statistiken für alle definierten Metriken veröffentlichen. Sie können auf diese Daten zugreifen, indem Sie den onPublishStats -Rückruf verwenden. und definieren Sie die Verzögerung zwischen zwei Verlagsereignissen.

 new Permon ( {
  onPublishStats : ( stats ) => {
    console . table ( stats )
  } ,
  minDelayMsBetweenPublishingStats : 1000 , // Once per second, by default. Setting this option to `0` can be interpreted as "As fast as possible".
} )

Sie können diesen Mechanismus in Kombination mit headless Option verwenden, um Leistungsstatistiken regelmäßig zu sammeln und an einen Datenaggregationsdienst zu senden. Diese Daten können später verarbeitet werden und Ihnen helfen, festzustellen, wie sich Ihre App tatsächlich auf Client -Geräten verhält.

 new Permon ( {
  onPublishStats : ( stats ) => {
    fetch ( 'https://some-data-aggregator-service...' , {
      method : 'POST' ,
      headers : { 'Content-Type' : 'application/json' } ,
      body : JSON . stringify ( stats ) ,
    } )
  } ,
  minDelayMsBetweenPublishingStats : 60 * 1000 , // Once every minut.
  headless : true , // Do not render any panels
} ) 

Fragen und a

Dieses Tool scheint anderen ähnlich zu sein. Was bringt dieser an den Tisch?

Permon und seine UI -Panels wurden von Stat.Js und Gamestats inspiriert. Der Unterschied besteht darin, dass Permon darüber nachkommt, wie und wann sie die Leistung misst -, während es für die Erweiterung offen bleibt. Sie können Ihre eigenen Metriken und/oder Panels erstellen. Sie können auf die Statistiken zugreifen und sie bewältigen, wie Sie möchten. Es ist in TypeScript geschrieben, das Entwicklern und Betreuern bessere Entwicklungserfahrung bietet.

Warum gibt es eine kurze Verzögerung, bevor FPS und Frame Latency -Latenzplatten Daten anzeigen?

Dies ist absichtliches Verhalten. Nachdem die Seite geladen oder wenn die überwachte Seite sichtbar wird, gibt Permon der Seite einige Zeit, um vor der Berechnung von Metriken zu stabilisieren. So reduzieren Sie die Wahrscheinlichkeit, wilde Spikes für FPS- und Rahmenlatenzmetriken zu erhalten.

Warum wird Permon -Monitor und veröffentlichen Statistiken nicht, wenn die Überwachung minimiert wird oder wenn die Registerkarte eines anderen Browsers im selben App -Fenster fokussiert wird?

Permon stützt sich auf requestAnimationFrame -Rückruf, um festzustellen, ob ein Rahmen gerendert wird, und um festzustellen, wann es ein guter Zeitpunkt ist, um Metrikenberechnung durchzuführen. Auf diese Weise minimiert es den Leistungsaufwand, der durch Überwachung CaUesD ist. Andererseits haben die Browser eine Optimierung implementiert, wobei der requestAnimationFrame nicht für die nicht sichtbaren Seiten (Registerkarten) aufgerufen wird (minimiert oder wenn sich eine andere Registerkarte im Fokus auf demselben Anwendungsfenster konzentriert). Aus diesem Grund wird Permon, wenn eine überwachte Seite unsichtbar wird, effektiv suspendiert, bis sie wieder sichtbar wird.