TL;DR When debugging Unity WebGL apps, use the web browser’s developer tools. For Chrome browsers press the F12 key – for other browsers see below in the browser section. Unity Debug.Log*() calls redirect to the browser’s dev tools console. With that being said, if you have the spare time and want a more elaborate deep-dive into the subject, the rest of the article awaits.
A big part of developing any app is debugging it – often, that involves logging. So I don’t think anyone will argue when I say that a significant part of Unity development is using the Debug log functions (i.e. Debug.Log(), Debug.LogWarning(), Debug.LogError()).
Normally we can debug and view logs from the Unity editor while developing. But there are situations where we may need to see log messages during run-time. What happens if we need to view the Debug.Log output when the app is built to WebGL? The answer: use the browser’s debug console.
Browser Development/Debug Tools
For those building to Unity WebGL that don’t have a web development background, here’s a world-altering crumb of information: all the major desktop browsers have mature debugging suites. Some have them built straight into the browser, others have these debug tools as (official) plugins.
- For Chrome: the dev tools are toggled with the F12 key.
- For Edge: the dev tools are a separate free app in the Microsoft store.
- For Firefox: the dev tools are toggled with the F12 key.
- For Opera: the dev tools are available as an extension and toggled with the F12 key.
- For Internet Explorer: … dude,… no… treat yourself better!
The Console
For the rest of the post I’m going to use Chrome. For non-Chrome developers, you will need to use your imagination a bit and use your browser’s equivalent features.
Again, pressing the F12 key will bring up the developer tools for Chrome.
When opening the dev tools, there are some tabs. The relevant tab for viewing log information is the Console tab, which has a text log. These log entries are the messages, warnings, and errors of various things, all readable in one location – very similar to the Unity editor’s console. These entries are either raised from the browser itself or the site’s Javascript by calling console.log().
Viewing Debug Logs In The Console
With all this prerequisite information out of the way, here’s the good news: Unity WebGL apps are already set up to redirect Debug.Log* functions to the browser’s console log.
Let’s bring up the test app for some examples. First the snippet of code used to embed it, and then the embedded instance. The Log, Warning, and Error buttons will call the Debug.Log*() functions with simple messages. Test it with your developer’s tool console open.
Note the app will also catch these debug messages and show them in a text field in GUI.
That common utility file we always have to include, UnityProgress.js, has JavaScript functions that are delegated from the Unity Debug.Log*() functions and they call console.log(). If we look at a beautified version of the file here, we can see around line 2691,
...
print: function(e)
{
console.log(e)
},
printErr: function(e)
{
console.error(e)
},
Jobs:
...Beautifier.io was used to beautify the UnityProgress.js example.
For reference, here’s the snippet in the sample app that’s calling Debug.Log*() in the UI. It’s exactly what you’d expect
// In Console.cs (See the end of this article for a page with
// a download link to the project source.)
...
public class Console : MonoBehaviour
{
...
private void OnGUI()
{
...
GUILayout.BeginHorizontal();
if(GUILayout.Button("Log") == true)
Debug.Log("A Debug.Log() call");
if(GUILayout.Button("Warning") == true)
Debug.LogWarning("A Debug.Warning() call");
if (GUILayout.Button("Error") == true)
Debug.LogError("A Debug.Error() call");
if(GUILayout.Button("Clear") == true)
this.log = string.Empty;
GUILayout.EndHorizontal();
...
GUILayout.EndVertical();
}
}
Issues
There’s an article from 2016 that mentions how exceptions don’t log exceptions from coroutines. It still appears to be an issue. If you press the Start Coroutine button to get the text bar to move and press the Exception on coroutine button, the thrown exception will be shown in the Unity editor, but not shown in the console for WebGL builds, even though non-coroutine exceptions are shown. But then again, coroutines seem to have multiple quirks in WebGL builds.
Conclusion
That’s pretty much it. Just remember when looking at the log messages in the browser’s debug console, it’s the browser’s log for everything, not just your log messages. You’ll see debug log output for the browser, the website, and any 3rd party Javascript libraries. So pay attention to where various messages are coming from when skimming them while debugging.
Information on the sample WebGL app can be found here.
Built with Unity 2018.3.8f1
Authored and tested with Chrome
– Stay strong, code on. William Leu
More articles here. More articles about Unity WebGL here.