Recording Heap Allocations in 2018 Chrome Dev Tools? - google-chrome

Google's documentation on how to do this is now out of date: https://developers.google.com/web/tools/chrome-devtools/memory-problems/allocation-profiler
The dev tools UI has changed since this was written (I'm using v66), and I can't figure out how to get to a heap allocation bar graph which looks like this:
Can anyone walk me through this? I've gone to Settings and checked Record heap allocation stack traces which I believe is one step that is required to do this. In the performance tab I've checked the memory box and have recorded some actions, but once that's done I get more of a line graph for heap, rather than a bar graph:
Halp?

Memory profilers are moved to Memory panel. The one you're looking for is called "Allocation instrumentation on timeline".

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.

View the contents of memory footprint of a chrome tab

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?

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.

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.

Chrome timeline slow GC events

This screenshot is from my chrome extension. I'm just scrolling the screen up and down, and it keeps freezing. Looks like it's caused by garbage collection. How can I figure out why this is happening?
No code is running as far as I'm aware. I'm just scrolling the page. Why would it keep dumping 27MB of memory every second!?
I can't take a heap snapshot because it takes forever, then actually crashes the plugin.
Once it invokes GC, that means you are having something allocated on JS heap.
You can use heap profiler to find out what's that. Go to Profiles panel and use Record Heap Allocations tool.