Conceptos: Conceptos básicos de la depuración de JavaScript

En este tema, aprenderá algunos conceptos básicos que le ayudarán a depurar el código JavaScript personalizado cuando lo agregue a Brightcove Player, y cubre las siguientes soluciones:

Comience con el código básico del reproductor de vídeo
Mostrar mensajes en la consola del navegador

Código del reproductor

Al probar y depurar su código, es más útil usar la implementación del reproductor incrustado en página (llamado código avanzado en Studio). Esto proporciona la forma más clara de interactuar con el jugador.

El uso de JavaScript es casi seguro parte de sus pruebas y depuraciones, por lo que querrá configurar su código para usar JavaScript. Esto se hace de una manera estándar usando el ready evento. Tanto el código de implementación de incrustación en página como el ready evento se muestran aquí.

Líneas 11-18: Código estándar del reproductor de incrustar en la página
Líneas 20-24: Bloque de script estándar en el que utilizar JavaScript
Líneas 11, 21: Jugador id añadido y utilizado. Esta es una adición al código de implementación de incrustación estándar en página.

<!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>

Visualización de mensajes

Al probar y depurar su código, es útil imprimir cadenas de texto y valores de objeto. Puede hacer esto usando el console objeto. Aunque este objeto no forma parte del lenguaje JavaScript, es parte del entorno de tiempo de ejecución y está disponible en la mayoría de los navegadores actuales. En Firefox, viene con la extensión Firebug. En los navegadores WebKit (Safari y Chrome), es parte de Web Inspector/DevTools. En Internet Explorer, comenzando con IE 11, forma parte de las Herramientas para desarrolladores.

El console objeto tiene varios métodos, entre los que se incluyen:

log() Método para la salida general de la información de registro. Esto permite la sustitución de cadenas y argumentos adicionales.
```
console.log("test",1,{},[1,2,3]);
```
dir() Método para mostrar una lista interactiva de propiedades de objeto.
```
console.dir({one:1, two: {three:3}});
```

Aquí hay código de ejemplo y una captura de pantalla de la consola que muestra console.log() los mensajes.

<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>

A continuación se detallan los detalles sobre el uso del objeto de consola en cada navegador.

Chrome

Ver tus mensajes en el navegador Chrome

Ejecute el código de ejemplo en el navegador Chrome. Para ver los mensajes, abra el panel DevTools:

En el navegador Chrome, selecciona el icono Personalizar y controlar Google Chrome .
Seleccione Herramientas Consola de > JavaScript.

Herramientas para desarrolladores de Chrome
En el panel DevTools, con el elemento de menú Consola seleccionado, debería ver los mensajes de la consola mostrados aquí.

Consola Chrome

Ver detalles sobre el uso de Chrome DevTools.

Safari

Ver tus mensajes en el navegador Safari

Ejecute el código de ejemplo en el navegador Safari. Para ver los mensajes, abra el panel Herramientas para desarrolladores:

Si no ves el elemento de menú Desarrollar en la barra de menús de Safari, sigue estos pasos:
1. Selecciona > Preferencias de Safari > Avanzadas.
2. Seleccione la opción Mostrar menú Desarrollar en la barra de menús .
Menú Desarrollo de Safari
En la barra de menús de Safari, seleccione Desarrollar > Mostrar consola de errores.

Consola de errores de Safari
En el panel Consola de errores, debería ver los mensajes de la consola mostrados.

Mensajes de la consola de Safari

Ver detalles sobre el uso de Safari Web Inspector.

Firefox

Visualización de tus mensajes en el navegador Firefox

Ejecute el código de ejemplo en el navegador Firefox. Para ver los mensajes, abra el panel Consola Web:

En la barra de menús de Firefox, selecciona Herramientas > Web Developer > Web Console.

Consola web de Firefox
En el panel Consola Web, debería ver los mensajes de la consola mostrados.

Mensajes de la consola de Firefox

Internet Explorer

Visualización de los mensajes en el explorador Internet Explorer (IE 11)

Ejecute el código de ejemplo en el navegador IE 11. Para ver tus mensajes, abre las Herramientas para desarrolladores:

En la barra de menús de Internet Explorer, seleccione Herramientas Herramientas para > desarrolladores o presione F12.

Herramientas para desarrolladores de IE
En la ventana Herramientas para desarrolladores, seleccione el elemento de menú Script. Cuando actualice el código de ejemplo en el navegador, debería ver los mensajes de la consola mostrados.

Mensajes de consola IE

Para algunos navegadores IE más antiguos, puede ver un mensaje de error o el navegador puede bloquearse si intenta usar el console objeto en su código cuando el panel de herramientas del desarrollador no está abierto. Esto se debe a que el console objeto no está definido. Para evitar este problema, agregue el siguiente fragmento de código a la parte superior de su código JavaScript:

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

Este código comprueba si el console objeto existe. Si no, define el console objeto con una función en blanco llamada log.

Ver detalles sobre el uso de las Herramientas para desarrolladores de Internet Explorer.

Contenido de la página