To find possible errors in your own defined JavaScripts, it is advisable to use the debugging function of your browser.
We explain how this works with the most common browsers in the following article.
It is important to note that changes you make at runtime within the debugger only affect the current browser session.
After refreshing the page or restarting the runtime, these would be lost.
It is therefore important to copy any changes you make directly in the debugger to the editor afterwards so that they are permanent.
When can debugging be helpful?
1. if you receive an error message “Error in user Javascript:” at runtime, this always indicates an error that was triggered within a user-defined function. The error message contains on the one hand the description of the error that has occurred here “textVariable is not defined” and on the other hand the name of the function that was called before the error occurred.
If your script does not work as you expect it to. If incorrect values are written or read.
2 In this case, it helps to debug the code to find the error more quickly.
The following JavaScript debugging topics are covered in this chapter:
| JavaScript debugging in Google Chrome |
| JavaScript debugging in Firefox |
| JavaScript debugging in Microsoft Internet Explorer |
| JavaScript debugging in Microsoft Edge |
| JavaScript debugging in Opera |
JavaScript debugging in Google Chrome
The following instructions refer to version 83.0.4103.61 of Google Chrome.
This process may differ for future versions.
To carry out JavaScript debugging, you must call up the browser’s “developer tools“.
You can do this easily in Google Chrome with “F12” or via the browser settings:
The developer tool opens and displays every JavaScript that has been created in a .ujs file (User JavaScript) at the top level in plain text.
The name of the file corresponds to the name under which the JavaScript block created in the editor was saved.
In this example, “Main“. Accordingly, a separate file would be created for each JavaScript block saved.
Debugging can now be carried out from here. Breakpoints can be set and errors rectified.
In this simple example, you can see from the highlighting that something does not fit and needs to be corrected.
The debugging itself can vary from browser to browser.
JavaScript debugging in Firefox
The following instructions refer to version 76.0.1 of Firefox. This procedure may differ for future versions.
To carry out JavaScript debugging, you must call up the browser’s “developer tools“. In Firefox, this is easily done with “F12” or via the browser settings:
The developer tool opens and displays every JavaScript that has been created in a .ujs file (User JavaScript) at the top level in plain text.
The name of the file corresponds to the name under which the JavaScript block created in the editor was saved.
In this example, “Main“. Accordingly, a separate file would be created for each JavaScript block saved.
Debugging can now be carried out from here. Breakpoints can be set and errors rectified.
In this simple example, you can see from the highlighting that something does not fit and needs to be corrected.
The debugging itself can vary from browser to browser.
JavaScript debugging in Microsoft Internet Explorer
The following instructions are based on version 11 of Microsoft Internet Explorer.
To carry out JavaScript debugging, you must call up the browser’s “developer tools“.
In Internet Explorer, this is easily done with “F12” or via the browser settings:
The developer tool opens and displays every JavaScript that has been created in a .ujs file (User JavaScript) at the top level in plain text.
The name of the file corresponds to the name under which the JavaScript block created in the editor was saved. In this example, this is “Main“.
Accordingly, a separate file would be created for each JavaScript block saved.
Debugging can now be carried out from here. Breakpoints can be set and errors rectified.
In this simple example, you can see from the highlighting that something does not fit and needs to be corrected.
The debugging itself can vary from browser to browser.
JavaScript debugging in Microsoft Edge
The following instructions refer to version 81.0.416.77 of Microsoft Edge.
This process may differ for future versions.
To carry out JavaScript debugging, you must call up the browser’s “developer tools“.
You can do this in MS Edge simply by pressing “F12” or via the browser settings:
The developer tool opens and displays every JavaScript that has been created in a .ujs file (User JavaScript) at the top level in plain text.
The name of the file corresponds to the name under which the JavaScript block created in the editor was saved.
In this example, “Main“. Accordingly, a separate file would be created for each JavaScript block saved.
Debugging can now be carried out from here. Breakpoints can be set and errors rectified.
In this simple example, you can see from the highlighting that something does not fit and needs to be corrected.
The debugging itself can vary from browser to browser.
JavaScript debugging in Opera
The following instructions refer to version 68.0.3618.125 of Opera.
This process may differ for future versions.
To carry out JavaScript debugging, you must call up the browser’s “developer tools”.
This is done very simply in Opera using the key combination “Ctrl + Shift + i“.
The developer tool opens and displays every JavaScript that has been created in a .ujs file (User JavaScript) at the top level in plain text.
The name of the file corresponds to the name under which the JavaScript block created in the editor was saved. In this example, this is “Main“.
Accordingly, a separate file would be created for each JavaScript block saved.
Debugging can now be carried out from here. Breakpoints can be set and errors rectified.
In this simple example, you can see from the highlighting that something does not fit and needs to be corrected.
The debugging itself can vary from browser to browser.
