How to Debug a JavaScript Action in a Mendix Web Application
Even though Mendix is a low-code technology, it allows the developer to write “traditional code” alongside the “visual code”. That being said, certainly at some stage of your development cycle, you will have to inspect and debug the code. The Mendix IDE, Studio Pro, allows us to do this in the Microflows and Nanoflows directly on the user interface. If you need to use Java, Studio Pro can export the project to Eclipse, and we can debug from there. But what if we need to debug the JavaScript code?
Definition: JavaScript Action
A JavaScript Action is a custom, client-side script executed within Mendix applications, extending the functionality of nanoflows using input and output parameters, and enabling interactions with external APIs and libraries.
The definition above, kindly provided by Maia (Mendix AI Assistance), is precise concerning the pros and cons of using traditional code in your application. Since you can use external APIs and Libraries, inevitably you will face issues that need to be solved.
You can edit the JavaScript code inside the Studio Pro IDE, as shown in the picture below. However, you can’t debug this code, as the IDE doesn’t allow you to configure breakpoints and inspect the JavaScript code.
This limitation is related to the fact that the JavaScript code is executed on the client side, as Maia stated earlier. So the question arises: Is there a way to debug the JavaScript code on the browser?
Procedure: Using Devtools to debug JavaScript actions
The answer is yes and it is surprisingly simple. Your JavaScript action behaves like any other JavaScript that you’d write if your application were written in another Web framework. Below is the procedure:
[1] In this example, the goal is to debug a code that writes a given message a given number of times. Create an Entity, a Page, and also the Nanoflows as shown below:
[2] For the JSA_Web_CreateMessages
JavaScript Action used in the ACT_Web_Execute
Nanoflow, configure the object Entity
as the input parameter and Nothing
as the result type. The code is shown below:
import "mx-global";
import { Big } from "big.js";
// BEGIN EXTRA CODE
// END EXTRA CODE
export async function JSA_Web_CreateMessages(entity) {
// BEGIN USER CODE
let quantity = entity.get("Quantity");
let message = entity.get("Message");
console.warn(`Quantity: ${quantity}, Message: '${message}'`);
let containerMessage = document.querySelector(".mx-name-containerMessage");
let htmlMessage = "<ul>";
for (let i=0; i<quantity; i++) {
htmlMessage += `<li>${i+1}: ${message}</li>`
}
htmlMessage += "</ul>";
containerMessage.innerHTML = htmlMessage;
// END USER CODE
}
When editing a JavaScript action, your custom code must be surrounded by the // BEGIN EXTRA CODE
// END EXTRA CODE
or // BEGIN USER CODE
// END USER CODE
comment pairs.
The code is very simple:
- Firstly the code gets the attributes from the entity.
- Then it gets the container in the UI that will hold the messages.
- After that, it dynamically creates HTML containing the
<ui>
list with themessage
s, as many times as the value ofquantity
. - Finally, it defines the container’s
innerHTML
as the<ui>
list with the messages.
By the way, this approach (generating dynamic HTML) combined with the Events widget can be an alternative to HTML/ JavaScript Snippet or HTML Element.
After executing the app, you should get the following result:
[3] But what if you need to debug the JavaScript Action code? How to proceed? As mentioned earlier, Studio Pro cannot set breakpoints in the code, since it’s executed on the client side.
The good news is the fact that Chrome DevTools can debug this JavaScript Action, as it would do like any other JavaScript code. Hit F12 to see DevTools and go to the Sources tab. The JavaScript Action code is beneath the webpack://
tree item.
[4] Then, you can set a breakpoint in the left-hand margin of the editor. Finally, if you click on the Execute button the breakpoint should be hit, pausing the execution.
[5] You can use the controls Resume execution, Step over, Step into, and Step out as usual. In addition, you can inspect the values of the variables, watch expressions, and check the call stack. Anyway, you can debug the code as you are used to.
Conclusions
- The code runs on the client side, and it is visible on the client side as well. So, you must be aware of this before implementing your code as a JavaScript action.
- Chrome DevTools is an excellent tool to help debug your code, not only JavaScript but you can debug styling as well.