GUI Composer: How to get Javascript error messages

Felix,

Sorry about the delayed reply.

Have you had a look at this wiki page? http://processors.wiki.ti.com/index.php/Advanced_Application_Debugging_-_GUI_Composer

Thanks, I did not find this page. I followed the instructions and set remote_debugging_port = 8080. However, when I go to localhost:8080 in chrome, it cannot load the page (ERR_CONNECTION_REFUSED). Do I have to activate this plugin somewhere?
I also do not really understand the following instruction: "Click on the remote debug-able browser instance to start debugging the webpage." Does this mean I have to do something specific in chrome to be able to load the page?

Felix,

After you add -Dremote_debugging_port=8080 in ccstudio.ini file and restart CCS by running the ccstudio.exe, you should be able to open chrome browser and enter localhost:8080 in the address bar to remote attach chrome browser to debug an internal chromium browser within CCS.

If your PC has port 8080 blocked by the firewall, try changing it to something else. i.e 9191.

Patrick

Hi Patrick,

it is still not working. Maybe I am missing something. This is what I did:

1. Open the archive C:\ti\ccsv6\eclipse\plugins\com.ti.chromium.browser_1.0.0.201512011200.jar, edit the .default_settings file and set "remote_debugging_port": 8080,
2. Open C:\ti\ccsv6\eclipse\ccstudio.ini and add -Dremote_debugging_port=8080 in a new line (does it matter at which position in the file I add this?)
3. Explicitly open the port in the windows firewall (I am using Windows 10, in case it matters)
4. Start CCS, start GUI Composer, start Preview of the GUI
5. Open localhost:8080 in Chrome --> ERR_CONNECTION_REFUSED

I also tried it with different port numbers but with the same result.

Hi Patrick,

thanks, now it is working!

One follow-up question on this: Is it possible to access things like $TI or functions/variables defined in app.js in the debugger console? I would like to interactively play around a bit but when I, for example, execute $TI.GUIVars.getValue("test") in the console, I only get the error "ReferenceError: $TI is not defined".

Best, Felix

You should be able use the chrome console to evaluate any javascript expression, including the $TI variable. Are you trying to evaluate this expression in designer mode? This variable is defined when the app is running. i.e preview.

Patrick

I am using the preview mode but it does not work. I will describe what exactly I am doing, maybe I am doing something wrong.

When I run the GUI inside CCS (preview mode) and open localhost:9191 (I set to port number to 9191) in Chrome, I get the following text:

There I click on the "Preview" link which opens the Developer Tools. When I open the "Console" tab I see javascript error messages caused by syntax errors (which is already very helpful!), but I cannot access $TI or anything from app.js.

I noticed, that in the elements tab, I do not see app.html directly but only a simple HTML page that includes app.html via an iframe:

Could this be the problem, that the app.html itself is not directly running in the debugger?

I also get the following error several times in the console tab:

Blocked a frame with origin "http://127.0.0.1:7272" from accessing a frame with origin "file://". The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "file". Protocols must match.

Ah, I missed that. Now it is working! Thanks a lot for your help.

Felix