Icon Debugging

There are currently two ways to debug Elevate Web Builder applications at runtime in a web browser: by using a runtime function to log debug messages to the Messages panel in the IDE, and by using the built-in debugging facilities in the web browser of your choosing. You can use the debug message option with the embedded web browser in the IDE, but not the debugging facilities.

LogOutput Procedure
For simple debugging needs, make sure that the internal web server is the selected web server in the IDE and that the internal web server is running (see Running a Project). Then, include the WebHTTP unit in the uses clause of the unit that you wish to debug. Finally, call the LogOutput procedure where necessary, passing any debug messages to the procedure as a single String parameter:

procedure LogOutput(const Msg: String;
                    const LogURL: String=DEFAULT_LOG_URL);

By default, the LogOutput procedure will send all debug output to the internal web server by using the following URL:

http://localhost/log

Any messages passed to the LogOutput method will automatically appear in the Messages panel in the IDE.

Information This also applies to applications that are run in an external browser session. As long as the application is accessed via a localhost URL and is being loaded from the internal web server running in the IDE, all debug output will get routed to the Messages panel in the IDE.

If you are running the application in an external browser session on a completely different machine or device, then be sure to include the second parameter to the LogOutput procedure. This parameter should include the IP address/host name of the machine running the Elevate Web Builder IDE. For example, if you were running the application in a Chrome browser on an Android tablet, and the Elevate Web Builder IDE was running on the same LAN at IP address 192.168.0.2, then you would use the following value for the second LogOutput parameter:

http://192.168.0.2/log

Web Browser Debuggers
For more complex debugging needs, make sure that the Compress Output option is not checked on the Compilation page of the project options for your project, compile the project, and then run the application in an external web browser session with the web browser's debugger enabled. With Internet Explorer, FireFox, and Chrome, you can access the debugger by using the F12 key to open the developer tools panel while in the browser. The one major downside to this type of debugging is that you must debug the emitted JavaScript code, and not the Object Pascal code. Fortunately, though, the two are very similar in content and layout, and so the emitted JavaScript code is usually fairly easy to debug.

Information In general, it should not be necessary to debug your code using the web browser debugging facilities. If you find yourself doing so often, please let us know and we'll use this information to help better plan our future implementation of a built-in debugger.
Image