Server applications can be remotely debugged in the IDE, whereas client applications cannot. Please see the Running and Debugging a Project topic for more information on debugging server applications in the IDE.

There are currently two ways to debug client applications at runtime in a web browser: using a runtime function to log debug messages to the Messages panel in the IDE, or 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 to 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 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.


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 IDE. For example, if you were running the application in a Chrome browser on an Android tablet, and the 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 enabled for the client application project, build the project, and then run the application in an external web browser session with the web browser's debugger enabled. With Internet Explorer, Edge, 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.