Debug HTML Content in Apps

You can include HTML content, including JavaScript^®, CSS, and third-party visualizations or widgets, in your app by using an HTML UI component. If you create an app with an HTML UI component that is not working as expected, or if you want to know what your data looks like when converting between MATLAB^® and JavaScript, you can use your system browser to debug the code in the HTML source file. Using the Developer Tools (DevTools) of your browser, you can set breakpoints to test portions of your setup function. When you debug your HTML file through the system browser, you must simulate the connection between MATLAB and JavaScript that the setup function provides.

Create Sample HTML Source File

Create a sample HTML source file. Save this code to a file named sampleHTMLFile.html.

The sample file creates three elements:

An edit field to display and edit component data
An edit field to display and edit event data
A button to send an event from JavaScript to MATLAB

The setup function in the sample file defines four callback functions:

dataFromMATLABToHTML — Update the Component data edit field with the current data. This function executes whenever the Data property of the MATLAB HTML object changes.
eventFromMATLABToHTML — Update the Event data edit field with the data from the most recent event. This function executes whenever MATLAB sends an event named "MyMATLABEvent" to the HTML source.
dataFromHTMLToMATLAB — Update the Data property of the JavaScript htmlComponent object with the text in the Component data edit field. This function executes whenever a user enters a new value in the edit field. The function triggers the DataChangedFcn callback of the MATLAB HTML object.
eventFromHTMLToMATLAB — Send an event named "MyHTMLSourceEvent" with data from the text in the Event data edit field. This function executes whenever a user clicks the Send event to MATLAB button. The function triggers the HTMLEventReceivedFcn callback of the MATLAB HTML object.

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
		
        function setup(htmlComponent) {
            console.log("Setup called:", htmlComponent);
                
            // Code response to data changes in MATLAB
            htmlComponent.addEventListener("DataChanged", dataFromMATLABToHTML);

            // Code response to events from MATLAB
            htmlComponent.addEventListener("MyMATLABEvent", eventFromMATLABToHTML);

            // Update the Data property of the htmlComponent object
            // This action also updates the Data property of the MATLAB HTML object
            // and triggers the DataChangedFcn callback function
            let dataInput = document.getElementById("compdata")
            dataInput.addEventListener("change", dataFromHTMLToMATLAB);

            // Send an event to MATLAB and trigger
            // the HTMLEventReceivedFcn callback function
            let eventButton = document.getElementById("send");
            eventButton.addEventListener("click", eventFromHTMLToMATLAB);

            function dataFromMATLABToHTML(event) {
                let changedData = htmlComponent.Data;
                console.log("New data from MATLAB:", changedData);
                
                // Update your HTML or JavaScript with the new data
                let dom = document.getElementById("compdata");
                dom.value = changedData;
            }

            function eventFromMATLABToHTML(event) {
                let eventData = event.Data;
                console.log("Event from MATLAB with event data:", eventData);

                // Update your HTML or JavaScript to react to the event
                let dom = document.getElementById("evtdata");
                dom.value = eventData;
            }

            function dataFromHTMLToMATLAB(event) {
                newData = event.target.value;
                htmlComponent.Data = newData;
                console.log("New data in HTML:", newData)
            }

            function eventFromHTMLToMATLAB(event) {
                eventData = document.getElementById("evtdata").value;
                htmlComponent.sendEventToMATLAB("MyHTMLSourceEvent", eventData);
                console.log("Sending event to MATLAB with event data:", eventData);
            }
        }
    </script>
</head>

<body>
    <div style="font-family:sans-serif;">
        <label for="compdata">Component data:</label>
        <input type="text" id="compdata" name="compdata"><br><br>
        <label for="evtdata">Event data:</label>
        <input type="text" id="evtdata" name="evtdata"><br><br>
        <button id="send">Send event to MATLAB</button>
    </div>
</body>

</html>

View HTML File in Browser

To debug the code in your HTML source file, first open the file in your browser. From the Current Folder browser in MATLAB, right-click the sampleHTMLFile.html file and select Open Outside MATLAB.

Once the file is open in your browser, you can use the Developer Tools (DevTools) of your browser to set breakpoints in the file and access the console.

Simulate Sending Data from MATLAB to JavaScript

To debug how the code in your HTML file responds to component data changes from MATLAB, simulate the way that MATLAB sends component data to JavaScript.

