Debugging JavaScript Code

When we write code then we always introduce bugs; we need to debug the code to find the problem. We need a way to debug the code. In the previous section (https://www.hemelix.com/scada-hmi/twincat-hmi/reading-writing-variables-in-javascript/), we have described how to use JavaScript code for reading and writing variables from a PLC.

We have built our JavaScript code based on the Asynchronous function provided by Beckhoff (https://infosys.beckhoff.com/english.php?content=../content/1033/te2000_tc3_hmi_engineering/4702049035.html&id=)

var symbol = new TcHmi.Symbol('%s%PLC1.MAIN.sTest%/s%');
symbol.readEx(function (data) {
    if (data.error === TcHmi.Errors.NONE) {
        // Handle result value... 
        var value = data.value; 
        console.log(value); 
    } else {
        // Handle error... 
    }
});

From the above function, we see that when there is no error, then data.error will be equal to TcHmi.Errors.NONE. If the error is other than NONE, then we have an error. From the error code listed on the Beckhoff page, I’m not exactly sure what could go wrong. We shall introduce a few bugs, and then we will debug those as part of troubleshooting.

The error code provided by Beckhoff can be found in the following link https://infosys.beckhoff.com/index.php?content=../content/1031/te2000_tc3_hmi_engineering/3758305291.html&id=

In this debugging page, we shall consider or demonstrate an error case. We shall show how we debug when we have such an error.

    E_SERVER_COMMAND_ERROR = 3005,

There are a variety of reasons why we get this error; we can’t make sure what the reason is for this error until we debug the code. 3005 is something related we are making a mistake in our command. This is a typical common mistake we make when we read and write variables from the PLC.

We can debug the JavaScript code when we are using live view or when we are running in the browser.

Debugging by using live view

The HMI live view is part of the TwinCAT HMI framework. It is available when we are in Visual Studio Design view, as shown in the following images. When we press on the L, it will launch the built-in browser, or if we press on Google Chrome, it will launch Chrome (we can configure it to other browsers as well).

Figure 01: Live view, TwinCAT HMI (by pressing L we can get the live view)

When we launch the Live-View, we can see that our HMI is running. At the top, there are options like Refresh and Show Developer Tools. For debugging purposes, we will primarily use the Elements, Console, Sources, and Network tabs (especially when troubleshooting network-related issues).

If we have something to print on the console, we can do it in the following way.

var doorAtHome = await ReadFromServer('%s%PLC1.MAIN.doorAtHome%/s%');
var motorStatus = await ReadFromServer('%s%PLC1.MAIN.motorStatus%/s%');
console.log('doorAtHome = ' + doorAtHome); // Print the value of doorAtHome
console.log('motorStatus = ' + motorStatus);
if(doorAtHome == true && motorStatus == true){
	var ret = await WriteToServer('%s%PLC1.MAIN.motorOutPut%/s%', true);
	var someControl = TcHmi.Controls.get('TcHmiTextbox');	    
	var myRet = `Write Status = ${ret}`;
	console.log(myRet); //print myRet

We can print relevant variables, which may help diagnose and resolve issues if they arise. If we have pressed the “Set Motor Output” button, and if we browse the console windo,w we can see the following output to the console. It is very useful information for debugging an issues.

Figure 02: Debug output in the console window

The following image shows how we can find the console window.

Figure 03: Live view, Developer Tools

When the HMI is active, several image-based control buttons are available at the top of the interface. Selecting the Show Developer Tools icon (gear symbol) opens the browser’s developer tools panel.

Activating the Set Motor Output button triggers a console log entry: Write Status = 0, indicating the command has been processed. This output can be observed in the Console tab within the developer tools.

Additional tabs commonly used for inspection and debugging include:

Elements – Displays the DOM structure and HTML elements of the page.

Sources – Provides access to the JavaScript source files and their execution context.

Figure 04: Live view, Debug window

The Sources tab allows access to the application’s source code. Breakpoints can be set by clicking on the desired line number within the code editor. Once a breakpoint is set, code execution will pause at that point when reached. This enables step-by-step debugging using options such as Step In, Step Over, and Step Out.

During a paused state, the right-side panel displays the current values of in-scope variables, which can be inspected to diagnose and resolve issues effectively.

Figure 05: Debugging source code step by step

Debugging with Chrome or after Publish:

We may have published our content, but we might have missed something. We can also debug using the browser.

=> Press F12 as the HMI is running

=> You get access to developer tools

YouTube Video:

Download:

Download the sample from this link TcHmiJSBasicPromise_Debug.zip

References:

=> https://developer.chrome.com/docs/devtools/javascript

Download the sample from the link given above.

See next how to use settings by JavaScript https://www.hemelix.com/scada-hmi/twincat-hmi/twincat-hmi-device-setting-and-popup/

Ask questions related to Hemelix sample code and design at Google group https://groups.google.com/g/hemelix