Shared publicly  - 
 
First Look: Explaining Memory Consumption With DevTools Native Memory Profiler

In DevTools, the JavaScript heap profiler is used to uncover memory leaks, however this is actually limited to memory allocated in the V8 heap (i.e the heap for Chrome’s JS engine). What this means if if you have a DOM tree consuming a lot of memory, the JavaScript heap could still remain small and the heap profiler wouldn’t be of much help.

This is one of the reasons we recently introduced the new (experimental) Native memory profiler (see Settings->Experiments to enable under the Profile tab), covered in the Breakpoint Ep 5. It’s there to help better understand how the render process consumes memory which isn’t in the V8 heap. 

Feel a little lost? Don’t worry. We basically want to let you know just how much memory is used by the major components in your app: CSS, DOM, the render tree, fonts, images, JavaScript heap and so on. This is so you can figure out whether you should be optimizing your stylesheets, optimizing DOM structures or image use. 

That’s where we are with the tool right now - it shows the distribution of memory between high-level categories, helping you make informed decisions more easily. This feature is still experimental, but in the future, the team are planning on providing more detailed data for each category to make it clear what can be changed to reduce the memory footprint.

E.g if 2GB has been allocated for your app’s images, you’ll be able to see just how much memory each image takes including it’s encoded data and decoded pixels. You will also be able to see if CSS structures grow big just how your stylesheets might be tweaked to fix this.

To see +Paul Irish  take you through the feature, check out: 
Breakpoint Episode 5: DevTools Grab bag

Note: The screenshot below shows the current state of the tool in Chrome Canary, which we recommend using where possible.

#devtools   #chrome   #memory  
227
132
Owen Densmore's profile photo邵鄭叡's profile photoThaddee Tyl's profile photoLuis Guerrero's profile photo
22 comments
mh ahn
 
Great work!!
Translate
 
Thank you for this brilliant addition.
I'm not seing the 'Images' row (only CSS, DOM, Loader, Rendering and Binding).
 
If I have to think where this native memory is coming from (from the perspective of the OS) is the Chrome process that host the current site, isn't it? I mean only a Chrome child process is responsible to manage the native memory for the site you're browsing to. If you have a 2GB web page the others Chrome's child process are ok in terms of memory?

Great post!
 
Hi. I can't find it though - there's no "Experiments" under Settings, and there is no "Native Memory Profiler" under chrome://flags. Am I missing something?
 
+Fritz Stelluto You first need to enable the developer tools experiments under chrome://flags and it should then appear for you under settings. Let me know if that doesnt work!
 
+Ned Baldessin Are you in Chrome Canary latest? As this feature is experimental it is subject to change and minor aspects of the UI/tool may be adjusted while the team work on it.
 
Thanks Addy, it works on latest Chrome (24)

For reference: Did chrome://flags, enabled Enable Developer Tools experiments, restarted chrome, opened network panel in the developer inspector, clicked on the settings icon, selected Experiments / Native memory profiling, restarted Chrome again, now I can take the snapshots.

Sweet.
 
Shiny. I wish Firefox' about:memory had graphics like those.
 
Any idea why the native memory profiler generates a simple pie chart where I cannot browse into details? :/ I have the latest Chrome24
 
+Roland Eckl Are you looking at the profiles summary page or are you seeing a pie chart in the actual snapshot view?
 
Is this still available?  I badly need to see both heap and native memory for a project I'm on.  I haven't been able to find it or figure out how to turn it on within either chrome or canary latest!

Please let me know if it is obsolete! .. Or I'm just overlooking how to install/enable it.
Add a comment...