In MATLAB, run this code to convert a MATLAB cell array of character vectors to a JSON string. Copy the returned string value to your clipboard.
```
value = {'one';'two';'three'};
jsontxt = jsonencode(value)
```
```
jsontxt = 
'["one","two","three"]'
```
In the DevTools of your system browser, open the sampleHTMLFile.html file to view the code. Create a breakpoint in the setup function, after the code creates the htmlComponent object and adds the "DataChanged" listener.
Open the DevTools console and manually create the JavaScript htmlComponent object. Use the JSON.parse method to convert the JSON string you just generated in MATLAB to a JavaScript object and store it in the Data property of the htmlComponent object.
```
var htmlComponent = {
    Data: JSON.parse('["one","two","three"]'), // JSON-formatted text from MATLAB data
    addEventListener: function() {console.log("addEventListener called with: ", arguments)},
    sendEventToMATLAB: function() {console.log("sendEventToMATLAB called with: ", arguments)}
};
```
While still in the DevTools console, call the setup function and pass it the htmlComponent object you created.
```
setup(htmlComponent)
```
While paused at the breakpoint, execute the dataFromMATLABToHTML callback function to simulate a component data change in MATLAB. The Component data edit field updates in the HTML page.
```
dataFromMATLABToHTML()
```

Simulate Sending Events from MATLAB to JavaScript

To debug how the code in your HTML file reacts to an event from MATLAB, simulate the way that MATLAB sends event data to JavaScript.

In MATLAB, run this code to convert a MATLAB cell array of character vectors to a JSON string. Copy the returned string value to your clipboard.
```
value = {'one';'two';'three'};
jsontxt = jsonencode(value)
```
```
jsontxt = 
'["one","two","three"]'
```
In the DevTools of your system browser, open the sampleHTMLFile.html file to view the code. Create a breakpoint in the setup function, after the code creates the htmlComponent object and adds the "MyMATLABEvent" listener.
Open the DevTools console and manually create both the JavaScript htmlComponent object and the event data from the MATLAB event. Use the JSON.parse method to convert the JSON string you just generated in MATLAB to a JavaScript object and store it in the Data property of the event data.
```
var htmlComponent = {
    Data: '',
    addEventListener: function() {console.log("addEventListener called with: ", arguments)},
    sendEventToMATLAB: function() {console.log("sendEventToMATLAB called with: ", arguments)}
};
var event = {
    Data: JSON.parse('["one","two","three"]'), // JSON-formatted text from MATLAB data
};
```
While still in the DevTools console, call the setup function and pass it the htmlComponent object you created.
```
setup(htmlComponent)
```
While paused at the breakpoint, execute the eventFromMATLABToHTML callback function and pass it the event object you created to simulate an event that MATLAB sent. The Event data edit field updates in the HTML page.
```
eventFromMATLABToHTML(event)
```

Simulate Sending Data from JavaScript to MATLAB

To debug how your MATLAB code reacts to component data changes from JavaScript, simulate the way that JavaScript sends component data to MATLAB.

In the DevTools of your system browser, open the console. Create a JavaScript object with the component data you want to simulate sending.
```
var data = [[1,2],[3,4]];
```
Call the JavaScript JSON.stringify method to display how the component converts the data for MATLAB.
```
JSON.stringify(data)
```
```
'[[1,2],[3,4]]'
```
In the MATLAB Command Window, use the jsondecode function to convert this data to a MATLAB data type. The output represents the format of the data sent to MATLAB in the Data property of the HTML UI component object.
```
jsondecode('[[1,2],[3,4]]')
```
```
ans =

     1     2
     3     4
```

Simulate Sending Events from JavaScript to MATLAB

To debug how your MATLAB code reacts to an event from JavaScript, simulate the way that JavaScript sends event data to MATLAB.

In the DevTools of your system browser, open the console. Create a JavaScript object with the event data you want to simulate sending.
```
var data = [[1,2],[3,4]];
```
Call the JavaScript JSON.stringify method to display how the component converts the data for MATLAB.
```
JSON.stringify(data)
```
```
'[[1,2],[3,4]]'
```
In the MATLAB Command Window, use the jsondecode function to convert this data to a MATLAB data type. The output represents the format of the data sent to MATLAB in the HTMLEventData property of the HTMLEventReceivedFcn event data.
```
jsondecode('[[1,2],[3,4]]')
```
```
ans =

     1     2
     3     4
```