How do you profile memory for a standalone WebGL application?

Here are some tools for profiling memory in a WebGL application based on the category of memory you're looking at:

1. Total javascript memory in a page:
   1. Firefox about:memory page shows memory allocation breakdowns for each process/webpage. I've included a screenshot of what it shows for a test WebGL application.
   2. Besides Chrome's in-browser memory tab in the dev tools, you can also the performance.memory API to get information about the current total/used Javascript heap size. This works on Chrome only right now.
   3. As for Safari, I don't know of anything that useful outside of their in-browser dev tools.
2. WASM heap memory: the --memory-profiler flag will build the page with an added section that breaks down the WASM heap memory usage. Since the WASM heap memory is part of the total JS memory, you can then see how much of the memory used on the page is coming from the WASM heap as opposed to everything else in your page.
3. C# managed memory: The Unity Profiler package will show you detailed info about managed memory. You'll see breakdowns of textures/meshes/materials. A lot of the time we recommend that you run the profiler to the WebGL build and a native build, and see if there's a major difference between the two, if there isn't, you can then turn your attention towards the javascript memory.

I hope this helps!

 

You can enable it by adding a script to your project like so:

Code (CSharp):

1. using UnityEditor;
2.  
3. public class memoryprofiler
4. {
5.     [MenuItem("HTML5/Activate MemoryProfiler")]
6.     static void foo() {
7.         PlayerSettings.WebGL.emscriptenArgs = "--memoryprofiler --profiling-funcs";
8.     }
9. }

and then clicking on the Activate MemoryProfiler under the HTML5 menu item the script created, and then it should show up in your resulting WebGL page once you build.