Where Can I Find The Real Memory Use Of A Page (including Images And Multimedia)?

I noticed something odd in the Memory inspector of both Chrome and Firefox. On a large page, it will tell you how much various JavaScript objects take up, but doesn't seem to list

Solution 1:

In Firefox press Ctrl+Shift+I to open the Developer Tools. Select the Memory tab. Check or select the available options, for example, Record allocation stacks, View: Dominators, Label by: Type. Click Take snapshot and scroll to review the Retained Size (Bytes), the Shallow Size (Bytes) and the Label of objects.

See also How to detect the memory allocations that are triggering garbage collection in JavaScript? , Clean-up of elements that are no longer referenced, and were never added to the document

Solution 2:

In Firefox there are two ways to measure the memory used by a page. One is described in guest271314's answer, which shows the memory usage in tree structures or as a visualized tree map. The other one is about:memory:

1. Go to about:memory.
2. Click the Measure button.
3. In the displayed tree structure find the entry related to your page under window-objects, which looks like top(<URL of your website>, id=<some ID>) (depending on the size of your page it may be listed under a sub entry (<number of small websites> tiny).

The number in MB besides the entry is the size of the page in memory.