Javascript acting differently in inappbrowser vs Chrome - Undefined global variables

Question

My problem is that when I use inappbrowser to open my web page, the main javascript file seems to be ignored, even though it is referenced in the Head of the file that I am opening using ref = cordova.InAppBrowser.open('https://MYURLHERE:8484/home/login', '_self', 'location=yes');

I am using chrome://inspect/#devices to inspect the console and I get errors when hitting buttons.. Anything referenced in the main.js file is undefined.. whereas the actual code for the autocomplete and button seems to be executing.

Please note The url is working fine when viewed in the chrome browser. The javascript files seem to load correctly, and all variables are defined correctly. - It is only when I use inappbrowser that I see issues with undefined variables.

My code (cordova app):

ref = cordova.InAppBrowser.open('https://MYURLHERE:8484/home/login', '_self', 'location=yes');
    var myInAppBrowserCallback = function(event) { 
        console.log(event.url, 'LOADED'); 
    };
    ref.addEventListener('loadstart', myInAppBrowserCallback);
//Works fine.

My code (from the actual website I'm trying to view in Inappbrowser):

<script src="/Scripts/commonFunctions.js"></script>
var p = 'Hello';

<script src="/Scripts/loginPage.js"></script>
$('#btnLogin').on('click', function() {
    alert(p);
});

Returns an alert with undefined.

What I have tried:

1. Extensive googling! (all the answers seem to be related to javascript not being enabled.. or 404 errors or things like that.. Not with global variables from one js file being undefined in another js file.)
2. Removing inappbrowser, using window.open.. Won't work as the app needs to execute scripts to inspect localstorage of the site.
3. Re-installing the android platform using cordova.
4. Re-installing the plugin.
5. Checking chrome in the inspector to ensure the files are in sources tab (they are).
6. Checking that the functions in main.js also exist (they do).

Thanks, JFIT

Answer 1

Summary: The problem was that a javascript file was trying to load 'SpeechSynthesis' which was undefined only in the inappbrowser.

Details:

The problem with this was confusing but here are the steps I found to debug / solve:

1. Set up Remote Debugging on the phone so that you can view the console of the phone using chrome://inspect/#devices

2. View the console of the inappbrowser site (which will show as a seperate page to the inappbrowser instance.

3. Identify which files are being loaded and remove files until 'undefined' errors disappear.

4. Add back in the most recent file and start to strip out various functions (especially functions/variables before document.ready (global variables also)

5. Find the line/variable that way. It was handy for me this way as the actual undefined variable showed up after I removed most of the files.

6. The actual cause of my error was the speechSynthesis functionality.

The speechsynthesis lines were removed, and I readded all remaining files and everything works. This function works fine in chrome on desktop/android but not in the inappbrowser.