How to debug Web Browser Component rendering issues?

Ignition
1

We are currently using this Web Browser component to visit a MES web portal and keep the operator in a single window, but that site is failing to load properly. The site is built and maintained by another company and they have requested an HAR (HTTP Archive) file to help them debug.

Per ignition docs, I hooked into the logs from the browser and I set the log level to TRACE, but only got the following:

14:33:55.075 [Browser Events Thread] ERROR Web Browser - Uncaught SyntaxError: Unexpected token .
14:35:14.245 [Browser Events Thread] ERROR Web Browser - Uncaught SyntaxError: Unexpected token .
02:35:20 SEVERE: [0605/143520.660:ERROR:password_manager.cpp(154)] NOT IMPLEMENTED
14:35:31.363 [Browser Events Thread] ERROR Web Browser - Uncaught SyntaxError: Unexpected token .
14:35:33.702 [Browser Events Thread] ERROR Web Browser - Uncaught SyntaxError: Unexpected token .
14:35:33.748 [Browser Events Thread] ERROR Web Browser - Uncaught SyntaxError: Unexpected token {
14:35:33.754 [Browser Events Thread] ERROR Web Browser - Uncaught SyntaxError: Unexpected token {
14:35:33.984 [Browser Events Thread] ERROR Web Browser - Uncaught SyntaxError: Unexpected token ?

These logs do not provide enough detail to know what part of the page is failing to render/work correctly.

The suggested way to debug this JxBrowser component, according to the people behind it, is to use a remote debugging port, but it does not look like there is any way to enable this from Ignition.

Does anyone have any suggestions on how to get the HAR file / more detailed logs to help this other company debug?

2

I had to download the version of Chromium used by JxBrowser and revisit the page and use the devtools from there.

Here is the solution I used for anyone interested...

  1. Find the version of JxBrowser, which is the library Ignition is using in the Web Browser module by running the following code in the initialize() special function in the browser component.
print(browser.getClass().getPackage().getImplementationTitle())
print(browser.getClass().getPackage().getImplementationVendor())
print(browser.getClass().getPackage().getImplementationVersion())

In my case I had JxBrowser version `6.18`

  1. Search through the JxBrowser releases page until you find your version.

  2. Find the last mention of the Chromium version in use by that JxBrowser version.
    In my case that was 6.15 which mentions Chromium version 60.0.3112.113

  3. Follow the steps here to find the binary/executable for that Chromium version.
    In my case, my base was 474897 but there was no version available, so I settled for 474896

  4. Then just install, open devtools, set persist logs and turn on record in the Network tab, revisit the page with the issue, and then right-click the logs in the Network tab and export the HAR file.

2 Likes