Debugging

SUMMARY

Debugging web app JS code

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.

Debugging JS code located into a library

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.

Next to step through your JS code, here is the procedure to follow if you use Chrome as web browser:

1. Open Chrome DevTools by pressing Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS).
2. Click the Sources tab then open the myscript.js library on the right, under the applications/default/public/js/ folder.
3. Add a breakpoint to the left of the line of code by clicking where the line number is displayed. Then, a blue icon is displayed.
4. Now, whenever your JS code is executed, it is paused when is reached the line of code where the breakpoint is located.

Here are some useful links for debugging your JS code with your favorite web browser:
The Firefox JavaScript Debugger
How to pause your code with breakpoints in Microsoft Edge DevTools
How To Pause Your Code With Breakpoints In Chrome DevTools

Debugging JS code located into a view

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.

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.

Auditing data sent and received via AJAX requests

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:

1. Enter the URL of your web application in the address bar of the browser.
2. Open Chrome DevTools by pressing Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS).
3. Click the Network tab then apply the XHR filter by clicking on it in order to display only the AJAX requests.
4. Interact with your web app to trigger AJAX requests.
5. Click on the index.php name corresponding to the AJAX Request to analyze.
6. The POST parameters and their value are displayed in the the Form Data section of the Headers tab.
7. The response of the web server in JSON or in HTML is displayed in the Preview and Response tabs.

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 web app PHP code

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.

Fixing PHP errors by analyzing the errors.log file

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.