Debugging Webpages

web inspector you can use the web inspector https //trac webkit org/wiki/webinspector to debug webpages over the local network the javascript console should only be used in non production presentations and it should be disabled before you publish in a production environment because it uses more memory, which can lead to frequent reboots, and it compromises security enabling/disabling the web inspector as of bos version 8 5 31 and later, both a presentation setting and a registry setting ( enable web inspector registry key in the html section) are required to enable the web inspector the various methods you can use to enable these settings are described below through the presentation setting brightauthor\ connected in your brightauthor\ connected presentation, go to presentation tab > state properties > options and select enable javascript console brightauthor in your brightauthor presentation, go to file > presentation properties > html and check the enable javascript console box see the "inspector server" in rohtmlwidget docid\ xljq5 yhdma2ssmpzimtk for more information brightscript when creating the rohtmlwidget instance, include the inspector server initialization parameter and specify a port number through the registry setting these settings are only required as of bos version 8 5 31 and later local/remote dws select allow javascript console in the diagnostic web server (dws) docid\ qxt4yhey7iej m9dh73wm section of the dws local dws apis set put /v1/diagnostics/chromium debug/ to true to enable the web inspector see ldws diagnostics endpoints docid\ sayok1v5mynjrfjdyjo5k for more information brightscript set the enable web inspector registry key to “1” to enable the web inspector for chromium on the player (if it is set to “0” or nothing, the web inspector is disabled) for example reg = createobject("roregistrysection","html") reg write("enable web inspector", "1") reg flush() to disable the web inspector, disable either the presentation or registry setting you used to enable it if you want to change the web inspector port, you must edit the configuration of rohtmlwidget see the "inspector server" in rohtmlwidget docid\ xljq5 yhdma2ssmpzimtk for more information enabling the web inspector creates a security vulnerability on brightsign players see brightsign player security docid\ ecb hwei2wjvvcqlxpd1x for more details inspecting a webpage once html content is running on a brightsign player, follow these steps to inspect it open chrome on a desktop computer connected to the same local network enter the following url into the address bar chrome //inspect/devices in the devices section, click configure enter the player ip address and web inspector port in the field (see the image below) the page(s) being run on the brightsign player will be displayed at the bottom of the page if you don't know the player ip address, power on the player with the microsd card (and other storage devices) removed after a few moments, the ip address will be displayed on screen if you enabled the web inspector in brightauthor, use port 2999 (e g http //192 168 1 62 2999/) click the inspect button next to a page a debugging session will be launched in a new window unlike local pages, the page contents are not displayed in the left pane, but the inspector window on the right can be used to debug the page adding more than one device in your list can cause performance issues, especially if the devices are not online, because the chrome client will continue to search for any offline devices chromium version compatibility because brightsign players use an older version of chromium than recent desktop versions, newer desktop chrome releases may not work with the web inspector if you're having trouble using the web inspector with your version of chrome, download and install one of these versions 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 64 bit 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 if you're using the web inspector to manually step through javascript code, encountering an uncaught error in the debugger may cause the player to crash this is a known bug with the web inspector a larger collection of supported chromium downloads can be found chromium downloads docid\ ygi yiwt6pz2btu grfup trace events the chromium traceevent system allows you to debug javascript memory leaks, performance issues, and rendering problems this feature is available in firmware versions 7 0 82 and later unlike pcs, where the trace/debugger is run in the same browser as the content, brightsign players write json trace files to the local storage, which you can then import to chrome on your pc when trace events are enabled on a brightsign player, chromium captures trace messages to a circular buffer the player takes regular snapshots of this buffer and writes them to the root directory of the microsd card or ssd as json files the traceevent system can easily generate gigabytes of log data on local storage, so we recommend disabling it in production environments see this stackoverflow page https //stackoverflow\ com/questions/12996129/memory leak when logging complex objects for more information about memory leaks when using console log to log complex objects creating a traceevent directory before enabling the traceevent system, create a directory named "brightsign webinspector" in the root directory of the microsd card or ssd on the player if this directory is missing, the player will not record trace events when they are enabled in the registry conversely, you can disable trace events by deleting the "brightsign webinspector" directory from the storage device enabling the traceevent system the traceevent system is enabled and configured by writing to the brightsign player registry (via roregistry docid\ ytpsfntswyfmxx8pcqjlf or registry docid\ txwoombd2 u12dfegx7ga ) to enable the traceevent system, write the following keys to the html section of the registry tracecategories string string a comma separated list of trace event categories to enable the category names are documented in the link below tracemaxsnapshots int int the maximum number of json trace snapshot files in the "brightsign webinspector" directory when the limit is reached, the counter wraps around and begins writing over the oldest trace file tracemonitorinterval int int the frequency (in seconds) with which the player will take snapshots of the traceevent buffer we recommend 60 seconds as a default value example (javascript) 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"); }); viewing trace events follow these steps to view the trace events transfer the json trace files from the "brightsign webinspector" directory to your pc open chrome //tracing on your pc chromium instance import the json trace files you can merge multiple trace files; however, in a long trace capture, there will be too many trace events to view at once (you'll likely need to write a script to process them) additional documentation see the following links for further explanation of trace events 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/