--- title: Depuración de páginas web slug: develop/es/depuracion-de-paginas-web docTags: createdAt: 2025-03-11T07:03:32.131Z --- ## Web Inspector Puede usar el [Web Inspector](https://trac.webkit.org/wiki/WebInspector) para depurar páginas web a través de la red local. :::hint{type="info"} La consola JavaScript solo debe usarse en presentaciones que no sean de producción y debe deshabilitarse antes de publicar en un entorno de producción porque usa más memoria, lo que puede provocar reinicios frecuentes y compromete la seguridad. ::: ### Habilitación/deshabilitación de Web Inspector A partir de BOS versión 8.5.31 y posteriores, *ambas* configuraciones, una de presentación y otra de registro (la clave de registro `habilitar_inspector_web` en la sección `html`), son necesarias para habilitar Web Inspector. A continuación se describen los diversos métodos que puede usar para habilitar estas configuraciones. **Mediante la configuración de presentación:** - *BrightSign Author*: En su presentación de BrightSign Author, vaya a **Pestaña de presentación > Propiedades del estado > Opciones **y seleccione** Habilitar la consola de JavaScript**. - *BrightAuthor Classic*: En su presentación de BrightAuthor Classic, vaya a **Archivo > Propiedades de la presentación > HTML** y marque la casilla **Habilitar la consola de JavaScript** . Consulte "inspector\_server" en [roHtmlWidget](docId\:g_TJkqqHLcfT4Fw5_Z6T0) para obtener más información. - *BrightScript*: Al crear la instancia de *roHtmlWidget* , incluya el parámetro de inicialización **inspector\_server** y especifique un número de puerto.  **Mediante la configuración del registro:** Estas configuraciones solo son necesarias a partir de BOS versión 8.5.31 y posteriores. - *DWS local/remoto*: Seleccione **Permitir la consola de JavaScript** en la sección [Depuración de Chromium](docId\:qXt4YHey7IEj_M9dH73wM) del DWS. - *APIs de DWS local*: Establezca `PUT /v1/diagnostics/chromium-debug/` en `verdadero` para habilitar Web Inspector. Consulte [esta página](docId\:iarP3f9OdwDMwfHw7PY4y) para obtener más información. - *BrightScript*: Establezca la clave de registro `habilitar_inspector_web` en “1” para habilitar Web Inspector para Chromium en el reproductor (si se establece en “0” o en nada, Web Inspector estará deshabilitado). Por ejemplo: ```text reg = CreateObject("roRegistrySection","html") reg.Write("enable_web_inspector", "1") reg.Flush() ``` Para deshabilitar Web Inspector, deshabilite la configuración de presentación o de registro que usó para habilitarlo. Si quiere cambiar el puerto de Web Inspector, debe editar la configuración de *roHtmlWidget*. Consulte "inspector\_server" en [roHtmlWidget](docId\:g_TJkqqHLcfT4Fw5_Z6T0) para obtener más información. :::hint{type="info"} Habilitar Web Inspector crea una vulnerabilidad de seguridad en los reproductores BrightSign. Consulte [esta página](docId\:Ecb_HWEI2wJVvCqlxPD1x) para obtener más detalles. ::: ### Inspección de una página web Una vez que el contenido HTML se esté ejecutando en un reproductor BrightSign, siga estos pasos para inspeccionarlo: 1. Abra Chrome en una computadora de escritorio conectada a la misma red local. 2. Introduzca la siguiente URL en la barra de direcciones: chrome://inspect/devices 3. En la sección **Dispositivos** , haga clic en **Configurar**. 4. Introduzca la dirección IP del reproductor y el puerto de Web Inspector en el campo (consulte la imagen a continuación). Las páginas que se estén ejecutando en el reproductor BrightSign se mostrarán en la parte inferior de la página. - Si no conoce la dirección IP del reproductor, encienda el reproductor con la tarjeta microSD (y otros dispositivos de almacenamiento) retirados. Después de unos momentos, la dirección IP se mostrará en pantalla. - Si habilitó el Web Inspector en BrightAuthor, use el puerto 2999 (p. ej. http\://192.168.1.62:2999/). 5. Haga clic en el botón **Inspeccionar** junto a una página. Se iniciará una sesión de depuración en una nueva ventana. A diferencia de las páginas locales, el contenido de la página no se muestra en el panel izquierdo, pero la ventana del inspector de la derecha puede utilizarse para depurar la página. ::Image[]{src="https://api.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/jdYWwI4Jz54K-8DauY6rC_inspector.png" size="70" width="1563" height="881" position="center" darkWidth="1563" darkHeight="881" showCaption="false"} :::hint{type="info"} Agregar más de un dispositivo en su lista puede causar problemas de rendimiento, especialmente si los dispositivos no están en línea, porque el cliente de Chrome continuará buscando cualquier dispositivo fuera de línea. ::: ### Compatibilidad de versiones de Chromium Debido a que los reproductores BrightSign usan una versión más antigua de Chromium que las versiones recientes de escritorio, es posible que las versiones más nuevas de Chrome para escritorio no funcionen con el Web Inspector. Si tiene problemas al usar el Web Inspector con su versión de Chrome, descargue e instale una de estas versiones: - Linux: [https://www.googleapis.com/download/storage/v1/b/chromium-browser-snapshots/o/Linux\_x64/576753/chrome-linux.zip?generation=1532051976706023\&alt=media](https://www.googleapis.com/download/storage/v1/b/chromium-browser-snapshots/o/Linux_x64%2F576753%2Fchrome-linux.zip?generation=1532051976706023\&alt=media) - OSX**:** [https://www.googleapis.com/download/storage/v1/b/chromium-browser-snapshots/o/Mac/576753/chrome-mac.zip?generation=1532055270387578\&alt=media](https://www.googleapis.com/download/storage/v1/b/chromium-browser-snapshots/o/Mac%2F576753%2Fchrome-mac.zip?generation=1532055270387578\&alt=media) - Windows de 64 bits: [https://www.googleapis.com/download/storage/v1/b/chromium-browser-snapshots/o/Win\_x64/576753/chrome-win32.zip?generation=1532053193483102\&alt=media](https://www.googleapis.com/download/storage/v1/b/chromium-browser-snapshots/o/Win_x64%2F576753%2Fchrome-win32.zip?generation=1532053193483102\&alt=media) :::hint{type="info"} Si está utilizando el Web Inspector para recorrer manualmente código JavaScript, encontrar un error no capturado en el depurador puede causar que el reproductor falle. Este es un error conocido del Web Inspector. ::: Puede encontrar una colección más amplia de descargas compatibles de Chromium [aquí](docId\:YGi_yIWT6pZ2BtU-GrfuP). ## Eventos de seguimiento El sistema Chromium TraceEvent le permite depurar pérdidas de memoria de JavaScript, problemas de rendimiento y problemas de renderizado. Esta función está disponible en las versiones de firmware 7.0.82 y posteriores. A diferencia de las PC, donde el seguimiento/depurador se ejecuta en el mismo navegador que el contenido, los reproductores BrightSign escriben archivos de seguimiento JSON en el almacenamiento local, que luego puede importar a Chrome en su PC. Cuando los eventos de seguimiento están habilitados en un reproductor BrightSign, Chromium captura mensajes de seguimiento en un búfer circular. El reproductor toma instantáneas periódicas de este búfer y las escribe en el directorio raíz de la tarjeta microSD o SSD como archivos JSON.  :::hint{type="info"} El sistema TraceEvent puede generar fácilmente gigabytes de datos de registro en el almacenamiento local, por lo que recomendamos deshabilitarlo en entornos de producción. ::: :::hint{type="info"} Consulte esta [página](https://stackoverflow.com/questions/12996129/memory-leak-when-logging-complex-objects) de StackOverflow para obtener más información sobre pérdidas de memoria al usar console.log para registrar objetos complejos. ::: ### Creación de un directorio TraceEvent Antes de habilitar el sistema TraceEvent, cree un directorio llamado "brightsign-webinspector" en el directorio raíz de la tarjeta microSD o SSD del reproductor. Si falta este directorio, el reproductor no registrará eventos de seguimiento cuando estén habilitados en el registro. Por el contrario, puede deshabilitar los eventos de seguimiento eliminando el directorio "brightsign-webinspector" del dispositivo de almacenamiento. ### Habilitación del sistema TraceEvent El sistema TraceEvent se habilita y configura escribiendo en el registro del reproductor BrightSign (mediante [BrightScript](docId\:KF6Wam7iqXizx7ADu18g-) o [JavaScript](docId\:YBGFx7QTi58_kCdury-_3)). Para habilitar el sistema TraceEvent, escriba las siguientes claves en la sección `html` del registro: - `tracecategories` string: Una lista separada por comas de categorías de eventos de seguimiento para habilitar. Los nombres de las categorías están documentados en el enlace a continuación. - `tracemaxsnapshots` int: El número máximo de archivos de instantáneas de seguimiento JSON en el directorio "brightsign-webinspector". Cuando se alcanza el límite, el contador vuelve al inicio y comienza a sobrescribir el archivo de seguimiento más antiguo. - `tracemonitorinterval` int: La frecuencia (en segundos) con la que el reproductor tomará instantáneas del búfer TraceEvent. Recomendamos 60 segundos como valor predeterminado. **Ejemplo (JavaScript):** ```text var registryClass = require("@brightsign/registry"); var registry = new registryClass(); registry.write("html", { "tracecategories": "toplevel,blink_gc,disabled-by-default-memory-infra,disabled-by-default-blink_gc,disabled-by-default.skia.gpu.cache", "tracemaxsnapshots": "25", "tracemonitorinterval": "60" }).then( function() { console.log("Write Successful"); }); ``` ### Visualización de eventos de rastreo Siga estos pasos para ver los eventos de rastreo: 1. Transfiera los archivos de rastreo JSON del directorio "brightsign-webinspector" a su PC. 2. Abra *chrome://tracing* en su instancia de Chromium en el PC. 3. Importe los archivos de rastreo JSON. Puede combinar varios archivos de rastreo; sin embargo, en una captura de rastreo larga, habrá demasiados eventos de rastreo para verlos todos a la vez (probablemente necesitará escribir un script para procesarlos). ### Documentación adicional Consulte los siguientes enlaces para obtener una explicación más detallada de los eventos de rastreo: - [https://www.chromium.org/developers/how-tos/trace-event-profiling-tool](https://www.chromium.org/developers/how-tos/trace-event-profiling-tool) - [https://chromium.googlesource.com/chromium/src/+/lkcr/docs/memory-infra/README.md](https://chromium.googlesource.com/chromium/src/+/lkcr/docs/memory-infra/README.md) - [https://developers.google.com/web/tools/chrome-devtools/memory-problems/](https://developers.google.com/web/tools/chrome-devtools/memory-problems/)