Debugging your web app in JS and in PHP.
When you write JavaScript code for your web app, you can easily step through the code using debugging capabilities of your web browser like Chrome, Firefox or Edge.
This way you can check if your code is doing what you expect it to do and whether your variables contain the right values or not.
Extra Libraries containing JavaScript code are loaded in your web app through the CFG_APP_JS
parameter.
For example, if the JS library is named myscript.js
and located into the INSTALL_DIR/applications/default/public/js/
folder, it is loaded in your web app just by adding the following line into the config.php
script of your web app.
define('CFG_APP_JS', 'applications/default/public/js/myscript.js');
Next to step through your JS code, here is the procedure to follow if you use Chrome as web browser:
myscript.js
library on the right, under the applications/default/public/js/
folder.If your JS code is embedded directly in the view, it is a bit trickier to debug it, especially because the view is loaded on demand when the user clicks on a menu item.
See below an example of a view that embeds JS code.
<div class="w3-panel">
<button id="my-button" class="w3-btn w3-green">My button</button>
<p id="my-paragraph"></p>
</div>
<script>
console.log('** My view **');
var clickCount = 0;
handleMyButtonClickEvents(function(){
clickCount++;
$('#my-paragraph').text(clickCount);
});
</script>
The first line of JS code into the <script/>
tag is console.log('** My view **');
.
Thanks to the call of the JS instruction console.log()
, the label displayed in the browser Console tab (i.e. ** My view **
) includes a link on the right which gives direct access to the complete JS Code in the Sources tab of the browser debugger.
Then, a breakpoint can be added to the left of the line of code where the JS code is to be paused, as shown on the screenshot.
When developing with the ZnetDK for Mobile JS API, AJAX requests are used for submiting form data (see Input Form) and for retrieving data (see Input Form, Data List and Autocomplete) from the web server.
You can also execute AJAX requests directly through the znetdkMobile.ajax methods.
Your web browser can again be useful when developing your web application, for tracking data sent to the web server through AJAX requests, and for verifying the data returned in response.
To do this, here is the procedure to follow if you use Chrome as web browser:
index.php
name corresponding to the AJAX Request to analyze.See below screenshots that show the data sent and received via an AJAX request when the List of persons are displayed in the Web App Demonstration (menu Persons
):
Debugging PHP code requires a text editor (like Notepad++, Atom, ...) or an IDE (like NetBeans, Visual Studio Code, ...) and the Xdebug PHP debugging tool.
Installing and configuring Xdebug is not the goal of this page. You can easily find tutorials on the web for fine-tuning debugging features in your favorite development tool.
Nevertheless, it is highly recommended to use PHP code debugging features to effectively develop your web application.
See below an example of debugging session with Apache NetBeans and XDebug. As with your web browser's debugger, you can add breakpoints, walk through your PHP code and examine data structure of variables.
errors.logfile
All PHP errors of the ZnetDK web apps are logged in the INSTALL_DIR/engine/log/errors.log
file.
These errors are runtime errors, fatal errors and exceptions that are not catched by the application.
Extra error messages can be added by a ZnetDK web app to the INSTALL_DIR/engine/log/errors.log
file by calling the \General::writeErrorLog()
method.