View the contents of memory footprint of a chrome tab - google-chrome

I've got a memory problem in my application. Symptoms are weird: js heap stays stable at around 30 mb, while memory footprint of a browser tab is growing over time out of bounds and eventually crashes entire mac os (I'm looking at memory footprint numbers provided by chrome's task manager). It takes several hours and I can reproduce it consistently. As heap review doesn't give me any clues at all, I'd like to examine the memory allocations for the browser tab, where my application is running. Does chrome provide any tools for that?

Related

Why doesn't WASM memory utilisation show up in Chrome developer tools "performance tab"?

I had a memory leak in my application (due to using a library which introduces it through WASM). This seems to cause crashes after a few minutes, and I didn't realise there was even a memory leak at first because the performance tab indicated HEAP utilisation was low: in the screenshot, it ranged from 9.8MB to 44.0MB.
However, when I captured a heap dump of the memory (under the memory tab), I noticed that I had 1939MB of memory.
Why doesn't the performance tab capture the same information as the memory tab. It looks like this behaviour is not documented anywhere?
EDIT: Updated after realising where the memory leak was coming from: WASM.

Memory leak in Task Manager even if Chrome Heap Snapshot shows zero delta

I am investigating a JS memory leak issue using Chrome DevTools. Using heap snapshots and doing comparison, I was able to root cause the component responsible for leaking the memory.
Problem I am seeing is that after the fix, even if Chrome DevTools shows no leak, Windows Task Manager shows increase in memory with usage.
Below are the heap snapshots of before and after fix.
Before fix:
After fix:
Am I missing anything here? Is Chrome DevTools somehow showing wrong result?
I read a similar thread here. But it isn't of much help.

Memory is bloated but freed after closing chrome developer tools

I'm fighting a leak on a page, which makes large AJAX requests and replaces page content once in several seconds.
If I open the page in Chrome Dev Tools, I see that memory usage grows over time (from one memory snapshot to another). There are no explicit leaks on the page (the three-snapshot technique shows there are none)
According to Google Dev tools, the memory accumulated under GC Roots -> "Global handles", in some map. As I said, closing Chrome Dev Tools result in disappearing of this memory (i.e. memory usage drops from 600+Mb to 40Mb for the page). At the same time, pressing "GC" does not help, the memory remains in place.
But if the page is remained open for several hours, it may eat gigabytes and become unresponsive.
Google Chrome version is Version 60.0.3112.90 (Official Build) (64-bit) on MacOS 10.12.6.
Any hint on how to fix/avoid such memory bloat is appreciated.

Recording memory leak in Google Chrome using Ionic in browser

How can I record memory leaks in Google Chrome similar to what is being performed in the link bewow?
https://github.com/driftyco/ionic/issues/1096
I have an Ionic app that runs embedded video, after clicking back and forth for over 10 pages during intense clicking it crashes. The pages viewed are embedded mp4s, I suspect there is some memory leakage as listed in the link above? Just need to find a way to test it
Following the post below from Ant, here is the memory log from Google Canary
http://i.imgur.com/QrwTNwe.jpg. Do the nodes and listeners look unusual?
Get chrome canary then open developer tools and click on profiles.
Using the tools there you can take heap snapshots and compare memory allocations between snapshots to see what is staying in memory or you can record heap allocations which records memory allocation in real time on a timeline so you can dig in and find where memory is not being released.
https://developer.chrome.com/devtools/docs/javascript-memory-profiling
There are some very good guides on the technicalities of doing the above if you google how to find memory leaks.

Huge difference between memory usage displayed in chrome's task manager and memory timeline

I am trying to profile the memory usage of my application using chrome's memory time line.
However i am seeing huge difference between the values reported in the time line and the values displayed by the chrome's task manager. When i profiled myweb page on chrome yesterday, the memory usage in the time line is between 11MB to 14 MB. However chrome's task manager is hovering at around 135MB Why is this difference ? If memory usage as displayed in the timeline is correct what's memory that's used by the task manager ?