Konzepte: Grundlagen des JavaScript Debugging-

In diesem Thema lernen Sie einige grundlegende Konzepte kennen, die Ihnen helfen, Ihren benutzerdefinierten JavaScript-Code zu debuggen, wenn Sie ihn zu Brightcove Player hinzufügen, und behandeln die folgenden Lösungen:

Beginnen Sie mit dem Basiscode für Videoplayer
Anzeigen von Nachrichten in der Browserkonsole

Spieler-Code

Beim Testen und Debuggen Ihres Codes ist es am hilfreichsten, die Player-Implementierung für das Einbetten von Seiten zu verwenden (in Studio als Advanced-Code bezeichnet). Dies bietet die klarste Möglichkeit, mit dem Spieler zu interagieren.

Die Verwendung von JavaScript ist fast gewissenhaft Teil Ihres Testens und Debuggings, daher sollten Sie Ihren Code für die Verwendung von JavaScript einrichten. Dies geschieht auf übliche Weise mit der ready Veranstaltung. Hier werden sowohl der In-Page-Einbettungscode als auch die ready Veranstaltung angezeigt.

Zeilen 11 bis 18: Standard-Page-Spielercode einbetten
Zeilen 20-24: Standard-Skriptblock, in dem Sie JavaScript verwenden
Zeilen 11, 21: Spieler id hat hinzugefügt und benutzt. Dies ist eine Ergänzung des standardmäßigen In-Page-Einbettungs-Implementierungscodes.

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>

<body>
    <h1>Sample Player</h1>
    <video-js id="myPlayerID"
    style="width: 640px; height: 360px;"
    data-video-id="4845798282001"
    data-account="1752604059001"
    data-player="default"
    data-embed="default"
    class="video-js" controls></video-js>
    <script src="//players.brightcove.net/1752604059001/default_default/index.min.js"></script><script>
        videojs.getPlayer('myPlayerID').ready(function() {
            var myPlayer = this;
            console.log('EVENT: Player ready');
            myPlayer.on('loadedmetadata', function(evt) {
                console.log('EVENT: Metadata loaded');
            });
        });
    </script>
</body>

</html>

Nachrichten anzeigen

Beim Testen und Debuggen Ihres Codes ist es hilfreich, Textzeichenfolgen und Objektwerte auszudrucken. Sie können dies mit dem console Objekt tun. Obwohl dieses Objekt nicht Teil der JavaScript-Sprache ist, ist es Teil der Laufzeitumgebung und ist in den meisten aktuellen Browsern verfügbar. In Firefox kommt es mit der Firebug-Erweiterung. In WebKit-Browsern (Safari und Chrome) ist es Teil des Web Inspectors/DevTools. In Internet Explorer ist es, beginnend mit IE 11, Teil der Developer Tools.

Das console Objekt hat mehrere Methoden, darunter:

Die log() Methode zur allgemeinen Ausgabe von Logging-Informationen. Dies ermöglicht eine String-Substitution und zusätzliche Argumente.
```
console.log("test",1,{},[1,2,3]);
```
Die dir() Methode zum Anzeigen einer interaktiven Liste von Objekteigenschaften.
```
console.dir({one:1, two: {three:3}});
```

Hier ist ein Beispielcode und ein Screenshot der Konsole, der die console.log() von Nachrichten anzeigt.

<video-js id="myPlayerID"
style="width: 640px; height: 360px;"
data-video-id="4845798282001"
data-account="1752604059001"
data-player="default"
data-embed="default"
class="video-js" controls></video-js>
<script src="//players.brightcove.net/1752604059001/default_default/index.min.js"></script><script>
    videojs.getPlayer('myPlayerID').ready(function() {
        var myPlayer = this;
        console.log('EVENT: Player ready');
        myPlayer.on('loadedmetadata', function(evt) {
            console.log('EVENT: Metadata loaded');
        });
    });
</script>

Im Folgenden finden Sie Details zur Verwendung des Konsolenobjekts in jedem Browser.

Chrome

Anzeigen Ihrer Nachrichten im Chrome-Browser

Führen Sie den Beispielcode im Chrome-Browser aus. Um Ihre Nachrichten anzuzeigen, öffnen Sie das DevTools-Bedienfeld:

Wählen Sie im Chrome-Browser das Symbol Anpassen und steuern Sie Google Chrome .
Wählen Sie Tools > JavaScript Consoleaus.

Chrome Entwicklertools
Im DevTools-Bedienfeld sollten Sie bei ausgewähltem Konsolenmenonement Ihre Konsolenmeldungen hier sehen.

Chrome-Konsole

Zeigen Sie Details zur Verwendung von Chrome DevToolsan.

Safari

Anzeigen Ihrer Nachrichten im Safari-Browser

Führen Sie den Beispielcode im Safari-Browser aus. Um Ihre Nachrichten anzuzeigen, öffnen Sie das Fenster „Entwicklertools“:

Wenn Sie den Menüpunkt „ Entwickeln “ in der Safari-Menüleiste nicht sehen, gehen Sie folgendermaßen vor:
1. Wählen Safari > Einstellungen > Fortgeschrittene.
2. Wählen Sie die Option Entwicklungsmenü in der Menüleiste anzeigen .
Safari-Entwicklungsmenü
Wählen Sie in der Safari-Menüleiste die Option „> Show Error Console entwickeln“.

Safari-Fehler-Konsole
Im Bereich Error Console sollten Ihre Konsolenmeldungen angezeigt werden.

Safari-Konsolen-Nachrichten

Zeigen Sie Details zur Verwendung des Safari Web Inspectoran.

Firefox

Anzeigen Ihrer Nachrichten im Firefox-Browser

Führen Sie den Beispielcode im Firefox-Browser aus. Um Ihre Nachrichten anzuzeigen, öffnen Sie das Bedienfeld „Web Console“:

Wählen Sie in der Firefox-Menüleiste Tools > Web Developer > Web Consoleaus.

Firefox-Web-Konsole
Im Web Console-Panel sollten die Nachrichten Ihrer Konsole angezeigt werden.

Firefox-Konsolen-Nachrichten

Internet Explorer

Anzeigen Ihrer Nachrichten im Internet Explorer (IE 11) -Browser

Führen Sie den Beispielcode im IE 11-Browser aus. Um Ihre Nachrichten anzuzeigen, öffnen Sie die Entwicklertools:

Wählen Sie in der Internet Explorer-Menüleiste Tools > Developer Tools oder drücken Sie F12.

IE-Entwicklertools
Wählen Sie im Fenster „Entwicklertools“ den Menüpunkt „Skript“. Wenn Sie Ihren Beispielcode im Browser aktualisieren, sollten Ihre Konsolenmeldungen angezeigt werden.

IE-Konsolenmeldungen

Bei einigen älteren IE-Browsern wird möglicherweise eine Fehlermeldung angezeigt, oder der Browser stürzt möglicherweise ab, wenn Sie versuchen, das console Objekt in Ihrem Code zu verwenden, wenn das Entwickler-Tools-Panel nicht geöffnet ist. Dies liegt daran, dass das console Objekt nicht definiert ist. Um dieses Problem zu vermeiden, fügen Sie das folgende Code-Snippet oben in Ihrem JavaScript-Code hinzu:

if(!window.console){ window.console = {log: function(){} }; }

Dieser Code prüft, ob das console Objekt existiert. Wenn nicht, wird das console Objekt mit einer leeren Funktion namens definiert log.

Zeigen Sie Details zur Verwendung der Internet Explorer-Entwicklertoolsan.

Inhalt der Seite