In Chome on Mac, you can access the Javascript Console from the Menu Bar > View > Developer > Javascript Console as shown below. Each Browser is different, but just search the web for your particular Browser. Once the Console is displayed you may already see messages or it could be blank if nothing has been sent to the Console.



You can use Javascript to write to the Console using the Javascript "console.log" command as demonstrated at W3Schools. It's really simple:

console.log("Hello world!");

In a Xojo Web App, you'd call the Javascript console.log command using the ExecuteJavascipt command which is just as simple. However, as developers, we never want to repeat code that can be encapsulated. So, we created a Xojo Method that can be used to make Logging Messages to the Browser Console even easier. Here's how to Log some information in a Loop:

Dim i As Integer
For i = 1 To 10
   LogToBrowserConsoleLog( "Running Loop Number " + i.ToText )
Next

If you add that code to a Button.Action You should see this in the Browser Console:



The Xojo 'LogToBrowserConsoleLog' Method can be found below along with three helper methods that respectively return a Backslash, Single Quote, and a Double Quote. The three helper method could be removed and have the Chr functions pasted directly into the 'LogToBrowserConsoleLog' method, but we like having those separate since it makes code cleaner an easier to read.

The "LogToBrowserConsoleLog" Method accepts a string and then replaces each Single Quote and Double Quote with a preceding Backslash. Replacing the Quotes with a preceding Backslash is called 'escaping' which converts the Quotes into string characters rather than treating them as Quotes to define a string. W3Schools discusses Javascript Special Characters nicely. There are more characters that could be added to this like Carriage Returns and Tabs.

Public Function ChrBackslash() as string
   Return Chr(92)
End Function

Public Function ChrQuoteDouble() as string
   Return chr(34)
End Function

Public Function ChrQuoteSingle() as string
   Return chr(39)
End Function

Public Sub LogToBrowserConsoleLog(pMessage as string)
   // Escape Single and Double Quotes in the Message
   pMessage = ReplaceAll( pMessage, ChrQuoteSingle, ChrBackSlash + ChrQuoteSingle )
   pMessage = ReplaceAll( pMessage, ChrQuoteDouble, ChrBackSlash + ChrQuoteDouble )

   // Send the Message to the Web Console Log
   dim tempContainer as New WebContainer
   tempContainer.ExecuteJavaScript( "console.log('" + pMessage + "');" )
End Sub

If this is helpful, get in touch and let us know!

Thanks to Tim Dietrich for suggesting that this was worthy of a blog post!